@extends('layouts/page')
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            <div class="card">
                <div class="px-3 pt-3 border-bottom d-flex justify-content-between align-items-center">

                    <div class="col-md-6">
                        <div class="card-title" style="text-align: start;">
                            <h4 class="fw-bold">{{ $title }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card-title d-flex justify-content-end" style="text-align: end;">
                            <form action="{{ url('contact/export') }}" method="post">
                                @csrf
                                <div class="btn-group">
                                    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-outline-secondary waves-effect dropdown-toggle">
                                        <i class="fa-solid fa-print"></i>&nbsp;&nbsp; Export
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <h6 class="dropdown-header">Tipe File</h6>
                                        </li>
                                        <li><a class="dropdown-item" href="javascript:void(0);" data-type="pdf">PDF</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0);" data-type="excel">Excel</a>
                                        </li>
                                    </ul>
                                </div>
                                <input type="hidden" id="typefile" name="typefile">
                            </form>
                            <a href="{{ url('contact/add/') }}" type="button"
                                class="btn btn-primary waves-effect waves-light ms-2">+Tambah</a>
                        </div>
                    </div>
                </div>

                <div class="card-datatable table-responsive">
                    <table id="contacttable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nama Lengkap</th>
                                <th>No. Telp</th>
                                <th>Email</th>
                                <th>No. Handphone</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal fade" id="modalPlace" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Gambar Slider</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body" id="bucket_modal">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {

            let contacttable = $("#contacttable").DataTable({
                "responsive": true,
                "paging": true,
                "ordering": true,
                "info": true,
                "bFilter": false,
                "searching": true,
                "processing": true,
                "serverSide": true,
                "aaSorting": [],
                columns: [{
                        "data": null,
                        "sortable": false,
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: "Name",
                    },
                    {
                        data: "Phone",
                    },
                    {
                        data: "Email",
                    },
                    {
                        data: "Mobile",
                    },
                    {
                        data: "ContactId",
                        render: function(data, type, row, meta) {
                            return `
                    <a href="{{ url('contact/edit') }}/${row.ContactId}" class="text-body"><i class="ti ti-edit ti-sm me-2"></i></a>
                    <a class="text-body delete-record" onclick="return confirm('Apakah anda yakin?')" data-contact-id="${data}"><i class="ti ti-trash ti-sm me-2"></i></a>
                    `
                        }
                    }
                ],
                ajax: {
                    url: '{{ url('contact/_list') }}',
                    method: 'POST',
                    "data": function(d) {}
                },
                drawCallback: function(settings) {
                    $('.delete-record').each(function(i) {
                        $('.delete-record:eq(' + i + ')').click(function(e) {
                            var contactId = $(this).data('contact-id');
                            var deleteRow = $(this).closest('tr');
                            var deleteUrl = "{{ url('contact/delete') }}/" + contactId;

                            $.ajax({
                                url: deleteUrl,
                                type: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                        .attr(
                                            'content')
                                },
                                beforeSend: function() {
                                    $(".spinnerloader").show()
                                },
                                success: function(response) {
                                    var responseData = JSON.parse(response);
                                    if (responseData === "Delete Success") {
                                        $(".spinnerloader").hide()
                                        Swal.fire({
                                            title: "Berhasil",
                                            icon: "success",
                                            text: "Data Berhasil Di Hapus",
                                            showClass: {
                                                popup: 'animate__animated animate__bounceIn'
                                            },
                                            customClass: {
                                                confirmButton: 'btn btn-primary'
                                            },
                                            allowOutsideClick: false,
                                            buttonsStyling: false
                                        }).then(function() {
                                            contacttable.ajax
                                                .reload();
                                        });
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Oops...',
                                            text: 'Failed to delete record.',
                                            customClass: {
                                                confirmButton: 'btn btn-danger'
                                            }
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error(error);
                                }
                            });
                        })
                    })
                },
                pagingType: "simple_numbers",
                pageLength: 10,
                fixedColumns: true
            });

            // $('.filters').on('change', function() {
            //     slidertable.ajax.reload();
            // });
        });
        $(".dropdown-menu .dropdown-item").on("click", function() {
            $(".dropdown-menu .dropdown-item").removeClass("active");
            $(this).addClass("active");

            $("#typefile").val($(this).attr("data-type"));
            $("form").submit();
        });
    </script>
@endsection