@extends('admin.app')

@section('content')
<div class="container mt-5">
    <h2>Add 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.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- 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') }}" 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)"
            {{ old('project_status') == 'Available (Booking Open)' ? 'selected' : '' }}>
            🟢 Available (Booking Open)
        </option>

        <option value="Limited Plots Available"
            {{ old('project_status') == 'Limited Plots Available' ? 'selected' : '' }}>
            🟡 Limited Plots Available
        </option>

        <option value="Almost Sold Out"
            {{ old('project_status') == 'Almost Sold Out' ? 'selected' : '' }}>
            🟠 Almost Sold Out
        </option>

        <option value="Sold Out"
            {{ old('project_status') == 'Sold Out' ? 'selected' : '' }}>
            🔴 Sold Out
        </option>

        <option value="Coming Soon"
            {{ old('project_status') == 'Coming Soon' ? 'selected' : '' }}>
            🔵 Coming Soon
        </option>

        <option value="Launching Soon"
            {{ old('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') }}"
               placeholder="Eg: Residential, Commercial">
    </div>

</div>
       <div class="row">

        {{-- Location --}}
            <div class="col-md-6 mb-3">

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

        {{-- Total Area --}}
            <div class="col-md-6 mb-3">

        <div class="mb-3">
            <label>Total Area</label>
            <input type="text" name="total_area" class="form-control" value="{{ old('total_area') }}" placeholder="Eg: 5000 sq ft">
        </div>
</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') }}">
        </div>

        <hr>

           <div class="row">
    {{-- Card Image --}}
                    <div class="col-md-6 mb-3">

        <div class="mb-3">
            <label>Card Image</label>
            <input type="file" name="card_image" class="form-control" accept="image/*">
            <small class="text-muted">Recommended size: 400x300px</small>
        </div></div>
            <div class="col-md-6 mb-3">

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

    {{-- Banner Image --}}
    <div class="col-md-6 mb-3">
        <label>Banner Image</label>
        <input type="file"
               name="banner_image"
               class="form-control"
               accept="image/*">

        <small class="text-muted">
            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') }}"
               placeholder="Eg: Project banner">
    </div>

</div>
        <hr>

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

        <hr>

        {{-- Gallery Images --}}
        <div class="mb-3">
            <label>Gallery Images</label>
            <input type="file" name="gallery_images[]" class="form-control" multiple accept="image/*">
            <small class="text-muted">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') }}" placeholder="https://www.youtube.com/watch?v=...">
        </div>

        {{-- Brochure PDF --}}
        <div class="mb-3">
            <label>Brochure (PDF)</label>
            <input type="file" name="brochure" class="form-control" accept=".pdf">
        </div>

        <hr>

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

        <div id="faq-wrapper">
            <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>
        </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') }}" 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') }}</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') }}</textarea>
        </div>

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

        <button class="btn btn-success">Save 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,
        // Remove image upload handler
        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