@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">Baseline</h3>
@endsection
<style>
    .my-confirm-btn {
        background-color: #B71C1C !important;
        color: #fff !important;
    }
</style>
@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 class="mt-2 mb-2 flex justify-end">
        <button id="addRBMFBtn" class=" text-white px-4 py-2 rounded" style="background-color: #205C2E;">Add RBMF</button>
    </div> -->

    <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">
            @can('grm create')
            <button id="addGRMBtn" class=" text-white px-4 py-2 rounded" style="background-color: #205C2E;">Add GRM</button>
        </div>
        @endcan
    </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;">Components</th>
                <th class="px-4 py-2 text-left" style="color: white;">General Complaints</th>
                <th class="px-4 py-2 text-left" style="color: white;">Overall Pending Complaints</th>
                <th class="px-4 py-2 text-left" style="color: white;">Overall, In-Progress Complaints</th>
                <th class="px-4 py-2 text-left" style="color: white;">Overall Returned Complaints</th>
                <th class="px-4 py-2 text-left" style="color: white;">Overall Closed Complaints</th>

                <th class="px-4 py-2 text-center" 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">GRM</h2>
            <button id="closeModal">✕</button>
        </div>

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

            <div class="form-group mb-3">
                <label for="components" class="block font-semibold mb-1">Components</label>
                <select id="components" class="form-input w-full border rounded p-2">
                    <option value="">Select Component</option>
                    <option value="Comp-I">Comp-I</option>
                    <option value="Comp-II">Comp-II</option>
                    <option value="Comp-III">Comp-III</option>
                    <option value="Comp-IV">Comp-IV</option>
                </select>
            </div>

            <div class="form-group mb-3">
                <label for="general_complaints" class="block font-semibold mb-1">General Complaints</label>
                <input type="number" id="general_complaints" class="form-input w-full border rounded p-2" placeholder="Enter General Complaints">
            </div>
            <div class="form-group mb-3">
                <label for="pending_complaints" class="block font-semibold mb-1">Overall Pending Complaints</label>
                <input type="number" id="pending_complaints" class="form-input w-full border rounded p-2" placeholder="Enter Overall Pending Complaints">
            </div>

            <div class="form-group mb-3">
                <label for="inprogress_complaints" class="block font-semibold mb-1">Overall, In-Progress Complaints</label>
                <input type="number" id="inprogress_complaints" class="form-input w-full border rounded p-2" placeholder="Enter Overall, In-Progress Complaints">
            </div>

            <div class="form-group mb-3">
                <label for="returned_complaints" class="block font-semibold mb-1">Overall Returned Complaints</label>
                <input type="number" id="returned_complaints" class="form-input w-full border rounded p-2" placeholder="Enter Overall Returned Complaints">
            </div>
            <div class="form-group mb-3">
                <label for="closed_complaints" class="block font-semibold mb-1">Overall Closed Complaints</label>
                <input type="number" id="closed_complaints" class="form-input w-full border rounded p-2" placeholder="Enter Overall Closed Complaints">
            </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 $grmId = $('#grmId');

        // ===== Open Add Baseline Modal =====
        $('#addGRMBtn').click(function() {
            $grmId.val('');
            $('#components').val('');
            $('#pending_complaints').val('');
            $('#general_complaints').val('');
            $('#inprogress_complaints').val('');
            $('#returned_complaints').val('');
            $('#closed_complaints').val('');

            $modalTitle.text('Add GRM');
            $modal.removeClass('hidden').addClass('show');
            $('body').addClass('overflow-hidden'); // prevent background scroll
        });

        // ===== 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="grm-action-buttons">
    <div class="flex gap-2 justify-end">
        @can('grm edit')
            <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded">Edit</button>
        @endcan
        @can('grm delete')
            <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded">Delete</button>
        @endcan
    </div>
</script>
@endsection

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