@extends("components.layout.master")
@section('title', ' Cities')
@section('module-icon','fas fa-globe')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Master Configuration</a></li>
        <li class="breadcrumb-item active">@yield('title')</li>
    </ol>
@endsection
@section('content')
    <div class="page-content">

        <div class="container-fluid"> 
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
    
                            <div class="row">
                                <div class="col-lg-12">
                                    <button type="button" title="" id="addCityBtn"
                                            class="btn btn-success waves-effect waves-light float-right">
                                            <i class="fa fa-plus" aria-hidden="true"></i> Add New
                                    </button>
                                </div>
                            </div>
                            <br>
    
                            <table id="cityTable" class="table table-bordered dt-responsive nowrap text-center" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th>State Name</th>
                                        <th>City Name</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
    
                                <tbody>
                                    @foreach ($getAllCities as $singleCity)
                                        <tr data-id="{{ $singleCity->id }}">
                                            <td>{{ $singleCity->state->state_name }}</td>
                                            <td>{{ $singleCity->city_name }}</td>
                                            <td>
                                                @if($singleCity->active_status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @else
                                                    <span class="badge bg-danger">No</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button class="btn btn-purple btn-xs  editCityBtn " data-id="{{ $singleCity->id }}"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
    
                        </div>
                    </div>
                </div> 
            </div> 
    
            <!-- Start Add City Modal -->
            <div class="modal fade admin-query" id="stateModal">
                <div class="modal-dialog modal-dialog-centered small-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add City
                            </h4>
                            <button type="button" class="close dismissBtn" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="row mb-3">
                                <div class="col-lg-6">
                                    <div class="primary_input" id="stateDiv">
                                        <label class="primary_input_label" for="">State<span class="text-danger"> *</span></label>
                                        <select class="form-control" name="state" id="state">
                                            <option value="">Select State</option>
                                            @foreach($getAllStates as $singleState)
                                                <option value="{{$singleState->id}}">{{$singleState->state_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="primary_input" id="cityDiv">
                                        <label class="primary_input_label" for="">City Name<span class="text-danger"> *</span></label>
                                        <input class="form-control" type="text" onkeypress="onlyAlphabets(event)" name="city" id="city" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-40">
                                <div class="col-lg-12 text-center">
                                    <button class="btn btn-success waves-effect waves-light" type="submit" id="createButton">
                                        {!! BTN_SAVE !!}
                                    </button>
                                    <button class="btn btn-secondary btn-sm ml-2" type="reset" id="addCityResetBtn">
                                        <span class="ti-reload"></span> Reset
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Add City Modal -->

            <!-- Start Edit City Modal -->
            <div class="modal fade admin-query" id="editCityModal">
                <div class="modal-dialog modal-dialog-centered small-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Modify City
                            </h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="col-lg-12">
                                <div class="add-visitor">
                                    <div class="row mb-3">
                                        <div class="col-lg-12">
                                            <div class="primary_input" id="editStateDiv">
                                                <input type="hidden" name="city_id" id="city_id" autocomplete="off">
                                                <label class="primary_input_label" for="">Select State<span class="text-danger"> *</span></label>
                                                <select class="form-control primary_select" name="editState" id="editState">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-12 mt-2">
                                            <div class="primary_input" id="editCityDiv">
                                                <label class="primary_input_label" for="">City Name<span class="text-danger"> *</span></label>
                                                <input class="form-control" type="text" onkeypress="onlyAlphabets(event)" name="editCity" id="editCity" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-12 mt-2">
                                            <div class="primary_input" id="statusdropdown">
                                                <label class="primary_input_label" for="">Is Active ?<span class="text-danger"> *</span></label>
                                                <select name="active_status" class="form-control" id="active_status">

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-40">
                                        <div class="col-lg-12 text-center">
                                            <button class="btn btn-success btn-sm" type="submit" id="editCreateButton">
                                                <i class="fa fa-plus" aria-hidden="true"></i> Update
                                            </button>
                                            <button class="btn btn-secondary btn-sm ml-2" type="reset" id="editCityResetBtn">
                                                <span class="ti-reload"></span> Reset
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- End Edit City Modal -->
        </div>
        @include('components.footertext')
    </div>

@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {

        var url = $('#url').val();

        $('#stateModal').on('hide.bs.modal', function () {
                $('#state').val('');
                $('#city').val('');
                $('.error-message').remove();
        });
        $('#editCityModal').on('hide.bs.modal', function () {
                $('.error-message').remove();
        });
        $('#cityTable').DataTable();

        $('#addCityBtn').on('click', function () {
            $('#stateModal').modal('show');
        });

        $('#createButton').click(function() {
            var stateId = $('#state').val();
            var cityName = $('#city').val().trim();
            isValid = true;

            // Validate caste name
            if (stateId) {
                $('#stateDiv .error-message').remove();
            }else{
                if ($('#stateDiv .error-message').length === 0) {
                    $('#stateDiv').append('<p class="error-message text-danger">This field is mandatory.</p>');
                }
                isValid = false;
            }
            
            if(cityName != ''){
                $('#cityDiv .error-message').remove();
            }else{
                if ($('#cityDiv .error-message').length === 0) {
                    $('#cityDiv').append('<p class="error-message text-danger">This field is mandatory.</p>');
                }
                isValid = false;
            }

            if(isValid){
                showLoader();

                cityName = cityName.charAt(0).toUpperCase() + cityName.slice(1);
                $('#stateDiv .error-message').remove();
                // Send data to server using Ajax
                $.ajax({
                    method: 'post',
                    headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    data: { stateId: stateId, cityName:cityName },
                    dataType: "json",
                    url: '{{route('storeCity')}}', // Adjust the URL according to your Laravel route
                    success: function(response) {
                        hideLoader();
                        
                        if(response.success == true){
                            toastr.success("City added successfully!", "Success", { timeOut: 1000, onHidden: function() {
                                    window.location.reload();
                                }});
                        } else if(response.success == false && response.message == "This city is already exist in this state") {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                                timer: 2000, // Duration in milliseconds
                                timerProgressBar: true,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                                timer: 2000, // Duration in milliseconds
                                timerProgressBar: true,
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        console.error(xhr.responseText);
                        alert("Error saving data. Please try again.");
                    }
                });
            } 
        });

        $('#addCityResetBtn').on('click', function (e) {
            e.preventDefault();
            $('#state').val('');
            $('#city').val('');
            $('.error-message').remove();
        });

        $('.dismissBtn').on('click', function () {
            $('#state').val('');
            $('#city').val('');
        });
        
        // fetch edit modal data
        $('#cityTable').on('click','.editCityBtn', function () {
            showLoader();
            $('#editStateDiv .error-message').remove();
            var cityId = $(this).data('id');
            
            $.ajax({
                type: "POST",
                headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                },
                data: {cityId: cityId},
                dataType: "json",
                url:'{{route('fetchCityDetails')}}',
                success: function(response) {
                    hideLoader();
                    // console.log(response);
                    
                    if(response.success == true && response.data){
                        if(response.data.city){
                            $('#city_id').val(response.data.city.id);
                            $('#editState').val(response.data.city.state.id);
                            $('#editCity').val(response.data.city.city_name);

                            $("#active_status").find('option').remove();

                            $('#active_status').append(`
                                <option value="1" ${response.data.city.active_status == 1 ? 'selected' : ''}>Yes</option>
                                <option value="0" ${response.data.city.active_status == 0 ? 'selected' : ''}>No</option>
                            `);


                            if (response.data.getAllState) {
                                $('#editState').val('');
                                $('#editState').empty();

                                $.each(response.data.getAllState, function(j, state) {
                                    $("#editState").append(
                                        $("<option>", {
                                            value: state.id,
                                            text: state.state_name,
                                        })
                                    );
                                });
                                $("#editState option[value='" + response.data.city.state_id + "']").prop('selected', true);
                            }

                            $('#editCityModal').modal('show');
                        }
                    }
                    else{
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong',
                            timer: 2000, // Duration in milliseconds
                            timerProgressBar: true,
                            showConfirmButton: false
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Handle error
                    //console.error(xhr.responseText);
                }
            });
        });

        // update state script
        $('#editCreateButton').click(function() {
            var cityId = $('#city_id').val();
            var editStateId = $('#editState').val();
            var editCityName = $('#editCity').val();
            var activeStatus = $('#active_status').val();

            isValid = true;

            if (editStateId) {
                $('#editStateDiv .error-message').remove();
            }else{
                if ($('#editStateDiv .error-message').length === 0) {
                    $('#editStateDiv').append('<p class="error-message text-danger">This field is mandatory.</p>');
                }
                isValid = false;
            }
                
            if(editCityName){
                $('#editCityDiv .error-message').remove();
            }else{
                if ($('#editCityDiv .error-message').length === 0) {
                    $('#editCityDiv').append('<p class="error-message text-danger">This field is mandatory.</p>');
                }
                isValid = false;
            }
                
            if(isValid){
                editCityName = editCityName.charAt(0).toUpperCase() + editCityName.slice(1);

                showLoader();
                $('#editStateDiv .error-message').remove();

                // Send data to server using Ajax
                $.ajax({
                    method: 'post',
                    headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    data: { cityId: cityId, editStateId: editStateId, editCityName: editCityName, activeStatus: activeStatus },
                    dataType: "json",
                    url: '{{route('updateCity')}}', // Adjust the URL according to your Laravel route
                    success: function(response) {
                        hideLoader();
                        if(response.success == true){
                            toastr.success("City Updated successfully!", "Success", { timeOut: 1000, onHidden: function() {
                                    window.location.reload();
                                }});
                        } else if(response.message == "This city is already exist in this state" && response.success == false) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                                timer: 2000, // Duration in milliseconds
                                timerProgressBar: true,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                                timer: 2000, // Duration in milliseconds
                                timerProgressBar: true,
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        console.error(xhr.responseText);
                        alert("Error saving data. Please try again.");
                    }
                });
            } 
        });

        $('#editCityResetBtn').on('click', function (e) {
            e.preventDefault();
            $('#editState').val('');
            $('.error-message').remove();
        });

        $('input').on('keyup', function() {
                $(this).siblings('.error-message').remove();
            });
        $('input').on('change', function() {
            $(this).siblings('.error-message').remove();
        });
        $('select').on('change', function() {
               $(this).siblings('.error-message').remove();
            });
    });
</script>
@endpush