@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">Financial Components Data</h3>
@endsection

@section('content')
<div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
    id="navbar">
    <div class="rounded-t-xl border border-input border-b-input bg-background filter-container flex items-stretch grow">
        <!-- Container -->
        <div class="kt-container-fluid flex justify-center items-stretch gap-5 nav-color">
            <div class="grid items-stretch">
                <div class="kt-scrollable-x-auto flex items-stretch">
                    <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true">
                        @include('includes.admin-forms-navbar')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mx-auto px-4 py-6">

     <div style="display: flex;justify-content:space-between">
        <div id="customSearch" class="flex items-center gap-2">
            <input type="text" id="search" placeholder="Search Financial Data"
                class="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
        </div>

        <div class="mt-2 mb-2 flex justify-end">
            <button type="button" id="openModal" class=" text-white px-4 py-2 rounded" style="background-color: #205C2E;">Add Component</button>
        </div>
    </div>

    <!-- <div class="kt-container-fluid overflow-x-auto bg-white rounded-lg shadow p-4"> -->
        <table id="component_table" class="min-w-full table-auto border border-gray-300">
            <thead class="bg-gray-200" style="background-color: #205C2E;">
                <tr>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">SR.</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Component</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Budget (PKR)</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Releases (PKR)</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Total Expense</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Utilization (%)</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Remarks</th>
                    <th style="color: white;" class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200"></tbody>
        </table>
    <!-- </div> -->

</div>

<!-- Modal -->
<div id="modal" class="model hidden management">
    <div class="modal-content watercourse-form-model bg-white rounded-lg w-full max-w-3xl max-h-[90vh] flex flex-col">

        <div class="modal-header p-4 border-b">
            <h2 id="modalTitle">Component</h2>
            <button id="closeModal">✕</button>
        </div>

        <!-- Make modal body scrollable -->
        <div class="modal-body flex-1 overflow-y-auto">
            <input type="hidden" id="componentId">

            <div class="form-group">
                <label>Serial No</label>
                <input type="number" id="serial_no" class="form-input w-full">
            </div>
            <div class="form-group">
                <label>Component Name</label>
                <input type="text" id="component_name" class="form-input w-full">
            </div>
            <div class="form-group">
                <label>Budget (PKR)</label>
                <input type="number" id="budget" class="form-input w-full">
            </div>
            <div class="form-group">
                <label>Releases (PKR)</label>
                <input type="number" id="releases" class="form-input w-full">
            </div>
            <div class="form-group">
                <label>Total Expense</label>
                <input type="number" id="total_expense" class="form-input w-full">
            </div>


            <!-- Add Approval Button -->
            <button type="button" id="addApprovalBtn"
                class="px-3 py-1 bg-green-600 text-white rounded" style="background-color: green;">
                Phase 1 allocation +
            </button>

            <!-- Container for dynamically added approvals -->
            <div id="approvalsContainer" class="mt-3 space-y-2"></div>
            <div class="form-group">
                <label for="remarks">Remarks</label>
                <textarea id="remarks" class="w-full border border-gray-300 rounded-md p-2 focus:border-blue-500 focus:ring focus:ring-blue-200"></textarea>
            </div>
        </div>

        <div class="modal-footer p-4 border-t flex justify-end gap-2">
            <button id="cancel" class="px-3 py-1 bg-gray-400 rounded">Cancel</button>
            <button id="saveBtn" class="px-3 py-1 bg-blue-600 text-white rounded">Save</button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@vite('resources/js/admin-forms/financial_components.js')
@endsection

<script type="text/template" id="component-action-buttons">
    <div class="flex gap-2 justify-end">
        @can('financial data edit')
            <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded">Edit</button>
        @endcan
        @can('financial data delete')
            <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded">Delete</button>
        @endcan
    </div>
</script>