@extends('layouts.admin')

@section('title', 'Add Diamond Gallery')

@section('breadcrumbs', 'Gallery')

@section('second-breadcrumb')
    <li>Create New Lighting Project</li>
@endsection

@section('css')
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        .card-wedding {
            background: #1a1a1a;
            border-radius: 20px;
            border: 1px solid #ffd700; /* Diamond Gold */
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            color: #fff;
            overflow: hidden;
        }
        .form-header {
            background: linear-gradient(135deg, #222, #000);
            padding: 30px;
            text-align: center;
            border-bottom: 2px solid #ffd700;
        }
        .form-header h3 {
            font-family: 'Playfair Display', serif;
            color: #ffd700;
            letter-spacing: 2px;
            margin-bottom: 0;
        }
        .label-gold {
            color: #ffd700;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .form-control-wedding {
            background: #222 !important;
            border: 1px solid #444 !important;
            color: #fff !important;
            border-radius: 10px;
            padding: 12px;
        }
        .form-control-wedding:focus {
            border-color: #ffd700 !important;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
        }
        .btn-gold {
            background: linear-gradient(to right, #ffd700, #b8860b);
            color: #000;
            font-weight: bold;
            border: none;
            padding: 12px 25px;
            border-radius: 30px;
            transition: 0.3s;
        }
        .btn-gold:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
            color: #000;
        }
        .btn-draft {
            background: transparent;
            color: #ffd700;
            border: 1px solid #ffd700;
            border-radius: 30px;
            padding: 12px 25px;
        }
    </style>
@endsection

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card card-wedding">
                <div class="form-header">
                    <h3><i class="fa fa-diamond"></i> DIAMOND LIGHTING PROJECT</h3>
                    <p class="text-muted small">Create an illuminating experience</p>
                </div>
                
                <div class="card-body p-5">
                    <form action="{{route('gallery.store')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-7">
                                <div class="mb-4">
                                    <label class="label-gold">Event Name / Title</label>
                                    <input type="text" name="title" placeholder="e.g. Royal Wedding Lighting..." class="form-control form-control-wedding @error('title') is-invalid @enderror" value="{{old('title')}}" required>
                                    @error('title') <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>

                                <div class="mb-4">
                                    <label class="label-gold">Gallery Image (Lighting Shots)</label>
                                    <div class="custom-file">
                                        <input type="file" name="image" class="form-control form-control-wedding @error('image') is-invalid @enderror" id="imageInput" required>
                                    </div>
                                    <small class="text-muted italic mt-2 d-block">*High-resolution images will be automatically optimized.</small>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div id="preview-container" class="text-center p-3" style="border: 2px dashed #444; border-radius: 15px; height: 100%; display: flex; align-items: center; justify-content: center; background: #111;">
                                    <p id="placeholder-text" class="text-muted">Image Preview</p>
                                    <img id="imagePreview" src="#" alt="preview" style="display:none; max-width: 100%; border-radius: 10px; box-shadow: 0 0 15px rgba(255,215,0,0.3);">
                                </div>
                            </div>

                            <div class="col-12 mt-4">
                                <div class="mb-4">
                                    <label class="label-gold">Project Description</label>
                                    <textarea id="description" class="form-control ckeditor" name="description" rows="5"></textarea>
                                </div>
                                
                                <hr style="border-top: 1px solid #333;">

                                <div class="mt-4 text-right">
                                    <button class="btn btn-draft mr-2" name="save_action" value="DRAFT">
                                        <i class="fa fa-save"></i> Save Draft
                                    </button>
                                    <button class="btn btn-gold" name="save_action" value="PUBLISH">
                                        <i class="fa fa-paper-plane"></i> Publish Gallery
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Preview Image Script
        document.getElementById('imageInput').onchange = evt => {
            const [file] = document.getElementById('imageInput').files
            if (file) {
                document.getElementById('imagePreview').src = URL.createObjectURL(file)
                document.getElementById('imagePreview').style.display = 'block'
                document.getElementById('placeholder-text').style.display = 'none'
            }
        }

        // Initialize CKEditor
        if(typeof CKEDITOR !== 'undefined'){
            CKEDITOR.replace('description');
        }
    </script>
@endsection