@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;"></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 Progress 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 id="addRBMFBtn" class=" text-white px-4 py-2 rounded" style="background-color: #205C2E;">Add Progress</button>
        </div>
    </div>

    <table id="rbmfTable" class="min-w-full table-auto border border-gray-300">
        <thead class="bg-gray-100" style="background-color: #205C2E;">
            <tr>
                <th class="px-4 py-2 text-left" style="color: white;">ID</th>
                <th class="px-4 py-2 text-left" style="color: white;">Title</th>
                <th class="px-4 py-2 text-left" style="color: white;">Year</th>
                <th class="px-4 py-2 text-left" style="color: white;">Actions</th>
            </tr>
        </thead>
        <tbody id="rbmfTableBody" class="divide-y divide-gray-200">
        </tbody>
    </table>
</div>

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

        <div class="modal-header p-4 border-b flex justify-between items-center">
            <h2 id="modalTitle">Progress</h2>
            <button id="closeModal">✕</button>
        </div>

        <!-- Scrollable modal body -->
        <div class="modal-body flex-1 overflow-y-auto p-4">
            <input type="hidden" id="progressId">

            <div class="form-group mb-3">
                <label for="title" class="block font-semibold mb-1">Component Name</label>
                <input type="text" id="title" class="form-input w-full border rounded p-2" placeholder="Enter Component Name">
            </div>
            <div class="form-group mb-3">
                <label for="order" class="block font-semibold mb-1">Component Order</label>
                <input type="text" id="order" class="form-input w-full border rounded p-2" placeholder="Enter Component Order">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-3">
                <!-- Previous Year -->
                <div>
                    <label class="block font-semibold mb-1">Previous Year</label>
                    <select id="previousYear" class="form-input w-full border rounded p-2">
                        <option value="">Previous Year</option>
                        <option value="2024-25">2024-25</option>
                    </select>
                </div>

                <!-- Current Year -->
                <div>
                    <label class="block font-semibold mb-1">Current Year</label>
                    <select id="currentYear" class="form-input w-full border rounded p-2">
                        <option value="">Current Year</option>
                        <option value="2025-26">2025-26</option>
                    </select>
                </div>
            </div>
            <!-- Add Approval Button -->
            <button type="button" id="addIndicatorBtn"
                class="px-3 py-1 bg-green-600 text-white rounded" style="background-color: green;">
                Add Activities +
            </button>
            <div id="approvalsContainer" class="mt-3 space-y-2"></div>

            <!-- <div class="form-group mb-3">
                <label for="baseline" class="block font-semibold mb-1">Baseline</label>
                <input type="number" id="baseline" class="form-input w-full border rounded p-2" placeholder="Enter Baseline">
            </div>
            <div class="form-group mb-3">
                <label for="targets" class="block font-semibold mb-1">Targets</label>
                <input type="number" id="targets" class="form-input w-full border rounded p-2" placeholder="Enter Targets">
            </div>

             <div class="form-group mb-3">
                <label for="acheivements" class="block font-semibold mb-1">Acheivements</label>
                <input type="number" id="acheivements" class="form-input w-full border rounded p-2" placeholder="Enter Acheivements">
            </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>


<script>
    $(document).ready(function() {
        const $modal = $('#modal');
        const $modalTitle = $('#modalTitle');
        const $progressId = $('#progressId');

        // ===== Open Add Baseline Modal =====

        // ===== Close Modal =====
        $('#closeModal, #cancel').click(function() {
            $modal.removeClass('show').addClass('hidden');
            $('body').removeClass('overflow-hidden');
        });

        // Close modal when clicking outside content
        $modal.click(function(e) {
            if (e.target === this) {
                $modal.removeClass('show').addClass('hidden');
                $('body').removeClass('overflow-hidden');
            }
        });

        // Close modal on ESC key
        $(document).on('keydown', function(e) {
            if (e.key === "Escape" && $modal.hasClass('show')) {
                $modal.removeClass('show').addClass('hidden');
                $('body').removeClass('overflow-hidden');
            }
        });
    });
</script>
<script type="text/template" id="rbmf-action-buttons">
    <div class="flex gap-2 ">
      
            <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded">Edit</button>
       
        
            <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded">Delete</button>
    
    </div>
</script>
@endsection

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