@extends('admin.layout')

@section('content')
    <style>
        /* =========================================================
                                                   PAGE HEADER
                                                ========================================================= */

        .page-header {
            background: linear-gradient(135deg, #C74A26, #C74A26);
            border-radius: 18px;
            padding: 28px 35px;
            color: #fff;
            margin-bottom: 25px;
        }

        .page-header h3 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .page-header p {
            margin: 0;
        }


        /* =========================================================
                                                   TABLE
                                                ========================================================= */

        #contactTable th,
        #contactTable td {
            vertical-align: middle;
            white-space: nowrap;
        }

        #contactTable th {
            font-weight: 700;
        }


        /* =========================================================
                                                   ACTION BUTTONS
                                                ========================================================= */

        .action-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .action-buttons a,
        .action-buttons button {
            width: 36px;
            height: 36px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            border-radius: 8px;

            transition: all 0.2s ease;
            border: none;
        }


        /* =========================================================
                                                   EDIT BUTTON
                                                ========================================================= */

        .action-buttons .editContact {
            background: #7367f0;
            color: #fff;
            text-decoration: none;
        }

        .action-buttons .editContact:hover {
            background: #6258d8;
            color: #fff;
            transform: translateY(-1px);
        }


        /* =========================================================
                                                   DELETE BUTTON
                                                ========================================================= */

        .action-buttons .deleteContact {
            background: #ea5455;
            color: #fff;
            cursor: pointer;
        }

        .action-buttons .deleteContact:hover {
            background: #d94849;
            color: #fff;
            transform: translateY(-1px);
        }


        /* =========================================================
                                                   SOCIAL LINKS
                                                ========================================================= */

        .social-link {
            color: #C74A26;
            text-decoration: none;
            font-weight: 600;
        }

        .social-link:hover {
            text-decoration: underline;
        }


        /* =========================================================
                                                   DELETE MODAL
                                                ========================================================= */

        #deleteContactModal .modal-content {
            border: none;
            box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
        }

        #deleteContactModal .modal-dialog {
            max-width: 380px;
        }

        #deleteContactModal .btn-outline-primary,
        #deleteContactModal .btn-danger {
            min-width: 110px;
            border-radius: 10px;
        }

        #deleteContactModal .btn-danger {
            background: #ea5455;
            border-color: #ea5455;
        }

        #deleteContactModal .btn-danger:hover {
            background: #d94849;
            border-color: #d94849;
        }

        #deleteContactModal .btn-outline-primary {
            border-color: #7367f0;
            color: #7367f0;
        }

        #deleteContactModal .btn-outline-primary:hover {
            background: #7367f0;
            border-color: #7367f0;
            color: #fff;
        }

        #deleteContactName {
            color: #C74A26;
        }


        /* =========================================================
                                                   BUTTON
                                                ========================================================= */

        .btn-add-contact {
            border-radius: 10px;
            padding: 11px 20px;
            font-weight: 600;
        }
    </style>


    <div class="container-fluid mt-4">


        <!-- =========================================================
                                                     PAGE HEADER
                                                ========================================================== -->

        <div class="page-header">

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">

                <div>

                    <h3>
                        <i class="ti tabler-address-book me-2"></i>
                        Contact Information
                    </h3>

                    <p>
                        Manage your vehicle consultancy contact details.
                    </p>

                </div>


                <!-- ADD CONTACT -->

                <div>

                    <a href="{{ route('admin.add_contact') }}" class="btn btn-warning btn-add-contact">

                        <i class="ti tabler-plus me-1"></i>

                        Add Contact

                    </a>

                </div>

            </div>

        </div>


        <!-- =========================================================
                                                     CONTACT DETAILS TABLE
                                                ========================================================== -->

        <div class="card">

            <div class="card-header">

                <h5 class="mb-0">

                    <i class="ti tabler-list me-2"></i>

                    Contact Details List

                </h5>

            </div>


            <div class="card-body">
                <div class="row mb-3 align-items-center">

                    {{-- PAGE LENGTH --}}

                    <div class="col-auto mb-3">



                        <select id="pageLength" class="form-select">



                            <option value="10">10</option>

                            <option value="25">25</option>

                            <option value="50">50</option>

                            <option value="100">100</option>

                            <option value="All">All</option>



                        </select>



                    </div>
                    <div class="col-lg-6 col-md-5 col-12 mb-3">
                        <input type="text" id="sheetSearch" placeholder="Search..." class="form-control w-100">
                    </div>
                </div>
                <div class="table-responsive">

                    <table class="table table-bordered" id="contactTable" width="100%">

                        <thead>

                            <tr>

                                <th>S.No</th>

                                <th>Date</th>

                                <th>Mobile</th>

                                <th>Email</th>

                                <th>Working Hours</th>

                                <th>Address</th>
                                <th>Instagram</th>

                                <th>Facebook</th>

                                <th>WhatsApp</th>

                                <th>YouTube</th>

                                <th>Status</th>

                                <th>Action</th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
                                                 DELETE MODAL
                                            ========================================================== -->

    <div class="modal fade" id="deleteContactModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">

                        <i class="ti tabler-trash text-danger me-2"></i>

                        Delete Contact

                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>


                <div class="modal-body text-center">

                    <i class="ti tabler-alert-triangle text-danger" style="font-size: 45px;">
                    </i>

                    <p class="mt-3 mb-1">

                        Are you sure you want to delete this contact?

                    </p>

                    <strong id="deleteContactName"></strong>

                </div>


                <div class="modal-footer justify-content-center">

                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">

                        Cancel

                    </button>


                    <form id="deleteForm" method="POST" action="">

                        @csrf

                        <button type="submit" id="confirmDelete" class="btn btn-danger">

                            <i class="ti tabler-trash me-1"></i>
                            Delete

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================================================
                                                 JQUERY
                                            ========================================================== -->

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>


    <!-- =========================================================
                                                 DATATABLES
                                            ========================================================== -->

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script>
        $(document).ready(function() {


            /* =====================================================
               CONTACT DATATABLE
            ====================================================== */

            const contactTable = $('#contactTable').DataTable({

                processing: true,

                serverSide: true,

                responsive: false,

                autoWidth: false,
                lengthChange: false,
                searching: true,
                dom: 'rtip',
                language: {
                    lengthMenu: "_MENU_",
                    search: "",
                    searchPlaceholder: "Search..."
                },

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                ajax: "{{ route('data') }}",

                order: [
                    [1, 'desc']
                ],

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    {
                        data: 'mobile',
                        name: 'mobile'
                    },

                    {
                        data: 'email',
                        name: 'email'
                    },

                    {
                        data: 'working_hours',
                        name: 'working_hours'
                    },



                    {
                        data: 'address',
                        name: 'address'
                    },
                    {
                        data: 'instagram',
                        name: 'instagram',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'facebook',
                        name: 'facebook',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'whatsapp',
                        name: 'whatsapp',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'youtube',
                        name: 'youtube',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'is_active',
                        name: 'is_active',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        searchable: false,
                        orderable: false,
                        className: 'text-center'
                    }

                ]

            });
            $('#sheetSearch').on('keyup search input', function() {
                contactTable.search($(this).val()).draw();
            });


            /* =====================================================
               DELETE CONTACT
            ====================================================== */

            let deleteId = null;


            $(document).on('click', '.deleteContact', function() {

                deleteId = $(this).data('id');

                let contactName =
                    $(this).data('name') || '';


                console.log(
                    'Delete Contact ID:',
                    deleteId
                );


                $('#deleteContactName').text(
                    contactName
                );


                $('#deleteForm').attr(
                    'action',
                    "{{ url('admin/delete_contact') }}/" + deleteId
                );

            });


            /* =====================================================
               CONFIRM DELETE
            ====================================================== */

            $('#deleteForm').on('submit', function(e) {

                e.preventDefault();


                if (!deleteId) {

                    alert('Contact ID not found.');

                    return false;

                }


                let form = this;

                let button =
                    $('#confirmDelete');


                button.prop(
                    'disabled',
                    true
                );


                button.html(`
                    <span
                        class="spinner-border spinner-border-sm me-1"
                        role="status">
                    </span>
                    Deleting...
                `);


                form.submit();

            });

        });
    </script>
@endsection