@extends('layouts.admin.admin')
@section('title', 'Create Area')
@section('content')
<main>
    <div class="container-fluid p-0">
        <div class="row g-0">
            @include('partials.header')
            @include('layouts.admin.sidebar')
            <section class="content-section col primary-bg-light p-xl-4 p-3">
                <div class="bg-white rounded-3 shadow-sm p-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="small fw-medium d-flex flex-wrap">Geography Management<span><i class="bi bi-chevron-right"></i></span>Area<span><i class="bi bi-chevron-right"></i></span>Add Area</div>
                            <hr class="mb-4">
                            <h5>Add Area</h5>
                            <form action="{{ route('area.store') }}" method="POST">
                                @csrf
                                <div class="row g-2 gy-3">
                                    <div class="col-md-4 col-sm-6">
                                        <label for="inputDivision" class="form-label fw-semibold">Division<span class="text-red">*</span></label>
                                        <select name="division_id" id="inputDivision" class="form-select shadow-none custom-select">
                                            <option value="" selected>Select Division</option>
                                            @foreach ($divisions as $division)
                                            <option   value="{{ $division->id }}" {{ old('division_id') == $division->id ? 'selected' : '' }}>{{ $division->name }}</option>     
                                           
                                            @endforeach
                                        </select>
                                        @error('division_id')
                                         <div class="col-12">
                                        <span class="text-danger">{{ $message }}</span>
                                        </div>     
                                            
                                        @enderror
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <label for="inputRegion" class="form-label fw-semibold">Region<span class="text-red">*</span></label>
                                        <select name="region_id" id="inputRegion" class="form-select shadow-none custom-select">
                                            <option value="" selected>Select Region</option>
                                        </select>
                                        @error('region_id')
                                         <div class="col-12">
                                        <span class="text-danger">{{ $message }}</span>
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <label for="inputAreaCode" class="form-label fw-semibold">Area Code<span class="text-red">*</span></label>
                                        <input type="text" class="form-control shadow-none" name="area_code" value="{{ old('area_code') }}" id="inputAreaCode" placeholder="Enter Area Code">
                                        @error('area_code')
                                         <div class="col-12">
                                        <span class="text-danger">{{ $message }}</span>
                                        </div>
                                            
                                        @enderror
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <label for="inputAreaName" class="form-label fw-semibold">Area Name<span class="text-red">*</span></label>
                                        <input type="text" class="form-control shadow-none" name="name" value="{{ old('name') }}" id="inputAreaName" placeholder="Enter Area Name..">
                                        @error('name')
                                         <div class="col-12">
                                        <span class="text-danger">{{ $message }}</span>
                                        </div>
                                            
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-type1 px-5 border-0 shadow-sm">Add Area</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</main>

{{-- GET REGIONS BY DIVISION --}}
<script>
document.getElementById('inputDivision').addEventListener('change', function () {
    let divisionId = this.value;

    // Clear current regions
    let regionSelect = document.getElementById('inputRegion');
    regionSelect.innerHTML = '<option value="">Select Region</option>';

    if (divisionId) {
        fetch(`/get-regions/${divisionId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(region => {
                    let option = document.createElement('option');
                    option.value = region.id;
                    option.text = region.name;
                    regionSelect.appendChild(option);
                });
            });
    }
});
</script>

@stop