@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')
        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">GM Greeting</li>
            </ol>
            <h1 class="page-header">GM Greeting</h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('gmgreetings.create') }}" class="btn btn-custom">
                            <i class="fa fa-plus"></i> Add GM Greeting
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <!-- Success/Error Messages -->
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    @if (!$gm_greetings->isEmpty())
                        <div class="table-responsive">
                            <table id="data-table-gm-greeting"
                                class="table table-striped table-bordered table-td-valign-middle">
                                <thead>
                                    <tr>
                                        <th width="5%">No</th>
                                        <th width="20%">Title</th>
                                        <th width="20%">Description</th>
                                        <th width="10%">Mode</th>
                                        <th width="15%">Content</th>
                                        <th width="10%">Active</th>
                                        <th width="20%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($gm_greetings as $gmGreeting)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $gmGreeting->head_title }}</td>
                                            <td>{{ Str::limit($gmGreeting->description, 100) }}</td>
                                            <td>
                                                <span
                                                    class="badge badge-{{ $gmGreeting->mode === 'video' ? 'primary' : ($gmGreeting->mode === 'image' ? 'success' : 'info') }}">
                                                    {{ ucfirst($gmGreeting->mode) }}
                                                </span>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-custom btn-sm" data-toggle="modal"
                                                    data-target="#contentModal" data-id="{{ $gmGreeting->id }}"
                                                    data-mode="{{ $gmGreeting->mode }}"
                                                    data-video-path="{{ $gmGreeting->video_path }}"
                                                    data-text-content="{{ $gmGreeting->text_content }}">
                                                    <i class="fas fa-eye"></i> View Content
                                                </button>
                                            </td>
                                            <td>
                                                <div class="switcher">
                                                    <input type="checkbox" name="switcher_checkbox_{{ $gmGreeting->id }}"
                                                        id="switcher_checkbox_{{ $gmGreeting->id }}"
                                                        {{ $gmGreeting->is_active ? 'checked' : '' }}
                                                        data-id="{{ $gmGreeting->id }}" class="activate-switcher">
                                                    <label for="switcher_checkbox_{{ $gmGreeting->id }}"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <a href="{{ route('gmgreetings.edit', $gmGreeting->id) }}"
                                                    class="btn btn-custom btn-sm" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button"
                                                    class="btn btn-danger btn-sm delete-btn"
                                                    data-id="{{ $gmGreeting->id }}"
                                                    title="Delete"
                                                    {{ $gmGreeting->is_active ? 'disabled style=opacity:.5;cursor:not-allowed;' : '' }}
                                                    onclick="confirmDelete('{{ $gmGreeting->id }}', '{{ $gmGreeting->head_title }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                                <form id="delete-form-{{ $gmGreeting->id }}"
                                                    action="{{ route('gmgreetings.destroy', $gmGreeting->id) }}"
                                                    method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info text-center" role="alert">
                            <i class="fas fa-info-circle fa-2x mb-2"></i>
                            <h5>No GM Greetings Found</h5>
                            <p>No greetings found. Click the button above to add a new GM Greeting.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Scroll to top button -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <!-- Content Modal -->
    <div class="modal fade" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contentModalLabel">
                        <i class="fas fa-eye me-2"></i>Content Preview
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body bg-light">
                    <div id="modalContent" class="text-center">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Auto-dismiss alerts after 5 seconds
            setTimeout(function() {
                $('.alert').fadeOut('slow');
            }, 5000);

            // Content Modal Handler
            $('#contentModal').on('show.bs.modal', function(event) {
                const baseUrl = "{{ asset('') }}";
                var button = $(event.relatedTarget);
                var gmGreetingId = button.data('id');
                var mode = button.data('mode');
                var videoPath = button.data('video-path');
                var textContent = button.data('text-content');

                var modal = $(this);
                var modalContent = modal.find('#modalContent');

                // Clear previous content
                modalContent.empty();

                if (mode === 'video') {
                    var videoHtml = `
                        <div class="video-container">
                            <video width="100%" height="400" controls class="rounded">
                                <source src="${baseUrl}storage/${videoPath}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>`;
                    modalContent.html(videoHtml);
                } else if (mode === 'image') {
                    var imageHtml = `
                        <div class="image-container">
                            <img src="${baseUrl}storage/${videoPath}" alt="GM Greeting Image" 
                                 class="img-fluid rounded shadow">
                        </div>`;
                    modalContent.html(imageHtml);
                } else if (mode === 'text') {
                    var textHtml = `
                        <div class="text-content p-3 bg-white rounded shadow-sm">
                            ${textContent}
                        </div>`;
                    modalContent.html(textHtml);

                    if (videoPath) {
                        var imageHtml = `
                            <div class="image-container mt-3">
                                <img src="${baseUrl}storage/${videoPath}" alt="GM Photo" 
                                     class="img-fluid rounded shadow">
                            </div>`;
                        modalContent.append(imageHtml);
                    }
                }
            });

            // Activation Switcher Handler
            document.querySelectorAll('.activate-switcher').forEach(switcher => {
                switcher.addEventListener('change', function() {
                    const gmGreetingId = this.dataset.id;
                    const isActive = this.checked;
                    const switcherElement = this;

                    // Show loading state
                    switcherElement.disabled = true;

                    fetch('{{ route('gmgreetings.activate', ':id') }}'.replace(':id',
                            gmGreetingId), {
                                method: 'PATCH',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    is_active: isActive
                                })
                            })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Update the current row
                                switcherElement.checked = isActive;

                                syncAllGMSwitches(data.active_id);

                                // Show success message with appropriate text
                                const message = isActive ?
                                    'GM Greeting activated successfully.' :
                                    'GM Greeting deactivated successfully.';
                                showNotification(message, 'success');
                            } else {
                                showNotification(
                                    'An error occurred while updating the activation status.',
                                    'error');
                                // Revert the switch if there was an error
                                switcherElement.checked = !isActive;
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showNotification('Network error occurred. Please try again.',
                                'error');
                            switcherElement.checked = !isActive;
                        })
                        .finally(() => {
                            switcherElement.disabled = false;
                        });
                });
            });

            let table;

            if ($.fn.DataTable.isDataTable('#data-table-gm-greeting')) {
                table = $('#data-table-gm-greeting').DataTable();
            } else {
                table = $('#data-table-gm-greeting').DataTable({
                    pageLength: 10,
                    lengthMenu: [10, 20, 50, 100, 200],
                });
            }
        });

        function updateDeleteButton(id, isActive) {
            const btn = document.querySelector(`.delete-btn[data-id="${id}"]`);
            if (!btn) return;

            if (isActive) {
                btn.disabled = true;
                btn.style.opacity = ".5";
                btn.style.cursor = "not-allowed";
            } else {
                btn.disabled = false;
                btn.style.opacity = "";
                btn.style.cursor = "";
            }
        }

        // Confirm Delete Function
        function confirmDelete(id, title) {
            if (confirm(`Are you sure you want to delete "${title}"? This action cannot be undone.`)) {
                document.getElementById('delete-form-' + id).submit();
            }
        }

        // Show Notification Function
        function showNotification(message, type) {
            // Remove existing temporary alerts
            document.querySelectorAll('.alert-temp').forEach(alert => alert.remove());

            const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
            const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';

            const notification = `
                <div class="alert ${alertClass} alert-dismissible fade show alert-temp" role="alert">
                    <i class="fa ${iconClass} me-2"></i>
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            // Insert notification at the beginning of panel-body
            const panelBody = document.querySelector('.panel-body');
            if (panelBody) {
                panelBody.insertAdjacentHTML('afterbegin', notification);
            }

            // Auto-dismiss after 3 seconds
            setTimeout(function() {
                const tempAlert = document.querySelector('.alert-temp');
                if (tempAlert) {
                    tempAlert.remove();
                }
            }, 3000);
        }

        function syncAllGMSwitches(activeId) {

            const table = $('#data-table-gm-greeting').DataTable();

            table.rows().every(function () {

                const rowNode = this.node();
                const switcher = rowNode.querySelector('.activate-switcher');
                if (!switcher) return;

                const id = switcher.dataset.id;
                const isActive = id == activeId;

                // =========================
                // CHECKBOX
                // =========================
                switcher.checked = isActive;

                // =========================
                // DELETE BUTTON
                // =========================
                const deleteBtn = rowNode.querySelector('.delete-btn');
                if (deleteBtn) {
                    if (isActive) {
                        deleteBtn.disabled = true;
                        deleteBtn.style.opacity = ".5";
                        deleteBtn.style.cursor = "not-allowed";
                    } else {
                        deleteBtn.disabled = false;
                        deleteBtn.style.opacity = "";
                        deleteBtn.style.cursor = "";
                    }
                }

            });
        }
    </script>
@endsection