@extends('layouts.app')
@section('title', 'State Specific')
@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">
                        <table id="agency_specific_dt_details" class="table table-bordered nowrap table-striped" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead class="thead-light">
                                <tr>
                                    <th>SI.No.</th>
                                    <th>State Name</th>
                                    <th>Short Code</th>
                                    <th>Current Tax Year</th>
                                    <th>Current Delinquent Year</th>
                                    <th>Tax Cycle Start Month</th>
                                    <th>Same Across County</th>
                                    <th>Tax Paid In Arrears</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal - Update State Details -->
<div id="myModal_state_update" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Update State Details</h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="border:none;background-color:#3B8C3D;color:white;font-size:15px;">
                    <span aria-hidden="true">X</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ route('updateStateDetails') }}" method="POST" role="form" name="state_update_form" id="state_update_form">
                    @csrf
                    <input type="hidden" name="state_id" id="state_id" />
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label"><strong>State Name</strong>
                                    <span class="text-danger"> * </span></label>
                                <input required type="text" name="state_name" id="state_name" class="form-control state_name" value=""
                                    autocomplete="off" placeholder="Enter State Name" data-parsley-length="[0, 30]" disabled>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label"><strong>Short Code</strong>
                                    <span class="text-danger"> * </span></label>
                                <input required type="text" name="short_code" id="short_code" class="form-control" value=""
                                    autocomplete="off" placeholder="Enter Short Code" data-parsley-length="[0, 30]" disabled>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label"><strong>Current Tax Year</strong>
                                    <span class="text-danger"> * </span></label>
                                <input required type="text" name="current_tax_year" id="current_tax_year" class="form-control" value="" onkeypress="return isNumber(event)"
                                    autocomplete="off" placeholder="Enter Current Tax Year" data-parsley-type="number" data-parsley-minlength="4" data-parsley-maxlength="4" data-parsley-minlength-message="This value is too short. It should have 4 characters">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label"><strong>Current Delinquent Year
                                    <span class="text-danger"> * </span></strong>
                                    </label>
                                <input required type="text" name="current_delinquent_year" id="current_delinquent_year" class="form-control" value="" onkeypress="return isNumber(event)"
                                    autocomplete="off" placeholder="Enter Current Tax Year" data-parsley-type="number" data-parsley-minlength="4" data-parsley-maxlength="4" data-parsley-minlength-message="This value is too short. It should have 4 characters">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label"><strong>Tax Cycle Start Month</strong>  <span class="text-danger"> * </span></label>
                                <select required class="form-select tax_cycle_start_month" name="tax_cycle_start_month" id="tax_cycle_start_month">
                                    <option value="" selected disabled>Select Tax Cycle Start Month</option>
                                    <option value="1">January</option>
                                    <option value="2">February</option>
                                    <option value="3">March</option>
                                    <option value="4">April</option>
                                    <option value="5">May</option>
                                    <option value="6">June</option>
                                    <option value="7">July</option>
                                    <option value="8">August</option>
                                    <option value="9">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 mt-4">
                            <div class="form-group">
                                <input class="state_same_across" name="state_same_across" id="state_same_across" type="checkbox" checked data-toggle="toggle"
                                    data-on="Yes" data-off="No">
                                <label for="example-is_available-input" class="col-form-label"><strong>Same across county?</strong></label>
                            </div>
                        </div>
                        <div class="col-md-3 mt-4">
                            <div class="form-group">
                                <input class="is_assessment_year" name="is_assessment_year" id="is_assessment_year" type="checkbox" checked data-toggle="toggle" data-on="Yes" data-off="No">
                                <label for="example-is_available-input" class="col-form-label"><strong>Tax Paid In Arrears?</strong></label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="justify-content:center;">
                <button type="button" class="btn cancel-button" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary-custom text-white" form="state_update_form"> Update </button>
            </div>
        </div>
    </div>
</div>
@endsection

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

@section('page_script')
<!-- Custom In Page Javascript -->
<script>
    $(function() {
        $('#agency_specific_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>>>',
            scrollX: true,
        });

        $('#state_update_form').submit(function(e) {
            e.preventDefault()
            if ($("#state_update_form").parsley()) {
                if ($("#state_update_form").parsley().validate()) {
                    if ($("#state_update_form").parsley().isValid()) {
                        var response = Ajax('post', '/update_state_details', $("#state_update_form").serialize());
                        if (response) {
                            $("#myModal_state_update").modal('hide');
                            var result = response.split('@#!');
                            Swal.fire({
                                position: 'middle',
                                icon: result[1],
                                title: result[2],
                                showConfirmButton: false,
                                timer: 1000
                            });
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }
                    }
                }
            }
        });
    });

    function edit_state_details(stateId) {
        $('#state_update_form').parsley().reset();
        document.getElementById("state_update_form").reset();
        var updateStateModal = new bootstrap.Modal(document.getElementById('myModal_state_update'), {
            backdrop: 'static',
            keyboard: false
        });
        $("#myModal_state_update").appendTo("body").modal('show');
        $.ajax({
            url: "/edit_state_details/" + stateId,
            dataType: "json",
            success: function(data) {
                $('#state_name').val(data.result.state_name);
                $('#short_code').val(data.result.short_code);
                $('#current_tax_year').val(data.result.current_tax_year);
                $('#current_delinquent_year').val(data.result.current_delinquent_year);
                $('#tax_cycle_start_month').val(data.result.tax_cycle_start_month);
                if(data.result.same_across_county == 1) {
                    $('#state_same_across').attr('checked', true);
                } else {
                    $('#state_same_across').attr('checked', false);
                }
                if(data.result.is_assessment_year == 1) {
                    $('#is_assessment_year').attr('checked', true);
                } else {
                    $('#is_assessment_year').attr('checked', false);
                }
                $('#state_id').val(data.result.id);
            }
        })
    }

    function isNumber(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }
</script>
@endsection