@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Add Claim'])

<div class="container w-95">
    <form action="{{ route('claim_save') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-header d-flex justify-content-between w-100">
                <h4>Claim</h4>
                <div class="d-flex">
                    <button class="btn btn-primary mr-2">Save</button>
                    <a href="{{ route('claim') }}" class="btn btn-secondary ms-2">Cancel</a>
                </div>
            </div>        
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-4 mt-4">
                        <label for="claim_name">Claim Name</label>
                        <input type="text" name="claim_name" id="claim_name" class="form-control @error('claim_name') is-invalid @enderror" value="{{ old('claim_name') }}">
                        @error('claim_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-4 mt-4">
                        <label for="category">Category</label>
                        <select name="category" id="category" class="form-select select2 @error('category') is-invalid @enderror">
                            <option value="">Select</option>
                            @foreach ($emp_status as $item)
                                <option value="{{ $item->id }}" {{ old('category') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                            @endforeach
                        </select>
                        @error('category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-4 mt-4">
                        <label for="age">Age</label>
                        <input type="number" name="age" id="age" class="form-control @error('age') is-invalid @enderror" value="{{ old('age') }}">
                        @error('age')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4 mt-4">
                        <label for="from_date">From Date</label>
                        <input type="date" name="from_date" id="from_date" class="form-control @error('from_date') is-invalid @enderror" value="{{ old('from_date') }}">
                        @error('from_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-4 mt-4">
                        <label for="to_date">To Date</label>
                        <input type="date" name="to_date" id="to_date" class="form-control @error('to_date') is-invalid @enderror" value="{{ old('to_date') }}">
                        @error('to_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-4 mt-4">
                        <label for="claim_amount">Claim Amount</label>
                        <input type="text" name="claim_amount" id="claim_amount" class="form-control @error('claim_amount') is-invalid @enderror" value="{{ old('claim_amount') }}">
                        @error('claim_amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mt-4">
                        <label for="state">State</label>
                        <select name="state" id="state" class="form-select select2 @error('state') is-invalid @enderror">
                            <option value="">Select</option>
                            @foreach ($state as $item)
                                <option value="{{ $item->id }}" {{ old('state') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                            @endforeach
                        </select>
                        @error('state')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-lg-4 mt-4">
                        <label for="district">District</label>
                        <select name="district" id="district" class="form-select select2 @error('district') is-invalid @enderror">
                            <option value="">Select</option>
                            <!-- Districts will be loaded dynamically here -->
                        </select>
                        @error('district')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        $('#state').on('change', function() {
            var stateId = $(this).val();
            if(stateId) {
                $.ajax({
                    url: '/districts',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',  
                        state_id: stateId         
                    },
                    success: function(data) {
                        var districtSelect = $('#district');
                        districtSelect.empty();
                        districtSelect.append('<option value="">Select</option>');
                        $.each(data, function(index, district) {
                            districtSelect.append('<option value="' + district.id + '">' + district.name + '</option>');
                        });
                        districtSelect.trigger('change');
                    },
                    error: function() {
                        alert('Could not retrieve districts');
                    }
                });
            } else {
                $('#district').empty().append('<option value="">Select</option>');
            }
        });
    });
</script>
    
@endpush