@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">
                            <ul class="nav nav-pills mb-2" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#rspa_active_generic" role="tab" id="state_generic" aria-selected="true"><i class="mdi mdi-alpha-a-circle-outline"></i> Active Agencies </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#rspa_inactive_specific" role="tab" id="state_specific" aria-selected="true"><i class="mdi mdi-alpha-i-circle-outline"></i> In-Active Agencies </a>
                                </li>
                            </ul>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane active" id="rspa_active_generic" role="tabpanel">
                                    @include('agency_details.active_agencies')
                                </div>
                                <div class="tab-pane" id="rspa_inactive_specific" role="tabpanel">
                                    @include('agency_details.inactive_agencies')
                                </div>
                            </div>
                        </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_active_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;
                        }
                    });
                }
            }],
        });

        $('#agency_county_inactive_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: '/stateCountyAgencyName/' + stateID,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        console.log(data[0].length);
                        $('#county_id').empty();
                        if (data[0] == '')
                        {
                            $('#county_id').append('<option value=""> County Unavailable </option>');
                        } else {
                            $('#county_id').append('<option value="" selected disabled> Select County </option>');
                            $.each(data[0], function(key, value) {
                                if (value['id'] in data[1]) {
                                    if(data[1][value['id']] != '--') {
                                        $('#county_id').append(
                                            '<option value="' + value['id'] + '">' + value[
                                                'county_name'] + ' - (' + data[1][value['id']] + ')</option>');
                                    } else {
                                        $('#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