@extends('admin.layouts.app')

@section('title', 'Area')

@section('content')
<x-admin.page-header title="List Of Area" breadcrumb="Masters / Locations / Area">
    <x-slot:actions>
        <button type="button" class="btn nb-btn-primary" data-toggle="modal" data-target="#modals-default" id="add_button">
            <i class="fas fa-plus me-1"></i> Add More
        </button>
    </x-slot:actions>
</x-admin.page-header>

<div class="modal fade insert_frm" id="modals-default">
    <div class="modal-dialog">
        <form class="modal-content" id="validation-form" method="POST" action="{{ route('admin.masters.areas.store') }}" autocomplete="off">
            @csrf
            <input type="hidden" name="_method" id="form_method" value="POST">
            <input type="hidden" name="id" id="id" value="">

            <div class="modal-header">
                <h5 class="modal-title">Add <span class="font-weight-light">Area</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">State <span class="text-danger">*</span></label>
                        <select class="form-control" id="StateId" name="StateId" required>
                            <option selected disabled value="">Select State</option>
                            @foreach ($states as $state)
                                <option value="{{ $state->id }}">{{ $state->Name }}</option>
                            @endforeach
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">City <span class="text-danger">*</span></label>
                        <select class="form-control" id="CityId" name="CityId" required>
                            <option selected disabled value="">Select City</option>
                            @foreach ($cities as $city)
                                <option value="{{ $city->id }}" data-state-id="{{ $city->StateId }}">{{ $city->Name }}</option>
                            @endforeach
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Zone <span class="text-danger">*</span></label>
                        <select class="form-control" id="ZoneId" name="ZoneId" required>
                            <option selected disabled value="">Select Zone</option>
                            @foreach ($zones as $zone)
                                <option value="{{ $zone->id }}" data-city-id="{{ $zone->CityId }}">{{ $zone->Name }}</option>
                            @endforeach
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Ward No <span class="text-danger">*</span></label>
                        <select class="form-control" id="WardId" name="WardId" required>
                            <option selected disabled value="">Select Ward No</option>
                            @foreach ($wards as $ward)
                                <option value="{{ $ward->id }}" data-zone-id="{{ $ward->ZoneId }}">{{ $ward->Name }}</option>
                            @endforeach
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Area Name <span class="text-danger">*</span></label>
                        <input type="text" name="Name" class="form-control" id="Name" placeholder="Area Name" required>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-control" id="Status" name="Status" required>
                            <option value="1" selected>Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger" id="submit" name="submit">Submit</button>
            </div>
        </form>
    </div>
</div>

<div class="card nb-table-card">
    <div class="card-datatable">
        <table id="areas-table" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Country</th>
                    <th>State</th>
                    <th>City</th>
                    <th>Zone</th>
                    <th>Ward No</th>
                    <th>Area</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($areas as $index => $area)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $area->country?->Name }}</td>
                        <td>{{ $area->state?->Name }}</td>
                        <td>{{ $area->city?->Name }}</td>
                        <td>{{ $area->zone?->Name }}</td>
                        <td>{{ $area->ward?->Name }}</td>
                        <td>{{ $area->Name }}</td>
                        <td>
                            <x-admin.status-badge :active="(int) $area->Status === 1" />
                        </td>
                        <td>
                            <div class="nb-actions">
                                <a href="javascript:void(0);" class="nb-action-btn update" data-id="{{ $area->id }}" data-toggle="tooltip" title="Edit">
                                    <i class="fas fa-pen"></i>
                                </a>
                                <form method="POST" action="{{ route('admin.masters.areas.destroy', $area) }}" class="d-inline delete-form" onsubmit="return confirm('Are you sure you want to delete this Area?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="nb-action-btn danger delete" title="Delete" data-toggle="tooltip">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
var allCityOptions = $('#CityId').html();
var allZoneOptions = $('#ZoneId').html();
var allWardOptions = $('#WardId').html();

function filterCities(stateId, selectedCityId) {
    var $city = $('#CityId');
    $city.html('<option selected disabled value="">Select City</option>');
    $(allCityOptions).filter('option[data-state-id]').each(function () {
        if (String($(this).data('state-id')) === String(stateId)) {
            $city.append($(this).clone());
        }
    });
    if (selectedCityId) {
        $city.val(String(selectedCityId));
    }
}

function filterZones(cityId, selectedZoneId) {
    var $zone = $('#ZoneId');
    $zone.html('<option selected disabled value="">Select Zone</option>');
    $(allZoneOptions).filter('option[data-city-id]').each(function () {
        if (String($(this).data('city-id')) === String(cityId)) {
            $zone.append($(this).clone());
        }
    });
    if (selectedZoneId) {
        $zone.val(String(selectedZoneId));
    }
}

function filterWards(zoneId, selectedWardId) {
    var $ward = $('#WardId');
    $ward.html('<option selected disabled value="">Select Ward No</option>');
    $(allWardOptions).filter('option[data-zone-id]').each(function () {
        if (String($(this).data('zone-id')) === String(zoneId)) {
            $ward.append($(this).clone());
        }
    });
    if (selectedWardId) {
        $ward.val(String(selectedWardId));
    }
}

$(document).ready(function () {
    $('#areas-table').DataTable();

    $('#StateId').on('change', function () {
        filterCities($(this).val(), null);
        filterZones('', null);
        filterWards('', null);
    });

    $('#CityId').on('change', function () {
        filterZones($(this).val(), null);
        filterWards('', null);
    });

    $('#ZoneId').on('change', function () {
        filterWards($(this).val(), null);
    });

    $('#add_button').on('click', function () {
        $('.modal-title').html("Add <span class='font-weight-light'>Area</span>");
        $('#validation-form').attr('action', @json(route('admin.masters.areas.store')));
        $('#form_method').val('POST');
        $('#id').val('');
        $('#Name').val('');
        $('#Status').val(1);
        $('#StateId').val('');
        filterCities('', null);
        filterZones('', null);
        filterWards('', null);
        $('#submit').text('Submit');
    });

    $(document).on('click', '.update', function (event) {
        event.preventDefault();
        var id = $(this).data('id');
        $.ajax({
            url: @json(url('admin/masters/areas')) + '/' + id,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#StateId').val(data.StateId);
                filterCities(data.StateId, data.CityId);
                filterZones(data.CityId, data.ZoneId);
                filterWards(data.ZoneId, data.WardId);
                $('#Name').val(data.Name);
                $('#Status').val(data.Status);
                $('#id').val(id);
                $('#validation-form').attr('action', @json(url('admin/masters/areas')) + '/' + id);
                $('#form_method').val('PUT');
                $('#submit').text('Update');
                $('.modal-title').html("Update <span class='font-weight-light'>Area</span>");
                $('.insert_frm').modal('show');
            }
        });
    });
});
</script>
@endpush