@extends('layouts.app')
@section('title', 'Comparison')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card" style="border:none;box-shadow: 10px 0px 20px rgb(31 30 47 / 5%);border-radius:15px;">
                <div class="card-body p-1 m-1">
                    <div class="row">
                        <form method="POST" role="form" name="agencycompdetails_form" id="agencycompdetails_form" data-parsley-validate="">
                            @csrf
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="example-firstname-input" class="col-form-label"> <strong> State </strong> <span class="text-danger"> * </span></label>
                                        <select required name="state_comp_id" id="state_comp_id" class="form-select state_comp_id">
                                            <option value="" selected disabled>Select State</option>
                                            @foreach($state as $state_data)
                                                <option value="{{ $state_data->id }}" selected>{{ $state_data->state_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="example-firstname-input" class="col-form-label"> <strong> County </strong> <span class="text-danger"> * </span></label>
                                                                                            <select required name="county_comp_id" id="county_comp_id" class="form-select county_comp_id">
                                                        <option value="" selected disabled>Select State First</option>
                                                    </select>
                                                                                    </div>
                                </div>
                                <div class="col m-auto">
                                    <button type="submit" class="btn submit-button mt-2" form="agencycompdetails_form" onclick="view_comparisonDetails();"> Submit </button>
                                </div>
                            </div>
                        </form>
                        <div class="displayData d-none">
                            <button class="btn btn-sm btn-success fw-bold save_all_agencies d-none" style="cursor:pointer;color:#FFFFFF;margin-top:8px;margin-left:-3px;" onclick="save_all_agencies();">Save and Update</button>
                            <table id="agency_comparison_dt_details" class="table table-bordered nowrap table-striped" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="thead-light">
                                    <tr>
                                        <th><input type="checkbox" name="" id="check_all_agencies" class="check_all_agencies"></th>
                                        <th>SI.No.</th>
                                        <th>Agency Name</th>
                                        <th>Agency Code</th>
                                        <th>Old Mailing Address</th>
                                        <th>New Mailing Address</th>
                                        <th>Old Physical Address</th>
                                        <th>New Physical Address</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                    </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page_css')
<!-- Custom In Page CSS -->
@endsection

@section('page_script')
<!-- Custom In Page Javascript -->
<script>
    $(function() {
        $('#agency_comparison_dt_details').DataTable({
            dom: '<"mt-2"<"row"<"col-md-6"l><"col-md-6"<"float-end"f>>><"mb-1"<t>><"row"<"col"i><"col"p>>>',
            "lengthMenu": [[1000, 500, 100, 50, 25, 10], [1000, 500, 100, 50, 25, 10]],
            scrollX: true,
        });

        $('#state_comp_id').on('change', function() {
            var stateCompID = $(this).val();
            if (stateCompID) {
                $.ajax({
                    url: '/stateCounty/' + stateCompID,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('#county_comp_id').empty();
                        if (data == '')
                        {
                            $('#county_comp_id').append('<option value=""> County Unavailable </option>');
                        } else {
                            $('#county_comp_id').append('<option value="" selected disabled> Select County </option>');
                            $('#county_comp_id').append('<option value="All">All</option>');
                            $.each(data, function(key, value) {
                                $('#county_comp_id').append(
                                    '<option value="' + value['id'] + '">' + value[
                                        'county_name'] + '</option>');
                            });
                        }
                    }
                });
            } else {
                $('#county_comp_id').empty();
            }
        });

        $('#check_all_agencies').on('click', function() {
            if ($(this).is(":checked", true)) { // Checking
                $('.checkData').addClass("checked");
                $('.checkData').prop('checked', true);
                $('.save_all_agencies').removeClass('d-none');
            } else { // Un-checking
                $('.checkData').removeClass("checked");
                $('.checkData').prop('checked', false);
                $('.save_all_agencies').addClass('d-none');
            }
        });
    });

    function save_all_agencies() {
        var checkboxData = new Array();
        $("input[class='checkData checked']:checked").each(function() {
            checkboxData.push($(this).val());
        });
        var loader = $('#ajaxloader');
        Swal.fire({
            title: "Are you sure",
            text: "You want to update Old Mailing and Physical",
            icon: 'warning',
            confirmButtonColor: '#7680ff',
            cancelButtonColor: '#ef4d56',
            confirmButtonText: 'Ok',
            cancelButtonText: 'Cancel',
            showConfirmButton: true,
            showCancelButton: true
        }).then(function(result) {
            if (result.value) {
                $('.loader_text').text('Updating Old Mailing and Physical...');
                loader.show();
                setTimeout(function(){
                    $.ajax({
                        type: "POST",
                        url: "{{ route('applymailingandphysicaladdress') }}",
                        data: {
                            "_token": "{!! csrf_token() !!}",
                            "checkboxData": checkboxData,
                        },
                        success: function(response) {
                            loader.hide();
                            var result = response.split('@#!');
                            Swal.fire({
                                position: 'middle',
                                icon: result[1],
                                title: result[2],
                                showConfirmButton: false,
                                timer: 1000
                            });
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }
                    });
                },1000);
            } else {
                
            }
        });
    }

    function check_agency_details(agencyId) {
        var checkboxData = new Array();
        if($("#checked_" + agencyId).hasClass("checked")) {
            $("#checked_" + agencyId).removeClass("checked");
        } else {
            $("#checked_" + agencyId).addClass("checked");
        }
        $("input[class='checkData checked']:checked").each(function() {
            checkboxData.push($(this).val());
        });
        var checkboxLength = checkboxData.length;
        if(checkboxLength >= 1) {
            $('.save_all_agencies').removeClass('d-none');
        } else if(checkboxLength == 0) {
            $('.save_all_agencies').addClass('d-none');
        }
    }

    function view_comparisonDetails(e) {
        if ($("#agencycompdetails_form").parsley()) {
            if ($("#agencycompdetails_form").parsley().validate()) {
                event.preventDefault();
                if ($("#agencycompdetails_form").parsley().isValid()) {
                    var stateId = $('#state_comp_id').val();
                    var countyId = $('#county_comp_id').val();
                    $.ajax({
                        url: "fetch_comparison_details/" + stateId + "/" + countyId,
                        success: function(data) {
                            location.reload();
                        }
                    });
                }
            }
        }
    }
</script>
@endsection