@extends('layouts.app')

@section('title', 'WhatsApp Content - Tiqkets')
@section('page-title', 'WhatsApp Content Management')

@section('content')
    @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="btn-close" data-bs-dismiss="alert" aria-label="Close"></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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Information Header -->
    <div class="info-header-section mb-4">
        <p class="info-description">
            These templates are used for automated WhatsApp messages sent to customers for various booking events and
            notifications.
        </p>

        <div class="row g-3">
            <div class="col-md-3">
                <div class="feature-card">
                    {{-- <div class="feature-icon">
                        <i class="fas fa-code"></i>
                    </div> --}}
                    <div class="feature-content">
                        <h6 class="feature-title">Dynamic Variables</h6>
                        <p class="feature-text">Use placeholders like {customer_name}, {booking_id}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-card">
                    {{-- <div class="feature-icon">
                        <i class="fas fa-paper-plane"></i>
                    </div> --}}
                    <div class="feature-content">
                        <h6 class="feature-title">Auto Send</h6>
                        <p class="feature-text">Messages are sent automatically on booking events</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-card">
                    {{-- <div class="feature-icon">
                        <i class="fas fa-undo"></i>
                    </div> --}}
                    <div class="feature-content">
                        <h6 class="feature-title">Reset feature</h6>
                        <p class="feature-text">Restore any template to its default content</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-card">
                    {{-- <div class="feature-icon">
                        <i class="fas fa-info-circle"></i>
                    </div> --}}
                    <div class="feature-content">
                        <h6 class="feature-title">Status indicator</h6>
                        <p class="feature-text">See which templates are modified</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover modern-table mb-0">
                    <thead>
                        <tr>
                            <th style="width: 80px;">S. No.</th>
                            <th style="width: 200px;">Message Type</th>
                            <th>Message Content</th>
                            <th style="width: 120px;">Status</th>
                            <th style="width: 100px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($templates as $template)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <span class="template-name">{{ $template->template_name }}</span>
                                </td>
                                <td>
                                    @if ($template->message_type === 'text')
                                        <div class="message-preview-text">
                                            {{ Str::limit($template->message_content, 150) }}
                                        </div>
                                    @else
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted">
                                                @if ($template->message_content && Storage::exists($template->message_content))
                                                    {{ basename($template->message_content) }}
                                                @else
                                                    Default {{ $template->message_type }}
                                                @endif
                                            </span>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    @if ($template->message_content !== $template->default_content)
                                        {{-- <span class="status-badge status-modified"> --}}
                                        Modified
                                        {{-- </span> --}}
                                    @else
                                        {{-- <span class="status-badge status-default"> --}}
                                        Default
                                        {{-- </span> --}}
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex gap-2">
                                        <a href="{{ route('restaurant-admin.whatsapp.edit', $template) }}"
                                            class="btn btn-sm btn-outline-secondary p-2" title="Edit Template">
                                            <i class="fas fa-pencil"></i>
                                        </a>
                                        @if ($template->message_content !== $template->default_content)
                                            <form action="{{ route('restaurant-admin.whatsapp.reset', $template) }}"
                                                method="POST" class="d-inline">
                                                @csrf
                                                {{-- <button type="submit" class="btn btn-sm btn-outline-secondary"
                                                    title="Reset to Default"
                                                    onclick="return confirm('Are you sure you want to reset this template to default?')">
                                                    <i class="fas fa-undo"></i>
                                                </button> --}}
                                                <button type="button"
                                                    class="btn btn-sm btn-outline-secondary p-2 reset-template-btn"
                                                    data-default-content="{{ e($template->default_content) }}">
                                                    <i class="fas fa-undo iconsz"></i>
                                                </button>


                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Info Header Section */
        .info-header-section {
            margin-bottom: 18px;
             background: #ffffff;
             padding:20px;
             border-radius: 12px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .info-description {
            color: #4C4C4C;
            font-size: 16px;
            margin-bottom: 16px;
            line-height: 1.6;
        }
       
        /* Feature Cards */
        .feature-card {
            background: #F7F7F7;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            height: 100%;
            transition: all 0.2s ease;
        }

        .feature-card:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border-color: #d1d5db;
        }

        .feature-icon {
            width: 36px;
            height: 36px;
            background: #f3f4f6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }

        .feature-icon i {
            color: #6b7280;
            font-size: 16px;
        }

        .feature-title {
            font-size: 14px;
            font-weight: 600;
            color: #272626;
            margin-bottom: 4px;
        }

        .feature-text {
            font-size: 12px;
            color: #777777;
            margin-bottom: 0;
            line-height: 1.5;
        }

        /* Modern Table Styles */
        .modern-table {
            border-collapse: separate;
            border-spacing: 0;
        }

        .modern-table thead {
            background: #f9fafb;
        }

        .modern-table thead th {
            font-weight: 600;
            font-size: 14px;
            color: #272626;
            padding: 16px 20px;
            border-bottom: 1px solid #e5e7eb;
            text-align: left;
        }

        .modern-table tbody td {
            font-weight: 400;
            font-size: 16px;
            padding: 16px 20px;
            border-bottom: 1px solid #f3f4f6;
            vertical-align: middle;

            color: #272626;
        }

        .modern-table tbody tr:hover {
            background-color: #f9fafb;
        }

        .modern-table tbody tr:last-child td {
            border-bottom: none;
        }

        .template-name {
            font-weight: 500;
            color: #111827;
        }

        .message-preview-text {
            color: #272626;
            font-size: 16px;
            line-height: 1.6;
        }

        /* Status Badges */
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
        }

        .status-modified {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-default {
            background: #f3f4f6;
            color: #6b7280;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: #f3f4f6;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .action-btn i {
            font-size: 14px;
            color: #6b7280;
        }

        .action-btn:hover {
            background: #e5e7eb;
        }

        .edit-btn:hover i {
            color: #3b82f6;
        }

        .reset-btn:hover i {
            color: #f59e0b;
        }

        /* Card Styling */
        .card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            overflow: hidden;
        }

        .table-responsive {
            border-radius: 12px;
        }

        /* Sweet Alert Custom Styles */
        div:where(.swal2-icon).swal2-warning {
            border-color: #8C1867;
            color: #8C1867;
        }

        .adv-seat-popup {
            border-radius: 12px;
            padding: 0;
        }

        .adv-seat-card {
            /* padding: 24px; */
        }

        .adv-seat-card-header {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 12px;
        }

        .adv-seat-card-body {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .adv-seat-card-footer {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .adv-seat-btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }

        .adv-seat-btn-cancel {
            background: #f3f4f6;
            color: #6b7280;
        }

        .adv-seat-btn-cancel:hover {
            background: #e5e7eb;
        }

        .adv-seat-btn-confirm {
            background: #8C1867;
            color: white;
        }

        .adv-seat-btn-confirm:hover {
            background: #7a1459;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .feature-card {
                margin-bottom: 12px;
            }

            .modern-table thead th,
            .modern-table tbody td {
                padding: 12px 16px;
            }
        }
    </style>
@endpush

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

    document.querySelectorAll(".reset-template-btn").forEach((btn) => {

        btn.addEventListener("click", function () {

            const form = this.closest("form");
            const defaultContent = this.dataset.defaultContent || 
                'Default content will be restored.';

            Swal.fire({
                html: `
                    <div class="adv-seat-card">

                        <div class="adv-seat-card-header">
                            Are you sure you want to reset this content
                            to the system default?
                        </div>

                        <div class="adv-seat-card-body">
                            <div class="adv-seat-preview-box">
                                ${defaultContent}
                            </div>
                        </div>

                        <div class="adv-seat-card-footer">
                            <button type="button"
                                    class="adv-seat-btn adv-seat-btn-cancel"
                                    data-action="cancel">
                                Cancel
                            </button>

                            <button type="button"
                                    class="adv-seat-btn adv-seat-btn-confirm"
                                    data-action="confirm">
                                Proceed
                            </button>
                        </div>

                    </div>
                `,
                showConfirmButton: false,
                showCancelButton: false,
                allowOutsideClick: false,
                customClass: {
                    popup: 'adv-seat-popup'
                },
                didOpen: () => {
                    const popup = Swal.getPopup();

                    popup.querySelector('[data-action="cancel"]')
                        .addEventListener('click', () => Swal.close());

                    popup.querySelector('[data-action="confirm"]')
                        .addEventListener('click', () => {
                            Swal.close();
                            form.submit();
                        });
                }
            });

        });

    });

});
</script>

{{-- @endsection --}}