@extends("components.layout.master")
@section('title',' State')
@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 id="addStateBtn" type="button" 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="stateTable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>State Name</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($getAllStates as $singleState)
                                    <tr data-id="{{ $singleState->id }}">
                                        <td>{{ $singleState->state_name }}</td>
                                        <td>
                                            @if($singleState->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 editStateBtn" data-id="{{ $singleState->id }}"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->


        
            <!-- Start Add State 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 State
                            </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-12">
                                    <div class="primary_input" id="stateDiv">
                                        <label class="primary_input_label" for="">State Name<span class="text-danger"> *</span></label>
                                        <input class="form-control" type="text" onkeypress="onlyAlphabets(event)" name="state" id="state" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-40">
                                <div class="col-lg-12 text-center">
                                    
                                    <button id="createButton" type="submit" class="btn btn-success waves-effect waves-light">{!! BTN_SAVE !!}</button>
                                    <button class="btn btn-secondary btn-sm ml-2" type="reset" id="addStateResetBtn">
                                        <span class="ti-reload"></span> Reset
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Add State Modal -->
            <!-- Start Edit State Modal -->
            <div class="modal fade admin-query" id="editStateModal">
                <div class="modal-dialog modal-dialog-centered small-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Modify State
                            </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="state_id" id="state_id" autocomplete="off">
                                                <label class="primary_input_label" for="">State Name<span class="text-danger"> *</span></label>
                                                <input class="form-control" type="text" onkeypress="onlyAlphabets(event)" name="editState" id="editState" 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 State Modal -->
    </div><!-- container -->
    @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('');
                $('.error-message').remove();
            });

            $('#stateTable').DataTable();

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

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

                if(state != ''){
                    $('#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(isValid){
                    showLoader();

                    state = state.charAt(0).toUpperCase() + state.slice(1);
                    $('#stateDiv .error-message').remove();
                    // Send data to server using Ajax
                    $.ajax({
                        method: 'post',
                        
                        data: { state: state },
                        headers: {
                                'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                        },
                        dataType: "json",
                        // url: url + "/" + "storeState", // Adjust the URL according to your Laravel route
                        url: '{{route("storeState")}}',
                        success: function(response) {
                            hideLoader();
                           
                            if(response.success == true){
                                toastr.success("State created successfully!", "Success", { timeOut: 1000, onHidden: function() {
                                    window.location.reload();
                                }});
                            } else if(response.success == false && response.message == "This state is already exist") {
                                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.");
                        }
                    });
                } 
            });

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

            $('.dismissBtn').on('click', function () {
                $('#state').val('');
            });
            
            // fetch edit modal data
            $('#stateTable').on('click','.editStateBtn', function () {
                showLoader();
                $('#editStateDiv .error-message').remove();
                var stateId = $(this).data('id');
                $('#editStateModal').modal('show');
                $.ajax({
                    type: "POST",
                    headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    data: {stateId: stateId},
                    dataType: "json",
                    url: '/fetchStateDetails',
                    success: function(response) {
                        hideLoader();
                        if(response.success == true && response.data){
                            if(response.data){
                                $('#state_id').val(response.data.id);
                                $('#editState').val(response.data.state_name);
                                $("#active_status").find('option').remove();

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

                                // $('#active_status').niceSelect('update');
                                // $('#editStateModal').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 stateId = $('#state_id').val();
                var editStateName = $('#editState').val();
                var activeStatus = $('#active_status').val();

                isValid = true;

                // Validate state name
                if (editStateName) {
                    $('#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(isValid){
                    editStateName = editStateName.charAt(0).toUpperCase() + editStateName.slice(1);

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

                    // Send data to server using Ajax
                    $.ajax({
                        method: 'post',
                        data: { stateId: stateId, editStateName: editStateName, activeStatus: activeStatus },
                        dataType: "json",
                        // url: url + "/" + "",
                        url: '{{route('updateState')}}',
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                        }, // Adjust the URL according to your Laravel route
                        success: function(response) {
                            hideLoader();
                            if(response.success == true){
                                toastr.success("State updated successfully!", "Success", { timeOut: 1000, onHidden: function() {
                                    window.location.reload();
                                }});
                            } else if(response.message == "This state is already exist" && 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();
            });

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