@extends('layouts.main')
@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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 -->
                    <div class="page-pretitle">
                    Geographical
                    </div>
                    <h2 class="page-title">
                        ADD - Block
                    </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="{{asset('geo/blocks')}}" class="btn btn-primary btn-5 d-none d-sm-inline-block" data-bs-toggle="modal">
	                            <!-- 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>
                                Block Report
                            </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-12">
                    @if (session('success'))
                        <div id="success-message" class="alert alert-success">
                            {{ session('success') }}
                        </div>    
                        <script>
                            setTimeout(function() {
                                document.getElementById('success-message').style.display = 'none';
                            }, 5000);
                        </script>
                    @endif
                        
                    <form method="POST" action="{{ route('block.store') }}">
                        @csrf
                        <div class="card-header">
                        
                        </div>

                        <div class="card-body">                                    
                                    <div class="mb-3">
                                        <label class="form-label required">UNIT NAME</label>
                                        <div>
                                        <select id="unit_id" name="unit_id" class="form-control">
                                        <option value="">--Select Unit--</option>
                                            @foreach($units as $unit)
                                                <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                            @endforeach
                                        </select>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label required">STATE NAME</label>
                                        <div>
                                        <select id="state_id" name="state_id" class="form-control">
                                            <option value="">--Select State--</option>
                                        </select>
                                        </div>
                                    </div>
                                <div class="mb-3">
                                    <label class="form-label required" for="unit_id">DISTRICT NAME</label>
                                    <select name="district_id" id="district_id" class="form-control" required>
                                            <option value="">--Select District-</option>
                                    </select>
                                </div>

                                    <div class="mb-3">
                                        <label class="form-label required">BLOCK NAME</label>
                                        <div>
                                            <input type="text" name="name" class="form-control" placeholder="Enter Block Name">
                                           
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="card-footer text-end">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            
                        </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();

        $('#state_id').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>

<script>
    $(document).ready(function() {
        $('#state_id').change(function() {
            var stateId = $(this).val();
            
            if (stateId) {
                $.ajax({
                    url: '/geo/get-districts/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#district_id').empty().append('<option value="">--Select District--</option>');
                        $.each(data, function(key, district) {
                            $('#district_id').append('<option value="'+ district.id +'">'+ district.name +'</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log("AJAX Error:", error);
                    }
                });
            } else {
                $('#district_id').empty().append('<option value="">--Select District--</option>');
            }
        });
    });
</script>



@endsection