@extends('layouts.app')

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

<style>
    .my-confirm-btn {
        background-color: #B71C1C !important;
        color: #fff !important;
    }

    .select2-container--default .select2-selection--single {
        background-color: #f0f4f7 !important;
    }

    .modal-body {
        padding: 0px !important;
    }

    .swal2-confirm {
        width: 100% !important;
        padding: 12px !important;
        padding: 0.675em 2.5em !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        background-color: #2563EB !important;
    }

    .swal2-cancel {
        background-color: transparent !important;
        color: #2563EB !important;
        font-weight: 600 !important;
    }

    .hidden {
        display: none;
    }

    .rotate {
        transform: rotate(180deg);
    }
</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 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('progress create')
            <button id="addRBMFBtn" class="text-white px-4 py-2 rounded" style="background-color: #205C2E;">Add
                Progress</button>
            @endcan
        </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-center" style="color: white; text-align:center">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 style="background-color:#f0f4f7" class="modal-content watercourse-form-model bg-white rounded-lg w-full max-w-lg 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">
            <input type="hidden" id="progressId">

            <div class="flex items-center gap-2 mt-3">
                <!-- Icon -->
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 15H11V9H9V15ZM10 7C10.2833 7 10.5208 6.90417 10.7125 6.7125C10.9042 6.52083 11 6.28333 11 6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6C9 6.28333 9.09583 6.52083 9.2875 6.7125C9.47917 6.90417 9.71667 7 10 7ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z" fill="#3755C3" />
                </svg>


                <h2 class="text-lg font-semibold">Basic Information</h2>
            </div>
            <div class=" rounded-xl p-5 shadow-sm bg-white mb-4">


                <!-- Component Name -->
                <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" style="background-color:#f0f4f7">
                </div>

                <!-- Grid Fields -->
                <div class="grid grid-cols-3 gap-6">

                    <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" disabled style="background-color:#f0f4f7">
                    </div>

                    <!-- 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>

            </div>

            <!-- Manual / CSV Buttons -->
            <div id="inputTypeSelection" class="hidden">

                <div class="flex items-center gap-2 mb-1">
                    <!-- Icon -->
                    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V11H2V14H18V2H2V5H0V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2ZM9.5 12.5L8.1 11.05L10.175 9H0V7H10.175L8.1 4.95L9.5 3.5L14 8L9.5 12.5Z" fill="#3755C3" />
                    </svg>
                    <h2 class="text-lg font-semibold">Input Method</h2>
                </div>
                <div class=" rounded-xl shadow-sm">


                    <div class="flex gap-3">

                        <!-- Manual Entry Card -->
                        <div id="manualBtn"
                            class="relative border border-gray-200 rounded-lg p-3 flex items-start gap-2.5 cursor-pointer flex-1"
                            onclick="selectInputMethod('manual')" style="background-color:#fff">


                            <svg id="manualIcon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="48" height="48" rx="12" fill="#3755C3" fill-opacity="0.1" />
                                <path d="M16 34.0123C15.45 34.0123 14.9792 33.8165 14.5875 33.4248C14.1958 33.0331 14 32.5623 14 32.0123V18.0123C14 17.4623 14.1958 16.9915 14.5875 16.5998C14.9792 16.2081 15.45 16.0123 16 16.0123H24.925L22.925 18.0123H16V32.0123H30V25.0623L32 23.0623V32.0123C32 32.5623 31.8042 33.0331 31.4125 33.4248C31.0208 33.8165 30.55 34.0123 30 34.0123H16ZM20 28.0123V23.7623L29.175 14.5873C29.375 14.3873 29.6 14.2373 29.85 14.1373C30.1 14.0373 30.35 13.9873 30.6 13.9873C30.8667 13.9873 31.1208 14.0373 31.3625 14.1373C31.6042 14.2373 31.825 14.3873 32.025 14.5873L33.425 16.0123C33.6083 16.2123 33.75 16.4331 33.85 16.6748C33.95 16.9165 34 17.1623 34 17.4123C34 17.6623 33.9542 17.9081 33.8625 18.1498C33.7708 18.3915 33.625 18.6123 33.425 18.8123L24.25 28.0123H20ZM32.025 17.4123L30.625 16.0123L32.025 17.4123ZM22 26.0123H23.4L29.2 20.2123L28.5 19.5123L27.775 18.8123L22 24.5873V26.0123ZM28.5 19.5123L27.775 18.8123L28.5 19.5123L29.2 20.2123L28.5 19.5123Z" fill="#3755C3" />
                            </svg>


                            <div>
                                <div id="manualCheck" class="flex items-center justify-between w-full">

                                    <p class="text-[13px] font-medium text-gray-900 m-0">
                                        Manual Entry
                                    </p>

                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
                                            fill="#3755C3" />
                                    </svg>

                                </div>

                                <p class="text-[12px] text-gray-500 mt-0.5 m-0">Update fields directly in the interface.</p>
                            </div>

                            <div id="manualCheck"
                                class="absolute top-2.5 right-2.5 w-[18px] h-[18px] bg-blue-600 rounded-full items-center justify-center hidden">

                            </div>
                        </div>

                        <!-- Upload CSV Card -->
                        <div id="csvBtn"
                            class="relative border-2 border-blue-600 rounded-lg p-3 flex items-start gap-2.5 cursor-pointer flex-1"
                            onclick="selectInputMethod('csv')" style="background-color:#fff">


                            <svg id="csvIcon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="48" height="48" rx="12" fill="#E1E9EE" />
                                <path d="M23 31H25V26.825L26.6 28.425L28 27L24 23L20 27L21.425 28.4L23 26.825V31ZM18 34C17.45 34 16.9792 33.8042 16.5875 33.4125C16.1958 33.0208 16 32.55 16 32V16C16 15.45 16.1958 14.9792 16.5875 14.5875C16.9792 14.1958 17.45 14 18 14H26L32 20V32C32 32.55 31.8042 33.0208 31.4125 33.4125C31.0208 33.8042 30.55 34 30 34H18ZM25 21V16H18V32H30V21H25ZM18 16V21V16V21V32V16Z" fill="#566166" />
                            </svg>


                            <div>
                                <div id="csvCheck" class="flex items-center justify-between w-full">

                                    <p class="text-[13px] font-medium text-gray-900 m-0">
                                        Upload CSV
                                    </p>

                                    <svg id="csvCheck" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z"
                                            fill="#3755C3" />
                                    </svg>

                                </div>


                                <p class="text-[12px] text-gray-500 mt-0.5 m-0">Bulk update activities via data import.</p>
                            </div>

                            <div id="csvCheck"
                                class="absolute top-2.5 right-2.5 w-[18px] h-[18px] bg-blue-600 rounded-full flex items-center justify-center">
                            </div>
                        </div>

                    </div>

                    <!-- CSV Upload Section -->
                    <div id="csvContainer" class="mt-4">

                        <!-- Drag & Drop Box -->
                        <div id="dropArea"
                            class="w-full border-2 border-dashed border-gray-300 rounded-xl p-10 text-center cursor-pointer bg-gray-50 hover:bg-gray-100 transition">

                            <!-- Icon -->
                            <div class="flex justify-center mb-3">
                                <div class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-200">
                                    <svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24">
                                        <path d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"
                                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                </div>
                            </div>

                            <!-- Text -->
                            <p class="text-sm font-medium text-gray-700">
                                Click to upload or drag and drop
                            </p>
                            <p class="text-xs text-gray-400 mt-1">
                                Maximum file size 50MB (.csv, .xlsx)
                            </p>

                            <!-- Hidden Input -->
                            <input type="file" id="fileInput"
                                class="hidden" accept=".csv,.xlsx">
                        </div>


                        <!-- File Name -->
                        <p id="file"
                            class="hidden"></p>

                        <!-- Error -->
                        <small id="fileError" class="text-red-500 hidden">
                            Please upload a valid file!
                        </small>
                    </div>

                    <!-- Manual Input Container -->
                    <div id="activitiesPreviewHeader" class="flex justify-between items-center mt-6 mb-2">

                        <!-- Left: Activities Review -->
                        <div class="flex items-center gap-2">


                            <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H6.2C6.41667 1.4 6.77917 0.916667 7.2875 0.55C7.79583 0.183333 8.36667 0 9 0C9.63333 0 10.2042 0.183333 10.7125 0.55C11.2208 0.916667 11.5833 1.4 11.8 2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V4H2V18ZM4 16H11V14H4V16ZM4 12H14V10H4V12ZM4 8H14V6H4V8ZM9 3.25C9.21667 3.25 9.39583 3.17917 9.5375 3.0375C9.67917 2.89583 9.75 2.71667 9.75 2.5C9.75 2.28333 9.67917 2.10417 9.5375 1.9625C9.39583 1.82083 9.21667 1.75 9 1.75C8.78333 1.75 8.60417 1.82083 8.4625 1.9625C8.32083 2.10417 8.25 2.28333 8.25 2.5C8.25 2.71667 8.32083 2.89583 8.4625 3.0375C8.60417 3.17917 8.78333 3.25 9 3.25ZM2 18V4V18Z" fill="#3755C3" />
                            </svg>

                            <span class="text-[14px] font-bold text-blue-700 uppercase tracking-widest">Activities Preview</span>
                        </div>

                        <!-- Right: Add Activity Button -->
                        <button
                            id="addIndicatorBtn"
                            class="hidden flex items-center gap-1 px-3 py-1.5 text-[12px] font-semibold text-blue-700  rounded-lg hover:bg-blue-50 transition-colors" style="background-color:#E1E9EE">
                            + ADD ACTIVITY
                        </button>

                    </div>

                    <!-- Activities Container -->
                    <div id="approvalsContainer" class="space-y-3">

                        <!-- Single Activity Card -->
                        <div class="activity-card bg-white border border-gray-200 rounded-xl overflow-hidden">

                            <!-- Card Header -->

                            <!-- CSV Upload Container -->
                            <!-- <div id="csvContainer" class="mt-3 hidden">
                    <label class="block font-semibold mb-1">Select CSV File</label>
                    <input type="file" id="csvFile" class="form-input w-full border rounded p-2" accept=".csv">
                </div> -->
                            <!-- <div id="csvContainer" class="hidden">
                    <label for="fileInput" class="block font-medium mb-1">
                        Import File (CSV) - <a href="#" id="downloadSample" class="text-primary">(Sample)</a>
                    </label>

                    <div class="relative w-full">
                        <input type="text" id="file"
                            class="w-full border border-gray-300 rounded-lg p-2 mb-1 bg-white cursor-not-allowed"
                            placeholder="No file chosen" readonly>

                        <input type="file" id="fileInput"
                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
                            accept=".csv">
                    </div>

                    <small id="fileError" class="text-red-500 hidden">
                        Please upload a CSV file only!
                    </small>
                </div> -->

                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div class="modal-footer border-t flex ">
            <button id="cancel" class="px-3 py-1 rounded bg-gray-200 text-black hover:bg-gray-0" style="border: 1px solid #c6c9ce;">
                Cancel
            </button>
            <button id="saveBtn" style="background-color:#2563EB !important;" class="px-3 py-1 text-white rounded">
                Save Progress
            </button>
        </div>
    </div>

    </script>
</div>

<script>
    const dropArea = document.getElementById('dropArea');
    const fileInput = document.getElementById('fileInput');
    const fileText = document.getElementById('file');

    // DEFAULT STATE
    document.addEventListener('DOMContentLoaded', function() {
        selectInputMethod('manual');
    });

    function selectInputMethod(type) {

        const manualBtn = document.getElementById('manualBtn');
        const csvBtn = document.getElementById('csvBtn');

        const manualCheck = document.getElementById('manualCheck');
        const csvCheck = document.getElementById('csvCheck');

        const manualIcon = document.getElementById('manualIcon');
        const csvIcon = document.getElementById('csvIcon');

        const csvContainer = document.getElementById('csvContainer');
        const approvalsContainer = document.getElementById('approvalsContainer');
        const addBtn = document.getElementById('addIndicatorBtn');
        const activitiesHeader = document.getElementById('activitiesPreviewHeader');

        if (type === 'manual') {

            manualBtn.classList.add('border-2', 'border-blue-600');
            manualBtn.classList.remove('border', 'border-gray-200');
            manualIcon.classList.add('text-blue-600');
            manualCheck.classList.remove('hidden');

            csvBtn.classList.remove('border-2', 'border-blue-600');
            csvBtn.classList.add('border', 'border-gray-200');
            csvIcon.classList.remove('text-blue-600');
            csvCheck.classList.add('hidden');

            addBtn.classList.remove('hidden');
            approvalsContainer.classList.remove('hidden');
            csvContainer.classList.add('hidden');
            if (activitiesHeader) activitiesHeader.classList.remove('hidden');

        } else if (type === 'csv') {

            csvBtn.classList.add('border-2', 'border-blue-600');
            csvBtn.classList.remove('border', 'border-gray-200');
            csvIcon.classList.add('text-blue-600');
            csvCheck.classList.remove('hidden');

            manualBtn.classList.remove('border-2', 'border-blue-600');
            manualBtn.classList.add('border', 'border-gray-200');
            manualIcon.classList.remove('text-blue-600');
            manualCheck.classList.add('hidden');

            addBtn.classList.add('hidden');
            csvContainer.classList.remove('hidden');
            approvalsContainer.classList.add('hidden');
            if (activitiesHeader) activitiesHeader.classList.add('hidden');
        }
    }

    dropArea.addEventListener('click', () => fileInput.click());

    fileInput.addEventListener('change', handleFile);

    dropArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropArea.classList.add('bg-gray-100');
    });

    dropArea.addEventListener('dragleave', () => {
        dropArea.classList.remove('bg-gray-100');
    });

    dropArea.addEventListener('drop', (e) => {
        e.preventDefault();
        fileInput.files = e.dataTransfer.files;
        handleFile();
    });

    function handleFile() {
        const file = fileInput.files[0];
        if (!file) return;

        fileText.innerText = '';
        if (!file.name.endsWith('.csv') && !file.name.endsWith('.xlsx')) {
            document.getElementById('fileError').classList.remove('hidden');
            fileInput.value = '';
            fileText.innerText = '';
            return;
        }

        document.getElementById('fileError').classList.add('hidden');
    }

    function toggleActivity(el) {
        const body = el.nextElementSibling;
        const icon = el.querySelector(".activityArrow");

        if (!body || !icon) return;

        body.classList.toggle("hidden");
        icon.classList.toggle("rotate");
    }

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

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

            @can('progress 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/progress.js')
@endsection