@extends('Admin.layout')

@section('content')
    <div class="container-fluid">

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">

            <div>

                <h4 class="mb-1">
                    Contact Information
                </h4>

            </div>

            <a href="{{ route('add_contact') }}" class="btn btn-primary">

                <i class="bi bi-plus-lg me-1"></i>

                Add Contact

            </a>

        </div>


        {{-- Contact Table --}}
        <div class="card border-0 shadow-sm">

            <div class="card-body">

                <div class="table-responsive">

                    <table id="contactTable" class="table table-hover align-middle w-100">

                        <thead class="table-light">

                            <tr>

                                <th>
                                    S.No
                                </th>

                                <th>
                                    Contact Details
                                </th>

                                <th>
                                    Business Hours
                                </th>

                                <th>
                                    Social Media
                                </th>

                                <th>
                                    Status
                                </th>

                                <th>
                                    Action
                                </th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>

    {{-- Status modal --}}
    <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

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

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Change Status
                </h5>

                <p class="text-muted mb-0" id="statusMessage">
                    Are you sure you want to change status?
                </p>

                <form action="{{ route('update_contact_status') }}" method="POST" id="statusForm">

                    @csrf

                    <input type="hidden" name="id" id="status_contact_id">

                    <input type="hidden" name="status" id="status_value">


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

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-success p-3 fw-semibold" id="confirmStatusChange">

                            Yes, Change

                        </button>

                    </div>

                </form>

            </div>

        </div>
    </div>

    {{-- DELETE CONTACT MODAL --}}
    <div class="modal fade" id="deleteContactModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

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

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Delete Contact
                </h5>

                <p class="text-muted">
                    Are you sure you want to delete this contact?
                </p>

                <form action="{{ route('delete_contact') }}" method="POST" id="DeleteContactForm">

                    @csrf

                    {{-- Hidden Contact ID --}}
                    <input type="hidden" name="contact_id" id="delete_contact_id">

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

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-danger p-3 fw-semibold" id="confirmDeleteContactBtn">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

            $('#contactTable').DataTable({

                processing: true,

                serverSide: true,

                responsive: false,

                ajax: {

                    url: "{{ route('contact_data') }}",

                    type: "GET",

                    error: function(xhr) {

                        console.error(
                            'Contact DataTable Error:',
                            xhr.responseText
                        );

                    }

                },

                language: {

                    lengthMenu: '_MENU_',

                    emptyTable: 'No contact information found.',

                    zeroRecords: 'No matching contact information found.'

                },
                
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        className: 'text-nowrap'
                    },
                    {
                        data: 'contact_details',
                        name: 'address'
                    },

                    {
                        data: 'business_hours',
                        name: 'opening_days'
                    },

                    {
                        data: 'social_media',
                        name: 'facebook_url',
                        orderable: false,
                        searchable: false
                    },

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

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

                ],

                order: [
                    [0, 'desc']
                ],

                pageLength: 10,

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ]

            });

            let contactId = null;
            let currentStatus = null;

            // Open status confirmation modal
            $(document).on('click', '.status-toggle', function(e) {

                // Prevent switch from changing immediately
                e.preventDefault();

                let button = $(this);

                contactId = button.data('id');

                currentStatus = Number(
                    button.data('status')
                );

                // Set contact ID
                $('#status_contact_id').val(contactId);

                // Send opposite status
                $('#status_value').val(
                    currentStatus === 1 ? 0 : 1
                );

                if (currentStatus === 1) {

                    $('#statusMessage').text(
                        'Are you sure you want to deactivate this contact?'
                    );

                    $('#confirmStatusChange')
                        .removeClass('btn-success')
                        .addClass('btn-danger');

                } else {

                    $('#statusMessage').text(
                        'Are you sure you want to activate this contact?'
                    );

                    $('#confirmStatusChange')
                        .removeClass('btn-danger')
                        .addClass('btn-success');
                }

                // Show confirmation modal
                let modal = bootstrap.Modal.getOrCreateInstance(
                    document.getElementById('statusModal')
                );

                modal.show();
            });

            // delete modal
            $(document).on(
                'click',
                '.delete-contact',
                function() {

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

                    if (!id) {
                        return;
                    }

                    $('#delete_contact_id').val(id);

                    let modal = new bootstrap.Modal(
                        document.getElementById('deleteContactModal')
                    );

                    modal.show();

                }
            );


            $(document).on(
                'submit',
                '#DeleteContactForm',
                function() {

                    let button = $('#confirmDeleteContactBtn');

                    button
                        .prop('disabled', true)
                        .text('Deleting...');

                }
            );

        });
    </script>
@endsection