@extends('layouts.app')

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

@section('content')
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="card-title mb-0">Edit Template Content</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('food-court.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">Template Name</label>
                                <input type="text" class="form-control" value="{{ $whatsapp->template_name }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Message Type</label>
                                <input type="text" class="form-control" value="{{ ucfirst($whatsapp->message_type) }}" readonly>
                            </div>
                        </div>

                        @if($whatsapp->message_type === 'text')
                            <div class="mb-3">
                                <label for="message_content" class="form-label">Message Content *</label>
                                <textarea class="form-control @error('message_content') is-invalid @enderror"
                                          id="message_content" name="message_content" rows="6"
                                          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">
                                    Maximum 1000 characters. Use clear and friendly language.
                                </div>
                            </div>
                        @else
                            <div class="mb-3">
                                <label for="message_content" class="form-label">
                                    Upload {{ ucfirst($whatsapp->message_type) }} *
                                </label>

                                @if($whatsapp->message_content && Storage::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')
                                        Supported formats: JPG, JPEG, PNG, GIF (Max: 5MB)
                                    @elseif($whatsapp->message_type === 'video')
                                        Supported formats: MP4, MOV, AVI (Max: 20MB)
                                    @elseif($whatsapp->message_type === 'document')
                                        Supported formats: PDF, DOC, DOCX, TXT (Max: 10MB)
                                    @elseif($whatsapp->message_type === 'sticker')
                                        Supported format: WEBP (Max: 1MB)
                                    @endif
                                </div>
                            </div>
                        @endif

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Update Template
                            </button>
                            <a href="{{ route('food-court.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('food-court.whatsapp.reset', $whatsapp) }}"
                                      method="POST" class="d-inline">
                                    @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">
                <div class="card-header">
                    <h5 class="card-title mb-0">Template Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Default Content:</strong>
                        <p class="mt-1 p-2 bg-light rounded">
                            {{ $whatsapp->default_content }}
                        </p>
                    </div>

                    <div class="mb-3">
                        <strong>Status:</strong>
                        <span class="badge bg-success">Active</span>
                    </div>

                    <div class="mb-3">
                        <strong>Last Updated:</strong>
                        <p class="mb-0">{{ $whatsapp->updated_at->format('M d, Y H:i') }}</p>
                    </div>

                    <!-- Usage Information -->
                    <div class="alert alert-info mt-3">
                        <h6><i class="fas fa-info-circle me-2"></i>Usage</h6>
                        <p class="small mb-0">
                            This template is automatically sent to customers when:
                            <strong>{{ $whatsapp->template_name }}</strong>
                        </p>
                    </div>

                    <!-- Tips -->
                    <div class="alert alert-warning mt-3">
                        <h6><i class="fas fa-lightbulb me-2"></i>Tips</h6>
                        <ul class="small mb-0">
                            <li>Keep messages clear and concise</li>
                            <li>Use friendly and professional language</li>
                            <li>Test your changes before saving</li>
                            <li>Reset to default if unsure</li>
                        </ul>
                    </div>
                </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) {
            const counter = document.createElement('div');
            counter.className = 'form-text text-end';
            textarea.parentNode.appendChild(counter);

            function updateCounter() {
                const length = textarea.value.length;
                counter.textContent = `${length}/1000 characters`;
                counter.className = `form-text text-end ${length > 1000 ? 'text-danger' : ''}`;
            }

            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) {
                    console.log('File selected:', file.name, file.size, file.type);
                }
            });
        }
    });
</script>
@endpush