@extends('admin.app')

@section('content')
<div class="container mt-5">
    <h2>Edit Project</h2>

    {{-- Validation Errors --}}
    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        {{-- Project Title --}}
        <div class="mb-3">
            <label>Project Title <span class="text-danger">*</span></label>
            <input type="text" name="title" class="form-control" value="{{ old('title', $project->title) }}" required>
        </div>

        <div class="row">
            {{-- Project Status --}}
            <div class="col-md-6 mb-3">
                <label>Project Status</label>
                <select name="project_status" class="form-control">

    <option value="Available (Booking Open)"
        {{ $project->project_status == 'Available (Booking Open)' ? 'selected' : '' }}>
        🟢 Available (Booking Open)
    </option>

    <option value="Limited Plots Available"
        {{ $project->project_status == 'Limited Plots Available' ? 'selected' : '' }}>
        🟡 Limited Plots Available
    </option>

    <option value="Almost Sold Out"
        {{ $project->project_status == 'Almost Sold Out' ? 'selected' : '' }}>
        🟠 Almost Sold Out
    </option>

    <option value="Sold Out"
        {{ $project->project_status == 'Sold Out' ? 'selected' : '' }}>
        🔴 Sold Out
    </option>

    <option value="Coming Soon"
        {{ $project->project_status == 'Coming Soon' ? 'selected' : '' }}>
        🔵 Coming Soon
    </option>

    <option value="Launching Soon"
        {{ $project->project_status == 'Launching Soon' ? 'selected' : '' }}>
        🟣 Launching Soon
    </option>

</select>
            </div>

            {{-- Property Type --}}
            <div class="col-md-6 mb-3">
                <label>Property Type</label>
                <input type="text"
                       name="property_type"
                       class="form-control"
                       value="{{ old('property_type', $project->property_type) }}"
                       placeholder="Eg: Residential, Commercial">
            </div>
        </div>

        <div class="row">
            {{-- Location --}}
            <div class="col-md-6 mb-3">
                <label>Location</label>
                <input type="text" name="location" class="form-control" value="{{ old('location', $project->location) }}" placeholder="Eg: Sydney, Australia">
            </div>

            {{-- Total Area --}}
            <div class="col-md-6 mb-3">
                <label>Total Area</label>
                <input type="text" name="total_area" class="form-control" value="{{ old('total_area', $project->total_area) }}" placeholder="Eg: 5000 sq ft">
            </div>
        </div>

        {{-- Published At --}}
        <div class="mb-3">
            <label>Published Date</label>
            <input type="date" name="published_at" class="form-control" value="{{ old('published_at', $project->published_at) }}">
        </div>

        <hr>

        <div class="row">
            {{-- Card Image --}}
            <div class="col-md-6 mb-3">
                <label>Card Image</label>
                @if($project->card_image)
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $project->card_image) }}" alt="Current Card Image" style="max-width: 200px; max-height: 150px; border: 1px solid #ddd; border-radius: 4px;">
                        <br>
                        <small class="text-muted">Current image</small>
                    </div>
                @endif
                <input type="file" name="card_image" class="form-control" accept="image/*">
                <small class="text-muted">Leave empty to keep current image. Recommended size: 400x300px</small>
            </div>

            <div class="col-md-6 mb-3">
                <label>Card Image Alt Text</label>
                <input type="text" name="card_alt" class="form-control" value="{{ old('card_alt', $project->card_alt) }}" placeholder="Eg: Project thumbnail">
            </div>
        </div>

        <div class="row">
            {{-- Banner Image --}}
            <div class="col-md-6 mb-3">
                <label>Banner Image</label>
                @if($project->banner_image)
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $project->banner_image) }}" alt="Current Banner Image" style="max-width: 200px; max-height: 150px; border: 1px solid #ddd; border-radius: 4px;">
                        <br>
                        <small class="text-muted">Current image</small>
                    </div>
                @endif
                <input type="file" name="banner_image" class="form-control" accept="image/*">
                <small class="text-muted">Leave empty to keep current image. Recommended size: 1600x600px</small>
            </div>

            {{-- Banner Alt Text --}}
            <div class="col-md-6 mb-3">
                <label>Banner Image Alt Text</label>
                <input type="text" name="banner_alt" class="form-control" value="{{ old('banner_alt', $project->banner_alt) }}" placeholder="Eg: Project banner">
            </div>
        </div>

        <hr>

        {{-- Project Content --}}
        <div class="mb-3">
            <label>Project Content</label>
            <textarea id="editor" name="content">{{ old('content', $project->content) }}</textarea>
        </div>

        <hr>

        {{-- Gallery Images --}}
        <div class="mb-3">
            <label>Gallery Images</label>
            @if($project->gallery_images)
                <div class="mb-2">
                    <strong>Current Images:</strong>
                    <div class="row">
                        @foreach(json_decode($project->gallery_images, true) as $image)
                            <div class="col-md-2 mb-2">
                                <img src="{{ asset('storage/' . $image) }}" alt="Gallery Image" style="max-width: 100%; max-height: 100px; border: 1px solid #ddd; border-radius: 4px;">
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <input type="file" name="gallery_images[]" class="form-control" multiple accept="image/*">
            <small class="text-muted">Leave empty to keep current images. You can select multiple images (Hold Ctrl/Cmd to select multiple)</small>
        </div>

        {{-- YouTube URL --}}
        <div class="mb-3">
            <label>YouTube Video URL</label>
            <input type="url" name="youtube_url" class="form-control" value="{{ old('youtube_url', $project->youtube_url) }}" placeholder="https://www.youtube.com/watch?v=...">
        </div>

        {{-- Brochure PDF --}}
        <div class="mb-3">
            <label>Brochure (PDF)</label>
            @if($project->brochure)
                <div class="mb-2">
                    <a href="{{ asset('storage/' . $project->brochure) }}" target="_blank" class="btn btn-sm btn-info">View Current Brochure</a>
                </div>
            @endif
            <input type="file" name="brochure" class="form-control" accept=".pdf">
            <small class="text-muted">Leave empty to keep current brochure</small>
        </div>

        <hr>

        {{-- FAQs --}}
        <h5>Frequently Asked Questions (FAQ)</h5>

        <div id="faq-wrapper">
            @php
                $faqs = json_decode($project->faqs, true) ?? [];
            @endphp

            @if(empty($faqs))
                <div class="faq-item border rounded p-3 mb-3">
                    <div class="mb-2">
                        <label>Question</label>
                        <input type="text" name="faq_question[]" class="form-control" placeholder="Enter FAQ question">
                    </div>

                    <div class="mb-2">
                        <label>Answer</label>
                        <textarea name="faq_answer[]" class="form-control" rows="3" placeholder="Enter FAQ answer"></textarea>
                    </div>

                    <button type="button" class="btn btn-danger btn-sm remove-faq d-none">Remove</button>
                </div>
            @else
                @foreach($faqs as $faq)
                    <div class="faq-item border rounded p-3 mb-3">
                        <div class="mb-2">
                            <label>Question</label>
                            <input type="text" name="faq_question[]" class="form-control" value="{{ $faq['question'] }}" placeholder="Enter FAQ question">
                        </div>

                        <div class="mb-2">
                            <label>Answer</label>
                            <textarea name="faq_answer[]" class="form-control" rows="3" placeholder="Enter FAQ answer">{{ $faq['answer'] }}</textarea>
                        </div>

                        <button type="button" class="btn btn-danger btn-sm remove-faq">Remove</button>
                    </div>
                @endforeach
            @endif
        </div>

        <button type="button" class="btn btn-primary btn-sm" id="add-faq">+ Add More FAQ</button>

        <hr>

        {{-- SEO & Publishing --}}
        <h5>SEO & Publishing</h5>

        {{-- SEO Title --}}
        <div class="mb-3">
            <label>SEO Title</label>
            <input type="text" name="seo_title" class="form-control" value="{{ old('seo_title', $project->seo_title) }}" placeholder="SEO optimized title">
        </div>

        {{-- Meta Tags --}}
        <div class="mb-3">
            <label>Meta Tags</label>
            <textarea name="meta" class="form-control" rows="6" placeholder="Paste meta tags (OG, Twitter, etc.)">{{ old('meta', $project->meta) }}</textarea>
        </div>

        {{-- Schema --}}
        <div class="mb-3">
            <label>Schema (JSON-LD)</label>
            <textarea name="schema" class="form-control" rows="8" placeholder="Paste schema JSON-LD">{{ old('schema', $project->schema) }}</textarea>
        </div>

        {{-- Status --}}
        <div class="mb-3">
            <label>Status</label>
            <select name="status" class="form-control">
                <option value="draft" {{ old('status', $project->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                <option value="published" {{ old('status', $project->status) == 'published' ? 'selected' : '' }}>Published</option>
            </select>
        </div>

        <button class="btn btn-success">Update Project</button>
        <a href="{{ route('projects.index') }}" class="btn btn-secondary">Back</a>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Initialize TinyMCE without image upload handler
    if (window.tinymce && tinymce.get('editor')) {
        tinymce.get('editor').remove();
    }

    tinymce.init({
        selector: '#editor',
        height: 400,
        menubar: 'file edit insert format',
        plugins: 'lists link code',
        toolbar: 'undo redo | bold italic underline | bullist numlist | link unlink | code',
        toolbar_mode: 'wrap',
        branding: false,
        images_upload_url: false,
        automatic_uploads: false
    });

    // FAQ Add/Remove
    const faqWrapper = document.getElementById('faq-wrapper');
    const addFaqBtn = document.getElementById('add-faq');

    addFaqBtn.addEventListener('click', function () {
        const faqItem = document.createElement('div');
        faqItem.classList.add('faq-item', 'border', 'rounded', 'p-3', 'mb-3');

        faqItem.innerHTML = `
            <div class="mb-2">
                <label>Question</label>
                <input type="text" name="faq_question[]" class="form-control" placeholder="Enter FAQ question">
            </div>

            <div class="mb-2">
                <label>Answer</label>
                <textarea name="faq_answer[]" class="form-control" rows="3" placeholder="Enter FAQ answer"></textarea>
            </div>

            <button type="button" class="btn btn-danger btn-sm remove-faq">Remove</button>
        `;

        faqWrapper.appendChild(faqItem);
        toggleRemoveButtons();
    });

    faqWrapper.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-faq')) {
            e.target.closest('.faq-item').remove();
            toggleRemoveButtons();
        }
    });

    function toggleRemoveButtons() {
        const items = faqWrapper.querySelectorAll('.faq-item');
        items.forEach((item, index) => {
            const btn = item.querySelector('.remove-faq');
            if (btn) {
                btn.classList.toggle('d-none', index === 0);
            }
        });
    }

    // Initialize remove buttons on load
    toggleRemoveButtons();
});
</script>
@endpush