@extends('admin.layouts.master')

@section('title', 'Manage Upazila')

@section('content')
    <div class="row">
        
        {{-- ====================== --}}
        {{--    UPZILA MODAL        --}}
        {{-- ====================== --}}
        <div class="modal fade" id="upazilaModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <form id="upazilaForm" method="POST">
                    @csrf
                    <input type="hidden" name="_method" id="formMethod" value="POST">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalTitle">Add Upazila</h5>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <div class="modal-body">
                            <div class="row">

                                <div class="col-md-6 form-group">
                                    <label>Select Division</label>
                                    <select name="division_id" id="modalDivisionId" class="form-control"
                                        onchange="getSelectedData(this)">
                                        <option value="" disabled selected>Select Division</option>
                                        @foreach ($divisions as $division)
                                            <option value="{{ $division->id }}">{{ $division->name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger" id="divisionError"></span>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>Select City</label>
                                    <select name="city_id" id="modalCityId" class="form-control">
                                        <option value="" disabled selected>Select City</option>
                                    </select>
                                    <span class="text-danger" id="cityError"></span>
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>Name</label>
                                    <input type="text" name="name" id="modalName" class="form-control">
                                    <span class="text-danger" id="nameError"></span>
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>English Name</label>
                                    <input type="text" name="en_name" id="modalEnName" class="form-control">
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>Code</label>
                                    <input type="text" name="code" id="modalCode" class="form-control">
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>Population</label>
                                    <input type="text" name="population" id="modalPopulation" class="form-control">
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>Unions</label>
                                    <input type="text" name="unions" id="modalUnions" class="form-control">
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>History</label>
                                    <input type="text" name="history" id="modalHistory" class="form-control">
                                </div>

                                <div class="col-md-12 form-group">
                                    <label>Stream Link</label>
                                    <input type="text" name="stream_link" id="modalStreamLink" class="form-control">
                                </div>

                            </div>
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-success" type="submit">Save</button>
                            <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>

        {{-- ====================== --}}
        {{--    FORM AND TABLE      --}}
        {{-- ====================== --}}
        <div class="col-lg-12">
            <div class="card mt-3">
                <div class="card-header  justify-content-between align-items-center">
                    <h3 class="mb-0 float-left">All Upazilas</h3>
                    <button class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#upazilaModal"
                        onclick="openCreateModal()">
                        <i class="fa fa-plus"></i> Add Upazila
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Division</th>
                                    <th>City</th>
                                    <th>Name</th>
                                    <th>En Name</th>
                                    <th>Code</th>
                                    <th>Population</th>
                                    <th>Unions</th>
                                    <th>History</th>
                                    <th>Stream Link</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($upazilas as $info)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $info->division->name ?? null }}</td>
                                        <td>{{ $info->city->name ?? null }}</td>
                                        <td>{{ $info->name }}</td>
                                        <td>{{ $info->en_name ?? '---' }}</td>
                                        <td>{{ $info->code }}</td>
                                        <td>{{ $info->population }}</td>
                                        <td>{{ $info->unions }}</td>
                                        <td>{{ $info->history }}</td>
                                        <td>{{ $info->stream_link }}</td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"
                                                    id="actionMenu{{ $info->id }}" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                    Actions
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="actionMenu{{ $info->id }}">
                                                    <button class="dropdown-item edit-btn" data-id="{{ $info->id }}"
                                                        data-division_id="{{ $info->division_id }}"
                                                        data-city_id="{{ $info->city_id }}"
                                                        data-name="{{ $info->name }}"
                                                        data-en_name="{{ $info->en_name }}"
                                                        data-code="{{ $info->code }}"
                                                        data-population="{{ $info->population }}"
                                                        data-unions="{{ $info->unions }}"
                                                        data-history="{{ $info->history }}"
                                                        data-stream_link="{{ $info->stream_link }}" data-toggle="modal"
                                                        data-target="#upazilaModal">
                                                        <i class="fa fa-edit"></i> Edit
                                                    </button>
                                                    <div class="dropdown-divider"></div>
                                                    @include('admin.partial.delete-form', [
                                                        'route' => route('upazila.destroy', [
                                                            'upazila' => $info->id,
                                                        ]),
                                                        'btn_class' => 'dropdown-item text-danger',
                                                    ])
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="text-center text-danger">No Upazilas Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    @include('admin.partial.datatable-script')

    <script>
        function openCreateModal() {
            $("#modalTitle").text("Add Upazila");
            $("#upazilaForm").attr("action", "{{ route('upazila.store') }}");
            $("#formMethod").val("POST");

            $("#modalDivisionId").val('');
            $("#modalCityId").html('<option value="" disabled selected>Select City</option>');
            $("#modalName").val('');
            $("#modalEnName").val('');
            $("#modalCode").val('');
            $("#modalPopulation").val('');
            $("#modalUnions").val('');
            $("#modalHistory").val('');
            $("#modalStreamLink").val('');
        }

        // Edit Modal using data attributes
        $(document).on('click', '.edit-btn', function() {
            var id = $(this).data('id');
            $("#modalTitle").text("Edit Upazila");
            $("#upazilaForm").attr("action", "/upazila/" + id);
            $("#formMethod").val("PUT");

            $("#modalDivisionId").val($(this).data('division_id'));
            getSelectedData($("#modalDivisionId"), $(this).data('city_id')); // Load cities with selected city
            $("#modalName").val($(this).data('name'));
            $("#modalEnName").val($(this).data('en_name'));
            $("#modalCode").val($(this).data('code'));
            $("#modalPopulation").val($(this).data('population'));
            $("#modalUnions").val($(this).data('unions'));
            $("#modalHistory").val($(this).data('history'));
            $("#modalStreamLink").val($(this).data('stream_link'));

            $("#upazilaModal").modal('show');
        });

        // Fetch cities for selected division
        function getSelectedData(selectElem, selectedCity = null) {
            var selectedDivisionId = $(selectElem).val();
            var cities = $("#modalCityId");
            cities.html('<option value="" disabled>Select City</option>');

            $.ajax({
                url: window.location.href + '?div=' + selectedDivisionId,
                method: 'get',
                success: function(response) {
                    $.each(response, function(index, city) {
                        var option = $('<option>', {
                            value: city.id,
                            text: city.name
                        });
                        if (selectedCity && city.id == selectedCity) option.attr('selected',
                        'selected');
                        cities.append(option);
                    });
                }
            });
        }
    </script>
@endsection