@extends('layouts.admin.admin')
@section('title', 'Edit 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>Edit Area</div>
                            <hr class="mb-4">
                            <h5>Edit Area</h5>
                            <form action="{{route('area.update', $area->id)}}" method="POST">
                                @csrf
                                @method('PUT')
                                <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"  disabled>
                                            <option value="">Select Division</option>
                                            @foreach ($divisions as $division)
                                                <option value="{{ $division->id }}" {{ $area->region->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" disabled>
                                            <option value="">Select Region</option>
                                            @foreach ($regions as $region)
                                                <option value="{{ $region->id }}" {{ $area->region_id == $region->id ? 'selected' : '' }}>{{ $region->name }}</option>   
                                            @endforeach
                                        </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" id="inputAreaCode" name="area_code" value="{{old('area_code', $area->area_code) }}" placeholder="Enter Area Code"  disabled>
                                        @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" id="inputAreaName" placeholder="Enter Area Name.." name="name" value="{{old('name',$area->name) }}"  disabled>
                                        @error('name')
                                            <div class="col-12">
                                                <span class="text-danger">{{ $message }}</span>
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <button type="button" id="editBtn" class="btn btn-type1 px-5 border-0 shadow-sm">Edit</button>
                                        <button type="submit" id="updateBtn" class="btn btn-type1 px-5 border-0 shadow-sm d-none">Save</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