@extends('layouts.app')

@section('dashboard-title')
    <h3>Importer</h3>
@endsection

@section('content')
<div id="loading-overlay">
    <div class="spinner"></div>
</div>
    <!-- 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">
                <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">
                <!-- Search Box on Left -->
                <div id="customSearch" class="flex items-center gap-2">
                    {{-- <label for="importSearch" class="font-medium text-gray-700">Search:</label> --}}
                    <input type="text" id="search" placeholder="Search imported files"
                        class="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">
                + Import New file
            </button>

            </div>


            <table id="import_table" class="divide-y divide-gray-200">
                <thead class="bg-primary">
                    <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">Files Name</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Component Type</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Sub Component</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">
                    @forelse ($importFiles as $importFile)
                         <tr data-id="1" data-name="Punjab">
                        <td class="px-4 py-2 text-gray-800">1</td>
                        <td class="px-4 py-2 text-gray-800">{{ $importFile->file_name }}</td>
                        <td class="px-4 py-2 text-gray-800">{{ $importFile->component_type }}</td>
                        <td class="px-4 py-2 text-gray-800">{{ $importFile->sub_component }}</td>
                        <td class="px-4 py-2 text-gray-800"> {{ $importFile->created_at->format('d M Y') }}</td>
                    </tr>
                    @empty
                        
                    @endforelse
                   
                </tbody>
            </table>
        </div>
    </div>
    <!-- End of Container -->

    <!-- Modal -->
    <div id="modal" class="model hidden">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h2 id="modalTitle">Import file</h2>
                <button id="closeModal">✕</button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body space-y-3">

                <!-- Import Components Dropdown -->
                <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="A">Component A</option>
                    <option value="B">Component B</option>
                </select>
                <small class="text-red-500 hidden text-xs leading-tight mt-0" id="mainComponentError">
                    Please select Import Component
                </small>

                <!-- Component A Dropdown -->
                <div id="componentABox" class="hidden">
                    <label class="block font-medium mb-1">Component A Options</label>
                    <select id="componentAOptions" class="select2 w-full border rounded-lg p-2 mb-1">
                        <option value="">Select Option</option>
                        <option value="water_pond">Water Pond</option>
                        <option value="check_dam">Check Dam</option>
                        <option value="water_reservoir">Water Reservoir</option>
                        <option value="stream_bank">Stream Bank Stabilization</option>
                        <option value="gated_field">Gated Field Inlet/Outlet Spillway</option>
                        <option value="terracing">Terracing</option>
                        <option value="micro_watershed">Micro Watershed Development</option>
                        <option value="seepage_harvesting">Water Seepage Harvesting Galleries</option>
                        <option value="agronomic_low_cost">Agronomic Low-Cost Interventions</option>
                    </select>
                    <small class="text-red-500 hidden" id="componentAError">
                        Please select Component A option
                    </small>
                </div>

                <!-- Component B Dropdown -->
                <div id="componentBBox" class="hidden">
                    <label class="block font-medium mb-1">Component B Options</label>
                    <select id="componentBOptions" class="select2 w-full border rounded-lg p-2 mb-1">
                        <option value="">Select Option</option>
                        <option value="insallation_tubewell">Installation of Tube Wells</option>
                        <option value="solarization_tubewell">Solarization of Agricultural Tube Wells</option>
                    </select>
                    <small class="text-red-500 hidden" id="componentBError">
                        Please select Component B option
                    </small>
                </div>

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


                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button id="cancel">Cancel</button>
                    <button id="saveBtn">Submit</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

@endsection


@section('scripts')
    @vite(['resources/js/admin-forms/importFile.js'])
@endsection