@extends('admin.layouts.master')

@section('title', 'Manage Prothinidhi Teams')

@section('content')
    <style>
        .modal-body {
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-height: 80vh;
            /* Optional: limit modal height */
            overflow-y: auto;
            /* Optional: add scroll if content overflows */
        }

        section {
            padding: 120px 0;
            overflow: hidden;
            background: #fff;
        }

        .mb-2-3,
        .my-2-3 {
            margin-bottom: 2.3rem;
        }

        .section-title {
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 10px;
            position: relative;
            display: inline-block;
        }

        .text-primary {
            color: #ceaa4d !important;
        }

        .text-secondary {
            color: #15395A !important;
        }

        .font-weight-600 {
            font-weight: 600;
        }

        .display-26 {
            font-size: 1.3rem;
        }

        @media screen and (min-width: 992px) {
            .p-lg-7 {
                padding: 4rem;
            }
        }

        @media screen and (min-width: 768px) {
            .p-md-6 {
                padding: 3.5rem;
            }
        }

        @media screen and (min-width: 576px) {
            .p-sm-2-3 {
                padding: 2.3rem;
            }
        }

        .p-1-9 {
            padding: 1.9rem;
        }

        .bg-secondary {
            background: #15395A !important;
        }

        @media screen and (min-width: 576px) {

            .pe-sm-6,
            .px-sm-6 {
                padding-right: 3.5rem;
            }
        }

        @media screen and (min-width: 576px) {

            .ps-sm-6,
            .px-sm-6 {
                padding-left: 3.5rem;
            }
        }

        .pe-1-9,
        .px-1-9 {
            padding-right: 1.9rem;
        }

        .ps-1-9,
        .px-1-9 {
            padding-left: 1.9rem;
        }

        .pb-1-9,
        .py-1-9 {
            padding-bottom: 1.9rem;
        }

        .pt-1-9,
        .py-1-9 {
            padding-top: 1.9rem;
        }

        .mb-1-9,
        .my-1-9 {
            margin-bottom: 1.9rem;
        }

        @media (min-width: 992px) {
            .d-lg-inline-block {
                display: inline-block !important;
            }
        }

        .rounded {
            border-radius: 0.25rem !important;
        }
    </style>
    <div class="card">
        <div class="card-header">
            <span> <strong>Protinidhi List</strong></span>
            <a href="{{ route('prothinidhis.create') }}" class="btn btn-info text-white " style="float: right"> <i
                    class="fa fa-plus-circle"></i> Add New</a>

        </div>
        <div class="">
            <div style="float: right">
                <label>বিভাগ :
                    <select class="form-control form-control-sm" id="division">
                        <option selected disabled> বিভাগ</option>
                        @forelse ($divisions as $info)
                            <option value="{{ $info->id }}"> {{ $info->name }}</option>
                        @empty
                        @endforelse
                    </select>
                </label>
                <label>জেলা :
                    <select class="form-control form-control-sm" id="city">
                        <option selected disabled> জেলা </option>
                        @forelse (cities() as $info)
                            <option value="{{ $info->id }}"> {{ $info->name }}</option>
                        @empty
                        @endforelse
                    </select>
                </label>
                <label>উপজেলা:
                    <select class="form-control form-control-sm" id="upazila">
                        <option selected disabled>উপজেলা</option>
                        @forelse (upazillas() as $info)
                            <option value="{{ $info->id }}"> {{ $info->name }}</option>
                        @empty
                        @endforelse
                    </select>
                </label>
                <label>সার্চ করুন :
                    <input type="search" id="search" class="form-control form-control-sm" placeholder="সার্চ করুন "
                        aria-controls="example1">
                </label>
            </div>

        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover text-nowrap table-bordered">
                    <thead>

                        <tr>
                            <th scope="col">S.No</th>
                            <th scope="col">Image</th>
                            <th scope="col">Name | Email</th>
                            <th scope="col">Phone</th>
                            <th scope="col">Status</th>
                            <th scope="col">Division</th>
                            <th scope="col">zilla</th>
                            <th scope="col">Upazila</th>
                            <th scope="col">Area</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="load-protindhi">
                        @include('admin.protinidhi.list')
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    {{-- loader --}}
    <div id="loader"
        style="display: none; position: fixed; top: 60%; left: 57%; transform: translate(-50%, -50%); z-index: 9999;opacity:unset">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <style>
        .loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            /* Semi-transparent background */
            display: flex;
            /* Default hidden, set in inline style as 'display: none' */
            justify-content: center;
            align-items: center;
            z-index: 9999;
            /* Ensure it appears on top of other elements */
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
            border-width: 0.3rem;
            /* Thickness of the spinner */
        }
    </style>

@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        function confirmDelete(event) {
            // Show confirmation dialog
            const userConfirmed = confirm("Are you sure you want to delete this?");

            if (!userConfirmed) {
                // Prevent the form from being submitted
                event.preventDefault();
                return false;
            }
            // Allow the form to be submitted if the user confirms
            return true;
        }
        $('.status').on('click', function() {
            var id = $(this).data('id')
            $.ajax({
                url: "{{ route('prothinidhis.index') }}?action=" + 'change-status' + "&id=" +
                    id,
                method: 'GET',
                success: function(response) {
                    location.reload();
                }
            });
        })

        $('#division').on('change', function() {
            var division_id = $('#division').val()
            $('#city').html('<option selected disabled>জেলা</option>')
            $('#upazila').html('<option selected disabled>উপজেলা</option>')
            fetchData('division', division_id, null, null, null)
        })

        $('#city').on('change', function() {
            var city_id = $('#city').val()
            var division_id = $('#division').val()
            fetchData('city', division_id, city_id, null, null)
        })

        $('#upazila').on('change', function() {
            var city_id = $('#city').val()
            var division_id = $('#division').val()
            var upazila_id = $('#upazila').val()
            fetchData('upazila', division_id, city_id, upazila_id, null)
        })

        $('#search').on('keyup', function() {
            var search = $('#search').val()
            fetchData('search', null, null, null, search)
        })

        function fetchData(type = null, division_id = null, city_id = null, upazila_id = null, search = null) {
            $.ajax({
                url: "{{ route('prothinidhis.index') }}?division_id=" + division_id + "&city_id=" +
                    city_id + "&upazila_id=" + upazila_id +
                    "&searchText=" + search,
                method: 'GET',
                beforeSend: function() {
                    // Show the loader (set to 'flex' for visibility)
                    $('#loader').css('display', 'flex');
                },
                success: function(response) {
                    // Update the content dynamically based on the response
                    $('.load-protindhi').html(response.users); // Update table body
                    if (type == 'division') {
                        $('#city').html(response.cities); // Update cities
                    }
                    $('#upazila').html(response.upazila); // Update upazilas
                },
                complete: function() {
                    // Hide the loader (set to 'none' to make it invisible)
                    $('#loader').css('display', 'none');
                }
            });
        }



    })
</script>