@extends('layouts.app')

@section('title', 'Edit WhatsApp Template - Tiqkets')
@section('page-title', 'Edit WhatsApp Template')

@section('header-action')
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary fw-semibold text-dark" id="resetBtn">
            {{-- <i class="fas fa-undo me-1"></i>  --}}
            Reset to Default
        </button>
        <a href="{{ route('restaurant-admin.whatsapp.index') }}" class="btn btn-outline-secondary fw-semibold text-dark">
            {{-- <i class="fas fa-times me-1"></i>  --}}
            Cancel & Go Back
        </a>
        <button type="submit" form="whatsappTemplateForm" class="btn btn-primary">
            {{-- <i class="fas fa-check me-1"></i>  --}}
            Update Template
        </button>
    </div>
@endsection
<style>
    .variable-item {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-between;
        align-items: center;
    }

    .fs-14 {
        font-size: 14px !important;
        color: #000000;
    }
</style>
@section('content')
    <div class="row g-4">
        <!-- Left Column - Template Info & Content -->
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body p-4">
                    <!-- Template Header Info -->
                    <div class="row g-3 mb-4 pb-4">
                        <div class="col-2">
                            <label class="form-label text-muted small mb-1">Template Name</label>
                            <div class="fs-14">{{ $whatsapp->template_name }}</div>
                        </div>
                        <div class="col-1">
                            <label class="form-label text-muted small mb-1">Type</label>
                            <div class="fs-14">{{ ucfirst($whatsapp->message_type) }}</div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small mb-1">When is this sent?</label>
                            <div class="fs-14">This template is automatically sent to customers when:
                                {{ $whatsapp->template_name }}</div>
                        </div>
                        <div class="col-2">
                            <label class="form-label text-muted small mb-1">Last Updated</label>
                            <div class="fs-14 small">{{ $whatsapp->updated_at->format('M d, Y H:i') }}</div>
                        </div>
                        <div class="col-1">
                            <label class="form-label text-muted small mb-1">Status</label>
                            <div class="fs-14">
                                {{-- <span class="badge bg-success"> --}}
                                Active
                                {{-- </span> --}}
                            </div>
                        </div>
                    </div>

                    <!-- Message Content Form -->
                    <form id="whatsappTemplateForm" action="{{ route('restaurant-admin.whatsapp.update', $whatsapp) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="mb-4">
                            <label class="form-label fw-semibold mb-2">Message content</label>

                            @if ($whatsapp->message_type === 'text')
                                <textarea class="form-control @error('message_content') is-invalid @enderror" id="message_content"
                                    name="message_content" rows="12" placeholder="Enter your message content"
                                    style="font-size: 14px; line-height: 1.6;" required>{{ old('message_content', $whatsapp->message_content) }}</textarea>

                                @error('message_content')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Maximum 1000 characters
                                    </small>
                                    <small id="charCount" class="text-muted">0/1000 characters</small>
                                </div>
                            @else
                                <div class="mb-3">
                                    @if ($whatsapp->message_content && Storage::disk('public')->exists($whatsapp->message_content))
                                        <div class="alert alert-info mb-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <i
                                                        class="fas
                                                        @if ($whatsapp->message_type === 'image') fa-image
                                                        @elseif($whatsapp->message_type === 'video') fa-video
                                                        @elseif($whatsapp->message_type === 'document') fa-file
                                                        @elseif($whatsapp->message_type === 'sticker') fa-face-smile @endif
                                                        me-2">
                                                    </i>
                                                    Current file:
                                                    <strong>{{ basename($whatsapp->message_content) }}</strong>
                                                </div>
                                                <a href="{{ Storage::url($whatsapp->message_content) }}" target="_blank"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye me-1"></i> View
                                                </a>
                                            </div>
                                        </div>
                                    @endif

                                    <input type="file"
                                        class="form-control @error('message_content') is-invalid @enderror"
                                        id="message_content" name="message_content"
                                        accept="
                                           @if ($whatsapp->message_type === 'image') image/*
                                           @elseif($whatsapp->message_type === 'video') video/*
                                           @elseif($whatsapp->message_type === 'document') .pdf,.doc,.docx,.txt
                                           @elseif($whatsapp->message_type === 'sticker') .webp @endif">

                                    @error('message_content')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror

                                    <div class="form-text mt-2">
                                        @if ($whatsapp->message_type === 'image')
                                            <i class="fas fa-info-circle me-1"></i>
                                            Supported formats: JPG, JPEG, PNG, GIF (Max: 5MB)
                                        @elseif($whatsapp->message_type === 'video')
                                            <i class="fas fa-info-circle me-1"></i>
                                            Supported formats: MP4, MOV, AVI (Max: 20MB)
                                        @elseif($whatsapp->message_type === 'document')
                                            <i class="fas fa-info-circle me-1"></i>
                                            Supported formats: PDF, DOC, DOCX, TXT (Max: 10MB)
                                        @elseif($whatsapp->message_type === 'sticker')
                                            <i class="fas fa-info-circle me-1"></i>
                                            Supported format: WEBP (Max: 1MB)
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Column - Variables & Best Practices -->
        <div class="col-lg-4">
            <!-- Available Variables -->
            @if ($whatsapp->message_type === 'text')
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body p-4">
                        <h6 class="fw-bold mb-3">
                            {{-- <i class="fas fa-code text-primary me-2"></i> --}}
                            Available Variables
                        </h6>

                        <div class="variable-list">
                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ customer_name }}</small>
                                </div>
                                <div class="col"><small class="text-muted">Customer's name</small></div>

                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ booking_id }}</small>
                                </div>
                                <div class="col"><small class="text-muted">Booking reference ID</small></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ guest_count }}</small>
                                </div>
                                <div class="col"><small class="text-muted">Number of guests</small></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ booking_date }}</small>
                                </div>
                                <div class="col"><small class="text-muted">Booking date</small></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ booking_time }}</small>
                                </div>
                                <div class="col"><small class="text-muted">Booking time</small></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ branch_name }}</small>
                                </div>
                                <div class="col"><small class="text-muted">Restaurant branch name</small></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">@{{ table_no }}</small>
                                </div>
                                <div class="col"> <small class="text-muted">Table number</small></div>
                            </div>

                            <div class="row mb-3">
                                <div class="col"><small class="text-muted text-primary">\n</small></div>
                                <div class="col"><small class="text-muted">For New Line (Space Event)</small></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <h6 class="fw-bold mb-3">
                            {{-- <i class="fas fa-lightbulb text-warning me-2"></i> --}}
                            Best Practices
                        </h6>

                        <ul class="list mb-0">
                            <li class="mb-2">
                                {{-- <i class="fas fa-check text-success me-2"></i> --}}
                                <small>Keep messages clear and concise</small>
                            </li>
                            <li class="mb-2">
                                {{-- <i class="fas fa-check text-success me-2"></i> --}}
                                <small>Use friendly and professional language</small>
                            </li>
                            <li class="mb-2">
                                {{-- <i class="fas fa-check text-success me-2"></i> --}}
                                <small>Include relevant booking details</small>
                            </li>
                            <li class="mb-2">
                                {{-- <i class="fas fa-check text-success me-2"></i> --}}
                                <small>Test variables work correctly</small>
                            </li>
                            <li>
                                {{-- <i class="fas fa-check text-success me-2"></i> --}}
                                <small>Reset to default if unsure</small>
                            </li>
                        </ul>
                    </div>
                </div>
            @endif

            <!-- Best Practices -->

        </div>
    </div>
@endsection

@push('styles')
    <style>
        .card {
            border-radius: 12px;
        }

        .variable-item code {
            font-size: 13px;
            color: #8C1867;
            border: 1px solid #e5e7eb;
        }

        .form-control:focus {
            border-color: #8C1867;
            box-shadow: 0 0 0 0.2rem rgba(140, 24, 103, 0.15);
        }

        textarea.form-control {
            resize: vertical;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Character counter for text messages
            const textarea = document.getElementById('message_content');
            const charCount = document.getElementById('charCount');

            if (textarea && textarea.tagName === 'TEXTAREA' && charCount) {
                function updateCounter() {
                    const length = textarea.value.length;
                    charCount.textContent = `${length}/1000 characters`;
                    charCount.className = length > 1000 ? 'text-danger' : 'text-muted';
                }

                textarea.addEventListener('input', updateCounter);
                updateCounter();
            }

            // File input preview
            const fileInput = document.getElementById('message_content');
            if (fileInput && fileInput.type === 'file') {
                fileInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const fileSize = (file.size / 1024 / 1024).toFixed(2);

                        const existingPreview = document.getElementById('file-preview-info');
                        if (existingPreview) {
                            existingPreview.remove();
                        }

                        const previewDiv = document.createElement('div');
                        previewDiv.id = 'file-preview-info';
                        previewDiv.className = 'alert alert-success mt-2';
                        previewDiv.innerHTML = `
                        <i class="fas fa-check-circle me-2"></i>
                        <strong>File selected:</strong> ${file.name} (${fileSize} MB)
                    `;
                        fileInput.parentNode.appendChild(previewDiv);
                    }
                });
            }

            // Reset button handler
            // Reset button handler
            const resetBtn = document.getElementById('resetBtn');

            if (resetBtn) {
                resetBtn.addEventListener('click', function() {

                    @if ($whatsapp->message_content !== $whatsapp->default_content)

                        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">
                            {{ $whatsapp->default_content }}
                        </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();

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

                                // Proceed
                                popup.querySelector('[data-action="confirm"]')
                                    .addEventListener('click', () => {

                                        const form = document.createElement('form');
                                        form.method = 'POST';
                                        form.action =
                                            '{{ route('restaurant-admin.whatsapp.reset', $whatsapp) }}';

                                        form.innerHTML = `
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        `;

                                        document.body.appendChild(form);
                                        form.submit();
                                    });
                            }
                        });
                    @else
                        Swal.fire({
                            html: `
        <div class="adv-seat-card">

            <div class="adv-seat-card-header">
                Already Using Default
            </div>

            <div class="adv-seat-card-body">
                This template is already using the system default content.
                No changes are required.
            </div>

            <div class="adv-seat-card-footer">
                <button type="button"
                        class="adv-seat-btn adv-seat-btn-confirm"
                        data-action="ok">
                    Okay
                </button>
            </div>

        </div>
    `,
                            showConfirmButton: false,
                            showCancelButton: false,
                            allowOutsideClick: true,
                            customClass: {
                                popup: 'adv-seat-popup'
                            },
                            didOpen: () => {
                                const popup = Swal.getPopup();
                                popup.querySelector('[data-action="ok"]')
                                    .addEventListener('click', () => Swal.close());
                            }
                        });
                    @endif
                });
            }


            // Form submission handler
            const form = document.getElementById('whatsappTemplateForm');
            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    Swal.fire({
                        html: `
                        <div class="adv-seat-card">
                            <div class="adv-seat-card-header">
                                Save Changes?
                            </div>
                            <div class="adv-seat-card-body">
                                Are you sure you want to update this WhatsApp template?
                                Your changes will be applied immediately.
                            </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">
                                    Yes, update
                                </button>
                            </div>
                        </div>
                    `,
                        showConfirmButton: false,
                        showCancelButton: false,
                        customClass: {
                            popup: 'adv-seat-popup'
                        }
                    });

                    const popup = Swal.getPopup();
                    popup.querySelector('[data-action="cancel"]').onclick = () => Swal.close();
                    popup.querySelector('[data-action="confirm"]').onclick = () => {
                        Swal.close();
                        form.submit();
                    };
                });
            }
        });
    </script>
@endpush