@extends('layouts.app')

@section('title', 'Edit WhatsApp Template - Tiqkets')
@section('page-title', 'Edit WhatsApp Template: ' . $whatsapp->template_name)

@section('header-action')
    <a href="{{ route('restaurant-admin.whatsapp.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back to Templates
    </a>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-edit text-primary me-2"></i>
                        Edit Template Content
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('restaurant-admin.whatsapp.update', $whatsapp) }}" method="POST"
                          enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Template Name</label>
                                <input type="text" class="form-control bg-light" value="{{ $whatsapp->template_name }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Message Type</label>
                                <input type="text" class="form-control bg-light" value="{{ ucfirst($whatsapp->message_type) }}" readonly>
                            </div>
                        </div>

                        @if($whatsapp->message_type === 'text')
                            <div class="mb-3">
                                <label for="message_content" 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="8"
                                          placeholder="Enter your message content" required>{{ old('message_content', $whatsapp->message_content) }}</textarea>
                                @error('message_content')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Maximum 1000 characters. Use clear and friendly language.
                                </div>
                            </div>

                            <!-- Available Variables -->
                            <div class="alert alert-info">
                                <h6 class="alert-heading">
                                    <i class="fas fa-code me-2"></i>Available Variables
                                </h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <small>
                                            <code>{customer_name}</code> - Customer's name<br>
                                            <code>{booking_id}</code> - Booking reference ID<br>
                                            <code>{guest_count}</code> - Number of guests<br>
                                            <code>{booking_date}</code> - Booking date<br>
                                        </small>
                                    </div>
                                    <div class="col-md-6">
                                        <small>
                                            <code>{booking_time}</code> - Booking time<br>
                                            <code>{branch_name}</code> - Restaurant branch name<br>
                                            <code>{table_no}</code> - Table number<br>
                                            <code>{wait_time}</code> - Estimated wait time<br>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="mb-3">
                                <label for="message_content" class="form-label fw-semibold">
                                    Upload {{ ucfirst($whatsapp->message_type) }} *
                                </label>

                                @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"
                                       required>
                                @error('message_content')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

                                <div class="form-text">
                                    @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 class="mt-4 d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Update Template
                            </button>
                            <a href="{{ route('restaurant-admin.whatsapp.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>

                            @if($whatsapp->message_content !== $whatsapp->default_content)
                                <form action="{{ route('restaurant-admin.whatsapp.reset', $whatsapp) }}"
                                      method="POST" class="d-inline ms-auto">
                                    @csrf
                                    <button type="submit"
                                            class="btn btn-outline-warning"
                                            onclick="return confirm('Are you sure you want to reset this template to default?')">
                                        <i class="fas fa-undo me-1"></i> Reset to Default
                                    </button>
                                </form>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Template Information -->
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        Template Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="d-block text-muted mb-2">Default Content:</strong>
                        <div class="p-3 bg-light rounded border">
                            <small>{{ $whatsapp->default_content }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <strong class="d-block text-muted mb-2">Status:</strong>
                        <span class="badge bg-success">
                            <i class="fas fa-check-circle me-1"></i> Active
                        </span>
                    </div>

                    <div class="mb-3">
                        <strong class="d-block text-muted mb-2">Last Updated:</strong>
                        <p class="mb-0">
                            <i class="far fa-clock me-1"></i>
                            {{ $whatsapp->updated_at->format('M d, Y H:i') }}
                        </p>
                    </div>

                    @if($whatsapp->message_content !== $whatsapp->default_content)
                        <div class="alert alert-info mb-0">
                            <i class="fas fa-edit me-2"></i>
                            <strong>Modified:</strong> This template has been customized.
                        </div>
                    @endif
                </div>
            </div>

            <!-- Usage Information -->
            <div class="card shadow-sm mb-3 border-primary">
                <div class="card-body">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-paper-plane me-2"></i>
                        When is this sent?
                    </h6>
                    <p class="small mb-0">
                        This template is automatically sent to customers when:
                        <strong class="d-block mt-2">{{ $whatsapp->template_name }}</strong>
                    </p>
                </div>
            </div>

            <!-- Tips -->
            <div class="card shadow-sm border-warning">
                <div class="card-body">
                    <h6 class="text-warning mb-3">
                        <i class="fas fa-lightbulb me-2"></i>
                        Best Practices
                    </h6>
                    <ul class="small mb-0 ps-3">
                        <li class="mb-2">Keep messages clear and concise</li>
                        <li class="mb-2">Use friendly and professional language</li>
                        <li class="mb-2">Include relevant booking details</li>
                        <li class="mb-2">Test variables work correctly</li>
                        <li>Reset to default if unsure</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Character counter for text messages
        const textarea = document.getElementById('message_content');
        if (textarea && textarea.tagName === 'TEXTAREA') {
            const counter = document.createElement('div');
            counter.className = 'form-text text-end mt-2';
            textarea.parentNode.appendChild(counter);

            function updateCounter() {
                const length = textarea.value.length;
                counter.innerHTML = `<i class="fas fa-keyboard me-1"></i>${length}/1000 characters`;
                counter.className = `form-text text-end mt-2 ${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);
                    console.log('File selected:', file.name, fileSize + ' MB', file.type);

                    // Show file preview info
                    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);
                }
            });
        }
    });
</script>
@endpush