@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" id="resetBtn">
            Reset to Default
        </button>

        <a href="{{ route('food-court.whatsapp.index') }}" class="btn btn-outline-secondary fw-semibold">
            Cancel & Go Back
        </a>

        <button type="submit" form="whatsappTemplateForm" class="btn btn-primary">
            Update Template
        </button>
    </div>
@endsection

@section('content')
    <div class="row g-4">
        <!-- LEFT COLUMN -->
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body p-4">

                    <!-- TEMPLATE INFO -->
                    <div class="row g-3 mb-4 pb-4 border-bottom">
                        <div class="col-md-3">
                            <label class="form-label text-muted small">Template Name</label>
                            <div class="fw-semibold">{{ $whatsapp->template_name }}</div>
                        </div>

                        <div class="col-md-1">
                            <label class="form-label text-muted small">Type</label>
                            <div>{{ ucfirst($whatsapp->message_type) }}</div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label text-muted small">When is this sent?</label>
                            <div class="small">
                                Automatically sent when
                                <strong>{{ $whatsapp->template_name }}</strong>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label text-muted small">Last Updated</label>
                            <div class="small">
                                {{ $whatsapp->updated_at->format('M d, Y H:i') }}
                            </div>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label text-muted small">Status</label>
                            <div class="">Active</div>
                        </div>
                    </div>

                    <!-- FORM -->
                    <form id="whatsappTemplateForm" action="{{ route('food-court.whatsapp.update', $whatsapp) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- TEXT TEMPLATE -->
                        @if ($whatsapp->message_type === 'text')
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Message Content</label>

                                <textarea class="form-control @error('message_content') is-invalid @enderror" id="message_content"
                                    name="message_content" rows="12" maxlength="1000" 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 mt-2">
                                    <small class="text-muted">
                                        Maximum 1000 characters
                                    </small>
                                    <small id="charCount" class="text-muted"></small>
                                </div>
                            </div>
                        @else
                            <!-- MEDIA TEMPLATE -->
                            <div class="mb-4">
                                @if ($whatsapp->message_content && Storage::exists($whatsapp->message_content))
                                    <div class="alert alert-info d-flex justify-content-between align-items-center">
                                        <div>
                                            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">
                                            View
                                        </a>
                                    </div>
                                @endif

                                <input type="file" class="form-control @error('message_content') is-invalid @enderror"
                                    name="message_content" id="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>
                        @endif
                    </form>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN -->
        <div class="col-lg-4">
            @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">Available Variables</h6>

                        <div class="small text-muted">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ customer_name }}</span>
                                <span>Customer name</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ booking_id }}</span>
                                <span>Booking ID</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ guest_count }}</span>
                                <span>Guests</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ booking_date }}</span>
                                <span>Date</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ booking_time }}</span>
                                <span>Time</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ branch_name }}</span>
                                <span>Branch</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-primary">@{{ table_no }}</span>
                                <span>Table</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-primary">\n</span>
                                <span>New line</span>
                            </div>
                        </div>
                    </div>
                     <div class="card-body p-4">
                    <h6 class="fw-bold mb-3">Best Practices</h6>
                    <ul class="small mb-0">
                        <li>Keep messages short and clear</li>
                        <li>Use friendly language</li>
                        <li>Include booking details</li>
                        <li>Verify variables</li>
                        <li>Reset if unsure</li>
                    </ul>
                </div>
                </div>
            @endif

            
        </div>
    </div>
@endsection

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

            /* =====================================================
               CHARACTER COUNTER (TEXT TEMPLATE)
            ===================================================== */
            const textarea = document.getElementById('message_content');
            const charCount = document.getElementById('charCount');

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

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

            /* =====================================================
               RESET TO DEFAULT CONFIRMATION
            ===================================================== */
            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('food-court.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
                });
            }

            /* =====================================================
               UPDATE TEMPLATE CONFIRMATION
            ===================================================== */
            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?
                            Changes will apply 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,
                        allowOutsideClick: false,
                        customClass: {
                            popup: 'adv-seat-popup'
                        },
                        didOpen: () => {
                            const popup = Swal.getPopup();

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

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

        });
    </script>
@endpush