@extends('layouts.app')

@section('title', 'Settings - Tiqkets')

@section('page-title', 'Settings')

@section('content')
    <div class="container-fluid">
        <!-- Settings Section -->
        <div class="settings-section mb-4">
            <div class="row">
                <div class="col-12">
                    <h4 class="mb-4">Restaurant Settings</h4>

                    <!-- Toggle Switches -->
                    <div class="toggle-switches">
                        <!-- Wait Time Rules -->
                        <div class="toggle-item mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input setting-toggle" type="checkbox" id="waitTimeToggle"
                                    data-setting="wait_time_enabled" {{ $outlet->wait_time_enabled ? 'checked' : '' }}>
                                <label class="form-check-label" for="waitTimeToggle">
                                    Wait Time Rules
                                </label>
                            </div>
                            <p class="toggle-description text-muted ms-4">
                                Turn ON/OFF live wait-time tracking.
                            </p>
                        </div>

                        <!-- Background Audio -->
                        <div class="toggle-item mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input setting-toggle" type="checkbox" id="audioToggle"
                                    data-setting="audio_enabled" {{ $outlet->audio_enabled ? 'checked' : '' }}>
                                <label class="form-check-label" for="audioToggle">
                                    Background Audio
                                </label>
                            </div>
                            <p class="toggle-description text-muted ms-4">
                                Restaurant announcements/music play through speakers.
                            </p>
                        </div>

                        <!-- TV Display -->
                        <div class="toggle-item mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input setting-toggle" type="checkbox" id="tvToggle"
                                    data-setting="tv_display_enabled" {{ $outlet->tv_display_enabled ? 'checked' : '' }}>
                                <label class="form-check-label" for="tvToggle">
                                    TV Display
                                </label>
                            </div>
                            <p class="toggle-description text-muted ms-4">
                                Show queue status on TV screen.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notification Setup Section -->
        <div class="settings-section">
            <div class="row">
                <div class="col-12">
                    <h4 class="mb-3">Notification Setup</h4>
                    <p class="text-muted mb-4">
                        Manage up to 5 notification contacts for queue monitoring, reports, and alerts.
                        Configure when and how your team gets notified about restaurant operations.
                    </p>

                    <!-- Notification Contacts Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 60px;">S. No.</th>
                                    <th>Contact Name</th>
                                    <th style="width: 200px;">Number</th>
                                    <th>Alert Types</th>
                                    <th style="width: 100px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="notificationContactsTable">
                                @foreach ($notificationContacts as $index => $contact)
                                    <tr id="contact-{{ $contact->id }}">
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $contact->name }}</td>
                                        <td>{{ $contact->phone }}</td>
                                        <td>
                                            @foreach ($contact->alert_types as $alertType)
                                                <span class="badge bg-light text-dark me-1 mb-1">{{ $alertType }}</span>
                                            @endforeach
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary me-1 edit-contact" title="Edit"
                                                data-contact-id="{{ $contact->id }}"
                                                data-contact-name="{{ $contact->name }}"
                                                data-contact-phone="{{ $contact->phone }}"
                                                data-contact-alerts="{{ json_encode($contact->alert_types) }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger delete-contact" title="Delete"
                                                data-contact-id="{{ $contact->id }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Add Contact Button -->
                    <div class="mt-3">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addContactModal">
                            <i class="fas fa-plus me-2"></i>Add Contact
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Contact Modal -->
    <div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addContactModalLabel">Add Notification Contact</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addContactForm">
                        @csrf
                        <div class="mb-3">
                            <label for="contactName" class="form-label">Contact Name</label>
                            <input type="text" class="form-control" id="contactName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="contactNumber" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="contactNumber" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Alert Types</label>
                            <div class="alert-types">
                                <div class="form-check mb-2">
                                    <input class="form-check-input alert-type" type="checkbox" name="alert_types[]"
                                        value="Queue Start" id="queueStart">
                                    <label class="form-check-label" for="queueStart">Queue Start</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input alert-type" type="checkbox" name="alert_types[]"
                                        value="Queue Report" id="queueReport">
                                    <label class="form-check-label" for="queueReport">Queue Report</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when bookings > 10" id="bookingAlert10">
                                    <label class="form-check-label" for="bookingAlert10">Alert when bookings > 10</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when bookings > 5" id="bookingAlert5">
                                    <label class="form-check-label" for="bookingAlert5">Alert when bookings > 5</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when waiting > 5" id="waitingAlert5">
                                    <label class="form-check-label" for="waitingAlert5">Alert when waiting > 5</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when waiting > 3" id="waitingAlert3">
                                    <label class="form-check-label" for="waitingAlert3">Alert when waiting > 3</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveContactBtn">Save Contact</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Contact Modal -->
    <div class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editContactModalLabel">Edit Notification Contact</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editContactForm">
                        @csrf
                        @method('PUT')
                        <input type="hidden" id="editContactId" name="contact_id">
                        <div class="mb-3">
                            <label for="editContactName" class="form-label">Contact Name</label>
                            <input type="text" class="form-control" id="editContactName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="editContactNumber" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="editContactNumber" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Alert Types</label>
                            <div class="alert-types">
                                <div class="form-check mb-2">
                                    <input class="form-check-input edit-alert-type" type="checkbox" name="alert_types[]"
                                        value="Queue Start" id="editQueueStart">
                                    <label class="form-check-label" for="editQueueStart">Queue Start</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input edit-alert-type" type="checkbox" name="alert_types[]"
                                        value="Queue Report" id="editQueueReport">
                                    <label class="form-check-label" for="editQueueReport">Queue Report</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input edit-alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when bookings > 10" id="editBookingAlert10">
                                    <label class="form-check-label" for="editBookingAlert10">Alert when bookings >
                                        10</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input edit-alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when bookings > 5" id="editBookingAlert5">
                                    <label class="form-check-label" for="editBookingAlert5">Alert when bookings >
                                        5</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input edit-alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when waiting > 5" id="editWaitingAlert5">
                                    <label class="form-check-label" for="editWaitingAlert5">Alert when waiting > 5</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input edit-alert-type" type="checkbox" name="alert_types[]"
                                        value="Alert when waiting > 3" id="editWaitingAlert3">
                                    <label class="form-check-label" for="editWaitingAlert3">Alert when waiting > 3</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateContactBtn">Update Contact</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .settings-section {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
        }

        .toggle-item {
            border-bottom: 1px solid #f1f1f1;
            padding-bottom: 1rem;
        }

        .toggle-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .toggle-description {
            font-size: 0.875rem;
            margin-bottom: 0;
        }

        .form-check-input:checked {
            background-color: #7c2d5e;
            border-color: #7c2d5e;
        }

        .form-check-input:focus {
            border-color: #7c2d5e;
            box-shadow: 0 0 0 0.2rem rgba(124, 45, 94, 0.25);
        }

        .table th {
            font-weight: 600;
            color: #374151;
        }

        .badge {
            font-size: 0.75rem;
            font-weight: 500;
        }

        .alert-types {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 1rem;
            background: #f9fafb;
        }

        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Base URL for AJAX calls
        const baseUrl = '{{ url('/') }}';

        // CSRF Token for AJAX requests
        const csrfToken = '{{ csrf_token() }}';

        // Handle toggle switches
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize toggles with current outlet settings
            initializeToggles();

            // Add event listeners to setting toggles
            document.querySelectorAll('.setting-toggle').forEach(toggle => {
                toggle.addEventListener('change', function() {
                    updateSetting(this.dataset.setting, this.checked);
                });
            });

            // Add contact form submission
            document.getElementById('saveContactBtn').addEventListener('click', saveContact);

            // Update contact form submission
            document.getElementById('updateContactBtn').addEventListener('click', updateContact);

            // Edit contact button handlers
            document.querySelectorAll('.edit-contact').forEach(button => {
                button.addEventListener('click', function() {
                    openEditModal(this);
                });
            });

            // Delete contact button handlers
            document.querySelectorAll('.delete-contact').forEach(button => {
                button.addEventListener('click', function() {
                    deleteContact(this.dataset.contactId);
                });
            });
        });

        function initializeToggles() {
            // Toggles are already initialized with PHP values in the blade template
            console.log('Toggles initialized with current settings');
        }

        function updateSetting(setting, value) {
            const formData = new FormData();
            formData.append('_token', csrfToken);
            formData.append(setting, value ? '1' : '0');

            fetch(`${baseUrl}/outlet-staff/settings/update-settings`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast('Setting updated successfully', 'success');
                    } else {
                        showToast('Failed to update setting', 'error');
                        // Revert the toggle
                        document.querySelector(`[data-setting="${setting}"]`).checked = !value;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Error updating setting', 'error');
                    document.querySelector(`[data-setting="${setting}"]`).checked = !value;
                });
        }

        function saveContact() {
            const form = document.getElementById('addContactForm');
            const formData = new FormData(form);

            // Check if at least one alert type is selected
            const alertTypes = form.querySelectorAll('input[name="alert_types[]"]:checked');
            if (alertTypes.length === 0) {
                showToast('Please select at least one alert type', 'error');
                return;
            }

            fetch(`${baseUrl}/outlet-staff/settings/notification-contacts`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        $('#addContactModal').modal('hide');
                        showToast('Contact added successfully', 'success');
                        location.reload(); // Reload to show new contact
                    } else {
                        showToast(data.message || 'Failed to add contact', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Error adding contact', 'error');
                });
        }

        function openEditModal(button) {
            const contactId = button.dataset.contactId;
            const contactName = button.dataset.contactName;
            const contactPhone = button.dataset.contactPhone;
            const contactAlerts = JSON.parse(button.dataset.contactAlerts);

            // Populate the edit form
            document.getElementById('editContactId').value = contactId;
            document.getElementById('editContactName').value = contactName;
            document.getElementById('editContactNumber').value = contactPhone;

            // Clear all checkboxes first
            document.querySelectorAll('.edit-alert-type').forEach(checkbox => {
                checkbox.checked = false;
            });

            // Check the appropriate alert types
            contactAlerts.forEach(alert => {
                const checkbox = document.querySelector(`.edit-alert-type[value="${alert}"]`);
                if (checkbox) {
                    checkbox.checked = true;
                }
            });

            // Show the modal
            $('#editContactModal').modal('show');
        }

        function updateContact() {
            const form = document.getElementById('editContactForm');
            const formData = new FormData(form);
            const contactId = document.getElementById('editContactId').value;

            // Check if at least one alert type is selected
            const alertTypes = form.querySelectorAll('input[name="alert_types[]"]:checked');
            if (alertTypes.length === 0) {
                showToast('Please select at least one alert type', 'error');
                return;
            }

            // Use the contact ID in the URL for PUT method
            fetch(`${baseUrl}/outlet-staff/settings/notification-contacts/${contactId}`, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        name: document.getElementById('editContactName').value,
                        phone: document.getElementById('editContactNumber').value,
                        alert_types: Array.from(alertTypes).map(checkbox => checkbox.value)
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        $('#editContactModal').modal('hide');
                        showToast('Contact updated successfully', 'success');
                        location.reload();
                    } else {
                        showToast(data.message || 'Failed to update contact', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Error updating contact', 'error');
                });
        }

        function deleteContact(contactId) {
            if (!confirm('Are you sure you want to delete this contact?')) {
                return;
            }

            const formData = new FormData();
            formData.append('_token', csrfToken);
            formData.append('_method', 'DELETE');

            fetch(`${baseUrl}/outlet-staff/settings/notification-contacts/${contactId}`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast('Contact deleted successfully', 'success');
                        // Remove the row from the table
                        document.getElementById(`contact-${contactId}`).remove();
                        // Re-number the table rows
                        renumberTableRows();
                    } else {
                        showToast(data.message || 'Failed to delete contact', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Error deleting contact', 'error');
                });
        }

        function renumberTableRows() {
            const rows = document.querySelectorAll('#notificationContactsTable tr');
            rows.forEach((row, index) => {
                row.cells[0].textContent = index + 1;
            });
        }

        function showToast(message, type = 'info') {
            // Remove existing toasts
            const existingToasts = document.querySelectorAll('.toast');
            existingToasts.forEach(toast => toast.remove());

            const toast = document.createElement('div');
            toast.className =
                `toast align-items-center text-white bg-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');

            toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        `;

            document.body.appendChild(toast);

            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();

            // Auto remove after 5 seconds
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 5000);
        }

        // Reset form when modal is closed
        $('#addContactModal').on('hidden.bs.modal', function() {
            document.getElementById('addContactForm').reset();
        });

        $('#editContactModal').on('hidden.bs.modal', function() {
            document.getElementById('editContactForm').reset();
        });
    </script>
@endpush