@extends('client.layouts.dashboard')

@section('title', 'Edit Template')

@section('content')
<div class="mb-4">
    <a href="{{ route('client.templates') }}" class="text-decoration-none">
        <i class="bi bi-arrow-left me-2"></i>Back to Templates
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-pencil me-2"></i>Edit Template</h5>
                <span class="badge bg-{{ $template->type === 'sms' ? 'primary' : ($template->type === 'call' ? 'success' : 'success') }}">
                    {{ ucfirst($template->type) }}
                </span>
            </div>
            <div class="card-body p-4">
                @if($template->isDerived())
                <div class="d-flex align-items-center gap-2 mb-4">
                    <button type="button" class="info-hint" data-bs-toggle="popover" data-bs-content="This template was derived from a SuperAdmin template. You can customize the content for your organization.">
                        <i class="bi bi-info-circle"></i>
                    </button>
                    <small class="text-muted">Derived from SuperAdmin template</small>
                </div>
                @endif

                <form method="POST" action="{{ route('client.templates.update', $template->id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    @php $supportsWhatsAppMedia = in_array($template->channel, ['whatsapp', 'both'], true); @endphp

                    <div class="mb-3">
                        <label class="form-label">Template Name</label>
                        <input type="text" class="form-control" value="{{ $template->name }}" readonly disabled>
                        <div class="form-text">Template name is managed by SuperAdmin</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Message Content <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('content') is-invalid @enderror" name="content" rows="6" required>{{ old('content', $template->content) }}</textarea>
                        @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">
                            Available placeholders: <code>{name}</code>, <code>{phone}</code>, <code>{date}</code>, <code>{time}</code>
                        </div>
                    </div>

                    @if($supportsWhatsAppMedia)
                    <div class="mb-3 mt-4 pt-3 border-top">
                        <h6 class="mb-3"><i class="bi bi-whatsapp text-success me-1"></i> WhatsApp Media</h6>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="media_type" class="form-label">Media Type</label>
                                <select class="form-select @error('media_type') is-invalid @enderror" id="media_type" name="media_type">
                                    <option value="">None</option>
                                    <option value="image" {{ old('media_type', $template->media_type) === 'image' ? 'selected' : '' }}>Image</option>
                                    <option value="video" {{ old('media_type', $template->media_type) === 'video' ? 'selected' : '' }}>Video</option>
                                    <option value="document" {{ old('media_type', $template->media_type) === 'document' ? 'selected' : '' }}>Document</option>
                                </select>
                                @error('media_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-8">
                                <label for="media_url" class="form-label">Media URL (Optional)</label>
                                <input type="url" class="form-control @error('media_url') is-invalid @enderror"
                                       id="media_url" name="media_url"
                                       value="{{ old('media_url', $template->media_url) }}"
                                       placeholder="https://example.com/file.pdf">
                                <div class="form-text">Use URL or upload a file. If both are provided, uploaded file is used.</div>
                                @error('media_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="media_file" class="form-label">Upload File (Optional)</label>
                                <input type="file" class="form-control @error('media_file') is-invalid @enderror"
                                       id="media_file" name="media_file"
                                       accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.csv">
                                <div class="form-text">Supported: image, video, and documents (max 100MB).</div>
                                @error('media_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            @if($template->media_url)
                            <div class="col-12">
                                <div class="alert alert-secondary py-2 px-3 mb-2">
                                    <small>
                                        Current media:
                                        <a href="{{ $template->media_url }}" target="_blank" rel="noopener">Open current file</a>
                                    </small>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="remove_media" name="remove_media" value="1" {{ old('remove_media') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="remove_media">Remove current media</label>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div id="media-preview" class="mt-3" style="display: none;">
                            <img id="media-preview-img" src="" alt="Preview" class="img-thumbnail" style="max-height: 150px; display: none;">
                            <div id="media-preview-video" class="badge bg-info" style="display: none;"><i class="bi bi-camera-video"></i> Video file</div>
                            <div id="media-preview-doc" class="badge bg-secondary" style="display: none;"><i class="bi bi-file-earmark"></i> Document file</div>
                            <div id="media-preview-upload" class="small text-muted mt-2" style="display: none;"></div>
                        </div>
                    </div>
                    @else
                    <div class="alert alert-light border mt-4 mb-0">
                        <small class="text-muted"><i class="bi bi-info-circle me-1"></i>Media upload is available only for templates with WhatsApp or Both channel.</small>
                    </div>
                    @endif

                    <div class="mt-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" id="is_active" {{ old('is_active', $template->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">Template Active</label>
                        </div>
                        <div class="form-text">Inactive templates won't be used for auto-replies</div>
                    </div>

                    <div class="mt-4 pt-3 border-top d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-2"></i>Save Changes
                        </button>
                        <a href="{{ route('client.templates') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Preview Card -->
        <div class="table-card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-eye me-2"></i>Live Preview</h6>
            </div>
            <div class="card-body">
                <div class="bg-light rounded p-3">
                    <div class="small text-muted mb-2">Message Preview (with sample data):</div>
                    <div id="messagePreview" class="border-start border-3 border-primary ps-3">
                        {{ $template->content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Live preview
    const contentTextarea = document.querySelector('textarea[name="content"]');
    const previewDiv = document.getElementById('messagePreview');

    const mediaType = document.getElementById('media_type');
    const mediaUrl = document.getElementById('media_url');
    const mediaFile = document.getElementById('media_file');
    const mediaPreview = document.getElementById('media-preview');
    const mediaPreviewImg = document.getElementById('media-preview-img');
    const mediaPreviewVideo = document.getElementById('media-preview-video');
    const mediaPreviewDoc = document.getElementById('media-preview-doc');
    const mediaPreviewUpload = document.getElementById('media-preview-upload');

    const sampleData = {
        '{name}': 'John Doe',
        '{phone}': '+1234567890',
        '{date}': new Date().toLocaleDateString(),
        '{time}': new Date().toLocaleTimeString()
    };

    function updatePreview() {
        let content = contentTextarea.value;
        for (const [placeholder, value] of Object.entries(sampleData)) {
            content = content.replaceAll(placeholder, `<strong class="text-primary">${value}</strong>`);
        }
        previewDiv.innerHTML = content.replace(/\n/g, '<br>');
    }

    function updateMediaPreview() {
        if (!mediaType || !mediaPreview) return;

        const type = mediaType.value;
        const url = mediaUrl ? mediaUrl.value : '';
        const file = mediaFile && mediaFile.files && mediaFile.files.length ? mediaFile.files[0] : null;

        mediaPreview.style.display = 'none';
        mediaPreviewImg.style.display = 'none';
        mediaPreviewVideo.style.display = 'none';
        mediaPreviewDoc.style.display = 'none';
        mediaPreviewUpload.style.display = 'none';

        if (file) {
            mediaPreviewUpload.textContent = `Selected file: ${file.name}`;
            mediaPreviewUpload.style.display = 'block';
            if (type === 'video') {
                mediaPreviewVideo.style.display = 'inline-block';
            } else if (type === 'document') {
                mediaPreviewDoc.style.display = 'inline-block';
            }
            mediaPreview.style.display = 'block';
            return;
        }

        if (url && type === 'image') {
            mediaPreviewImg.src = url;
            mediaPreviewImg.style.display = 'block';
            mediaPreview.style.display = 'block';
        } else if (url && type === 'video') {
            mediaPreviewVideo.style.display = 'inline-block';
            mediaPreview.style.display = 'block';
        } else if (url && type === 'document') {
            mediaPreviewDoc.style.display = 'inline-block';
            mediaPreview.style.display = 'block';
        }
    }

    contentTextarea.addEventListener('input', updatePreview);
    mediaType && mediaType.addEventListener('change', updateMediaPreview);
    mediaUrl && mediaUrl.addEventListener('input', updateMediaPreview);
    mediaFile && mediaFile.addEventListener('change', updateMediaPreview);

    updatePreview();
    updateMediaPreview();
</script>
@endsection