@extends('layouts.app')

@section('content')
<!-- Inner Navbar -->
<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>
<!-- End of Inner Navbar -->

<!-- Container -->
<div class="kt-container-fluid">
    <div class="grid mb-5">
        <div class="flex justify-between items-center mb-5">
            <!-- Search Box on Left -->
            <div id="customSearch" class="flex items-center gap-2">
                {{-- <label for="zoneSearch" class="font-medium text-gray-700">Search:</label> --}}
                <input type="text" id="search" placeholder="Search File"
                    class="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>

            <!-- Add New Zone button -->
             
            <button type="button" id="openModal"
                class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                + Add New File
            </button>
          
        </div>


        <table id="pll_table" class="divide-y divide-gray-200">
            <thead class="bg-primary form-title">


                <tr>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">SR.</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Username</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">File Name</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Created At</th>
                </tr>

            </thead>
            <tbody class="divide-y divide-gray-200 form-body">

            </tbody>
        </table>
    </div>
</div>
<!-- End of Container -->

<!-- Modal -->
<div id="modal"
    class="zone-model hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">

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

        <!-- Modal Header -->
        <div class="modal-header flex justify-between items-center p-4 border-b">
            <h2 id="modalTitle" class="text-lg font-semibold">File</h2>
            <button id="closeModal" class="text-xl">✕</button>
        </div>
        <!-- Modal Body (Scrollable) -->
        <div class="modal-body overflow-y-auto p-4">

            <label class="block font-medium mb-1">Import Component</label>
            <select id="mainComponent" class="select2 w-full border rounded-lg p-2 mb-1">
                <option value="">Select Component</option>
                <!-- <option value="WC_sample_final">WaterCourse</option>
                <option value="wst">WST</option>
                <option value="pll">PLL</option>
                <option value="nwmc">NWMC</option>
                <option value="reports">Reports</option>
                <option value="meie">ME&IE</option> -->
                 <option value="monitoring">Monitoring</option>
            </select>
            <small class="text-red-500 hidden text-xs leading-tight mt-0" id="mainComponentError">
                Please select Import Component
            </small>
            <!-- Custom File Input -->
            <div id="fileInputBox" class="hidden">
                <label for="fileInput" class="block font-medium mb-1">
                    Import File (CSV) - <a href="#" id="downloadSample" class="text-primary">(Sample <span
                            id="import-fileName"></span>)</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 class="modal-footer">
            <button id="cancel">Cancel</button>
            <button id="saveBtn">Submit</button>
        </div>
    </div>



    @endsection

    @section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @vite('resources/js/admin-forms/importFile.js')
    @endsection

    </rewritten_file>