@extends('layouts.main')
@section('main-container')
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <h2 class="page-title d-flex align-items-center gap-2 mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <circle cx="12" cy="11" r="3" />
                            <path d="M17.657 16.657l-4.243 4.243l-4.243 -4.243a8 8 0 1 1 8.486 0z" />
                        </svg>
                        Add District
                    </h2>

                </div>
				<!-- Page title actions -->
				<div class="col-auto ms-auto d-print-none">
					<div class="btn-list">
	                    <span class="d-none d-sm-inline">
                            <a href="#" class="btn btn-1">New view</a>
	                    </span>
                            <a href="/geo/districts" class="btn btn-primary btn-5 d-none d-sm-inline-block">
	                            Report
                            </a>
                            <a href="#" class="btn btn-primary btn-6 d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
	                            <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
	                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2"><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                            </a>
                    </div>

                    
                </div>
            </div>
	    </div>
    </div>
</div>


<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-md-10 mx-auto">
                <div class="card">
                    
                           @if(session('success'))
                            <div id="success-message" class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                            </div>

                            <script>
                                setTimeout(function() {
                                    let alertBox = document.getElementById('success-message');
                                    if (alertBox) {
                                        alertBox.style.display = 'none';
                                    }
                                }, 2000);
                            </script>
                        @endif
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title">District</h3>

                    </div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('geo.district') }}">
                            @csrf

                            <!-- Unit Name -->
                            <div class="mb-3">
                                <label for="unit_id" class="form-label required">Unit Name</label>
                                <select name="unit_id" id="unit_id" class="form-select" required>
                                    <option value="">-- Select Unit --</option>
                                    @foreach($units as $item)
                                        <option value="{{ $item->id }}" {{ (isset($selectedUnitId) && $selectedUnitId == $item->id) ? 'selected' : '' }}>
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- State Name -->
                            <div class="mb-3">
                                <label for="state_id" class="form-label required">State Name</label>
                                <select name="state_id" id="state_id" class="form-select" required>
                                    <option value="">-- Select State --</option>
                                    {{-- Add dynamic state options via JS or controller --}}
                                </select>
                            </div>

                            <!-- District Name -->
                            <div class="mb-3">
                                <label for="name" class="form-label required">District Name</label>
                                <input type="text" name="name" id="name" class="form-control" placeholder="Enter District Name" value="{{ old('name') }}" required>
                            </div>

                            <!-- Submit Button -->
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-check"></i> Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#unit_id').on('change', function () {
        let unitId = $(this).val();

        $('#stateId').empty().append('<option value="">Loading...</option>');

        if (unitId) {
            $.ajax({
                url: '/get-states/' + unitId,
                type: 'GET',
                success: function (states) {
                    $('#state_id').empty().append('<option value="">Select State</option>');
                    $.each(states, function (key, state) {
                        $('#state_id').append('<option value="' + state.id + '">' + state.name + '</option>');
                    });
                }
            });
        } else {
            $('#stateId').empty().append('<option value="">Select State</option>');
        }
    });
</script>


@endsection