@extends('backend.template.layout')
@section('content')
<nav class="mb-3" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="#!">E-commerce</a></li>
        <li class="breadcrumb-item"><a href="#!">{{ $crum1 }}</a></li>
        <li class="breadcrumb-item active">{{ $crum2 }}</li>
    </ol>
</nav>
<div class="mb-9">
    <div class="row g-2 mb-4">
        <div class="col-auto">
            <h2 class="mb-0">{{ $halaman }}</h2>
        </div>
    </div>
    <div id="products">
        <div class="mb-4">
            <div class="row g-3">
            <div class="col-auto">
                
            </div>
            <div class="col-auto scrollbar overflow-hidden-y flex-grow-1">
            
            </div>
            <div class="col-auto">
                
                <a class="modal-effect btn btn-sm btn-primary" data-bs-effect="effect-sign" data-action="tambah" data-bs-target="#modal-Small" data-id="0" data-bs-toggle="modal" href="#modal-Small" title="Tambah"><span class="fas fa-plus me-2"></span> Tambah</a>
            </div>
            </div>
        </div>
        <div class="pt-5 pb-5 mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis border-top border-bottom border-translucent position-relative top-1">
            <div class="table-responsive scrollbar-overlay mx-n1 px-1">
            <table class="table table-sm fs-9 mb-0" id="data-tables">
                <thead>
                <tr>
                    <th class="sort align-left pe-5" scope="col" data-sort="customer" style="width:10%;">AKSI</th>
                    <th class="sort align-left" scope="col" data-sort="total-spent" style="width:10%">NOMOR</th>
                    <th class="sort align-left" scope="col" data-sort="total-spent" style="width:10%">EMAIL</th>
                    <th class="sort align-left" scope="col" data-sort="total-spent" style="width:30%">ALAMAT</th>
                    <th class="sort align-left" scope="col" data-sort="total-spent" style="width:10%">LONGITUDE</th>
                    <th class="sort align-left" scope="col" data-sort="total-spent" style="width:10%">LATITUDE</th>
                </tr>
                </thead>
                <tbody class="list" id="customers-table-body">
                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                        <td colspan="4" class="align-middle white-space-nowrap pe-5">Tidak ada data...</td>
                    </tr>
                </tbody>
            </table>
            </div>
            
        </div>
    </div>
</div>
@endsection
@push('js')
    <script>
        $(document).ready(function () {
            getData();
        });
        let table;
        function getData(){
            if ($.fn.DataTable.isDataTable('#data-tables')) {
                table.ajax.reload(null, false);
                return;
            }
            
            table = $('#data-tables').DataTable({
                processing: false,
                serverSide: true,
                pageLength: 10,
                lengthMenu: [10, 15, 20, 25, 50, 100, 150],
                ajax: '{{ route("getcontact") }}',
                columns: [
                    { data: 'action', name: 'action', orderable: false, searchable: false},
                    { data: 'nomer', name: 'nomer', orderable: false, searchable: false },
                    { data: 'email', name: 'email', orderable: false, searchable: false },
                    { data: 'alamat', name: 'alamat', orderable: false, searchable: false },
                    { data: 'longitude', name: 'longitude', orderable: false, searchable: false },
                    { data: 'latitude', name: 'latitude', orderable: false, searchable: false },
                ]
            });
        }

    let modalBodyInput;
    let svbtn;
    
    var modalSyarat = document.getElementById('modal-Small');

    modalSyarat.addEventListener('show.bs.modal', function (event) {

        if (event.target.id !== 'modal-Small') return;

        var button = event.relatedTarget;
        let action = button.getAttribute('data-action');
        
        let id = button.getAttribute('data-id');
        let modalTitle = modalSyarat.querySelector('.modal-title');
        modalBodyInput = modalSyarat.querySelector('.modal-body');
        svbtn = modalSyarat.querySelector('.simpan-modal-Small');
        svbtn.innerHTML = 'Simpan';
        if (svbtn) svbtn.disabled = true;

        modalBodyInput.innerHTML = `
            <div class="d-flex justify-content-center align-items-center p-3 mt-5">
                <div class="spinner-border text-primary"></div>
            </div>
            <div class="text-center text-black">Memuat Data...</div>
        `;

        switch(action){
            case 'tambah':
                modalTitle.innerHTML = "Tambah";
                loadContent("{{ route('form-EditContact') }}", id);
                break;
            case 'edit':
                modalTitle.innerHTML = "Edit";
                loadContent("{{ route('form-EditContact') }}", id);
                break;
            case 'hapus':
                modalTitle.innerHTML = "Hapus Data Ini ?";
                svbtn.innerHTML = 'Hapus';
                loadContent("{{ route('form-HapusContact') }}", id);
                break;
        }

    });

    function loadContent(url, id){

        fetch(url,{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ id: id})
        })
        .then(res => {

            const contentType = res.headers.get("content-type");

            if (contentType && contentType.includes("application/json")) {

                return res.json().then(data => {

                    if (data.status === false) {

                        if (svbtn) svbtn.disabled = true;

                        modalBodyInput.innerHTML = `
                            <div class="alert alert-danger">
                                ${data.message}
                            </div>
                        `;

                    } else {

                        if (svbtn) svbtn.disabled = false;
                        modalBodyInput.innerHTML = data.html;
                    }

                });

            } else {

                return res.text().then(html => {
                    if (svbtn) svbtn.disabled = false;
                    modalBodyInput.innerHTML = html;
                });

            }

        })
        .catch(() => {
            modalBodyInput.innerHTML =
                `<div class="alert alert-danger">Terjadi kesalahan sistem</div>`;
        });
    }

    function simpansmall(){
        let modal = document.getElementById('modal-Small');
        let form = modal.querySelector("form");
        
        if (!form) {
            alert("Form belum termuat!");
            return;
        }
        
        if (!form.checkValidity()) {
            form.classList.add("was-validated");
            return;
        }

        let formData = new FormData(form);

        fetch(form.action, {
            method: "POST",
            body: formData
        })
        .then(res => res.json())
        .then(res => {

            if (!res.status) {
                form.querySelectorAll(".is-invalid").forEach(el => {
                    el.classList.remove("is-invalid");
                });

                form.querySelectorAll(".invalid-feedback").forEach(el => {
                    el.innerHTML = "";
                });
                Object.keys(res.errors).forEach(field => {
                    let input = form.querySelector(`[name="${field}"]`);
                    if (input){
                        input.classList.add("is-invalid");
                        let feedback = input.parentElement.querySelector(".invalid-feedback");
                            
                        if (feedback) {
                            feedback.innerHTML = res.errors[field].join("<br>");
                        }
                    } 
                });
            } else if(res.status == 'notfound'){
                bootstrap.Modal.getInstance(
                    document.getElementById('modal-Small')
                ).hide();
                alert(res.message);
            } else {
                bootstrap.Modal.getInstance(
                    document.getElementById('modal-Small')
                ).hide();
                alert(res.message);
                getData();
            }

        });
    }
    </script>
@endpush