@extends('layouts.app')
@section('title', 'Agency Details')
@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="agencydetails_form" id="agencydetails_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_id" id="state_id" class="form-select">
                                            <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_id" id="county_id" class="form-select">
                                                        <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="agencydetails_form" onclick="view_countyDetails();"> Submit </button>
                                </div>
                            </div>
                        </form>
                        <div class="displayData d-none">
                            <table id="agency_county_dt_details" class="table table-striped table-bordered nowrap table-striped mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="thead-light">
                                    <tr>
                                        <th> Agency Name </th>
                                        <th> Agency Code 1 </th>
                                        <th> Agency Code 2 </th>
                                        <th> Auction Date </th>
                                        <th> No of Installments </th>
                                        <th> Discounts Available </th>
                                        <th> Last Updated On </th>
                                        <th> Edit </th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                    </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page_css')
<!-- Custom In Page CSS -->
<style>
    table.dataTable thead tr {
        background-color: #E0F7E0;
    }
    table.dataTable tbody tr {
        background-color: #ffffff;
    }
    div.dt-buttons {
        float: right;
        margin-top: -1px;
        margin-left: 11px;
    }
    .noborder {
        border:none;
    }
    .table td.highlight {
        color: black !important;
    }
    hr {
        margin: 0px !important;
    }
    .addbtn {
        margin-right:5px;
        border-radius: 3px !important;
    }
    .exportbtn {
        margin-left:5px;
        border-radius: 3px !important;
    }
</style>
@endsection

@section('page_script')
<!-- Custom In Page Javascript -->
<script>
    $(function() {
        $('#agency_county_dt_details').DataTable({
            dom: '<"mt-2"<"row"<"col-md-6"l><"col-md-6"<B><"float-end"f>>><"mb-1"<t>><"row"<"col"i><"col"p>>>',
            "order": [0, 'desc'],
            buttons: [{
                text: '<em class="mdi mdi-note-plus"></em> Add Agency Details',
                className: 'btn-primary-custom btn-sm addbtn',
                action: function(e, dt, node, config) {
                    $.ajax({
                        type: "POST",
                        cache: false,
                        async: false,
                        url: "{{ route('addingagencydetailed') }}",
                        data: {"_token":"{{csrf_token()}}", "state_id": $('#state_id').val(), "county_id": $('#county_id').val(), "type" : 1},
                        success: function(response) {
                            // window.location.href = '/update_agency_details/' + response.agencyId + '/' + response.typeId;
                            window.location.href = '/add_agency_details/' + response.stateId + '/' + response.countyId + '/' + response.typeId;
                        }
                    });
                }
            }],
        });

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

    function view_countyDetails(e) {
        if ($("#agencydetails_form").parsley()) {
            if ($("#agencydetails_form").parsley().validate()) {
                event.preventDefault();
                if ($("#agencydetails_form").parsley().isValid()) {
                    var stateId = $('#state_id').val();
                    var countyId = $('#county_id').val();
                    $.ajax({
                        url: "fetch_county_details/" + stateId + "/" + countyId,
                        success: function(data) {
                            location.reload();
                        }
                    });
                }
            }
        }
    }

    function edit_agency_details(agencyId, typeId) {
        window.location.href = '/update_agency_details/' + agencyId + '/' + typeId;
    }

    // function export_agencyDetails() {
    //     $.ajax({
    //         url: "{{ url('/export_agencyDetails') }}", 
    //         type: "POST", 
    //         success:function(response){
    //             // var url = 'export_reports/'+dealid;
    //             // $("#report_form").attr('action', url);
    //             // $("#report_form").submit();
    //         }
    //     });
    // }
</script>
@endsection