@extends('layouts.app')
@section('title', 'Address Uploads')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="m-0 p-0" style="width:100%">
    <div id="loaderclass" class="loading d-none">Loading&#8230;</div>
    <div class="container-fluid mt-1">
        <x-address_tabs/>
        <div class="row p-0 m-auto justify-content-center align-items-start">
            <div class="col-lg-4 col-sm-12 col-xl-4 col-md-4">
                <input type="file" class="form-control" name="addressexcel" id="addressexcel" style="padding:5px;">
                <p style="color:red;"><strong>Format: </strong>Excel, CSV</p> 
            </div>
            <div class="col-lg-1 col-sm-12 col-xl-1 col-md-4">
                <button type="button" class="btn btn-success" onclick="getCounty()">Get County</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> Address </th>
                        <th> Street Number </th>
                        <th> Route </th>
                        <th> Locality </th>
                        <th> County </th>
                        <th> State </th>
                        <th> Country </th>
                        <th> Zip Code </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;
}
td.messagetxt {
    word-wrap: break-word !important;
    white-space: normal !important;
    max-width: 250px !important;
}
.loading
{
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
    .loading:before
    {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
    }

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required)
{
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.loading:not(:required):after
{
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
@endsection
@section('script')
<script>
$(document).ready(function() {
    $(".odthirdtabs").not("#tab27").addClass('btn-outline-secondary');
    $("#tab27").addClass('btn-secondary');
});
function getCounty() {
    var fileInput = $('#addressexcel')[0];
    var file = fileInput.files[0];

    if (!file) {
        return showError('Please upload a file.');
    }

    var formData = new FormData();
    formData.append('addressexcel', file);
    formData.append('_token', '{{ csrf_token() }}');

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

    $("#loaderclass").removeClass('d-none');

    $.ajax({
        url: "{{ url('/upload_address_excel_file') }}",
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function () {

           $('#county_data').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: {
                    url: "{{ url('/get_address_excel_county_data') }}",
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    }
                },
                columns: [
                    { data: 'input_address' },
                    { data: 'street_number' },
                    { data: 'route' },
                    { data: 'locality' },
                    { data: 'county' },
                    { data: 'state' },
                    { data: 'country' },
                    { data: 'postal_code' },
                ],
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'excel',
                        text: 'Export All',
                        action: function (e, dt, button, config) {
                            $.ajax({
                                url: "{{ url('/get_address_excel_county_data') }}?export=1",
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                xhrFields: {
                                    responseType: 'blob'
                                },
                                success: function (response, status, xhr) {
                                   const disposition = xhr.getResponseHeader('Content-Disposition');
                                    const matches = /filename="(.+)"/.exec(disposition);
                                    const filename = matches != null && matches[1] ? matches[1] : 'county_data.xlsx';

                                    const blob = new Blob([response], {
                                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                    });

                                    const link = document.createElement('a');
                                    link.href = window.URL.createObjectURL(blob);
                                    link.download = filename;
                                    document.body.appendChild(link);
                                    link.click();
                                    document.body.removeChild(link);
                                },
                                error: function (xhr) {
                                    showError('Failed to export Excel.');
                                    console.error(xhr.responseText);
                                }
                            });
                        }
                    }
                ],
                pageLength: 10,
                lengthMenu: [10, 25, 50, 100],
                initComplete: function () {
                   $("#loaderclass").addClass('d-none');
                }
            });

            
        },
        error: function (xhr) {
            Swal.close();
            showError('Upload failed. Please try again.');
            console.error(xhr.responseText);
        }
    });
}
function showError(message) {
    Swal.fire({
        position: 'middle',
        icon: 'error',
        title: message,
        showConfirmButton: true
    });
} 

</script>
@endsection