@extends('layouts.app')
@section('title', 'Zip To County')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="m-0 p-0" style="width:100%">
    <div class="container-fluid mt-1">
        <x-address_tabs/>
        <div class="row p-0 m-auto justify-content-center align-items-center">
            <div class="col-lg-4 col-sm-12 col-xl-4 col-md-4">
                <textarea class="form-control" name="zip_code" id="zip_code" placeholder="Enter ZipCode Here....."></textarea>
            </div>
            <div class="col-lg-1 col-sm-12 col-xl-1 col-md-4">
                <button type="button" class="btn btn-success" onclick="getCounty()">Submit</button>
            </div>
        </div>
    </div>
    <div class="row mt-4 p-4" id="countyCardcontainer" style="display: none;background-color: #fff;">
        <div class="col-12">
            <table id="county_data" class="table table-bordered nowrap table-striped mb-0 mt-2" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                <thead>
                    <tr>
                        <th> Zip Code </th>
                        <th> Type </th>
                        <th> Decommissioned </th>
                        <th> Primary City </th>
                        <th> Acceptable City </th>
                        <th> Unacceptable City </th>
                        <th> State </th>
                        <th> County </th>
                        <th> Timezone </th>
                        <th> Area Codes </th>
                        <th> World Region </th>
                        <th> Country </th>
                        <th> Latitude </th>
                        <th> Longitude </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
@section('page_css')
<style>
#county_data thead {
    background-color: rgb(23, 25, 104) !important;
    color: #fff !important;
}
.table th {
    color: #fff !important;
}
</style>
@endsection
@section('script')
<script>
$(document).ready(function() {
    $(".odthirdtabs").not("#tab24").addClass('btn-outline-secondary');
    $("#tab24").addClass('btn-secondary');
});
function getCounty() {
    var zip_code = $("#zip_code").val(); 

    document.getElementById('countyCardcontainer').style.display = 'block';

    $.ajax({
        url: "{{ url('/get_Counties') }}",
        type: 'POST',
        data: {
            zipcodes: zip_code,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            const tbody = $('#county_data tbody');
            tbody.empty(); 

            if (response.length === 0) {
                tbody.append('<tr><td colspan="14" class="text-center">No records found</td></tr>');
                return;
            }

            response.forEach(function(item) {
                const row = `
                    <tr>
                        <td>${item.zip_code || '--'}</td>
                        <td>${item.type || '--'}</td>
                        <td>${item.decommissioned || '--'}</td>
                        <td>${item.primary_city || '--'}</td>
                        <td>${item.acceptable_cities || '--'}</td>
                        <td>${item.unacceptable_cities || '--'}</td>
                        <td>${item.state || '--'}</td>
                        <td>${item.county || '--'}</td>
                        <td>${item.timezone || '--'}</td>
                        <td>${item.area_codes || '--'}</td>
                        <td>${item.world_region || '--'}</td>
                        <td>${item.country || '--'}</td>
                        <td>${item.latitude || '--'}</td>
                        <td>${item.longitude || '--'}</td>
                    </tr>
                `;
                tbody.append(row);
            });
        },
        error: function (xhr) {
            console.error(xhr.responseText);
        }
    });
}
</script>
@endsection