@extends('layouts.app')
@section('title', 'Mass Update Agency')
@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="massupdate_form" id="massupdate_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="mass_state_id" id="mass_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="mass_county_id" id="mass_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="massupdate_form" onclick="view_countyDetails();"> Submit </button>
                                </div>
                            </div>
                        </form>
                        <div class="displayData d-none">
                            <table id="mass_update_dt_details" class="table table-bordered nowrap table-striped" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th> Agency Name </th>
                                        <th> General Info </th>
                                        <th> Statutory Dates </th>
                                        <th> Calendar Dates </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() {
        $('#mass_update_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>>>',
        });

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

    function view_countyDetails(e) {
        if ($("#massupdate_form").parsley()) {
            if ($("#massupdate_form").parsley().validate()) {
                event.preventDefault();
                if ($("#massupdate_form").parsley().isValid()) {
                    var stateId = $('#mass_state_id').val();
                    var countyId = $('#mass_county_id').val();
                    $.ajax({
                        url: "fetch_mass_county_details/" + stateId + "/" + countyId,
                        success: function(data) {
                            location.reload();
                        }
                    });
                }
            }
        }
    }
</script>
@endsection