@extends('layouts.admin')

@section('title', 'Edit Lighting Project')

@section('breadcrumbs', 'Gallery')

@section('second-breadcrumb')
    <li>Edit 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;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            color: #fff;
        }
        .label-gold {
            color: #ffd700;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
        }
        .form-control-wedding {
            background: #222 !important;
            border: 1px solid #444 !important;
            color: #fff !important;
            border-radius: 10px;
        }
        .current-img-container {
            border: 2px solid #333;
            border-radius: 15px;
            padding: 10px;
            background: #111;
            margin-bottom: 15px;
        }
        .btn-gold {
            background: linear-gradient(to right, #ffd700, #b8860b);
            color: #000;
            font-weight: bold;
            border-radius: 30px;
            padding: 10px 25px;
            border: none;
        }
    </style>
@endsection

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card card-wedding">
                <div class="card-body p-5">
                    <h3 class="font-playfair text-warning mb-4"><i class="fa fa-pencil-square-o"></i> Update Lighting Project</h3>
                    
                    <form action="{{route('gallery.update', [$gallery->id])}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-7">
                                <div class="mb-4">
                                    <label class="label-gold">Project Title</label>
                                    <input type="text" name="title" class="form-control form-control-wedding" value="{{$gallery->title}}" required>
                                </div>

                                <div class="mb-4">
                                    <label class="label-gold">Change Lighting Photo</label>
                                    <input type="file" name="image" id="imageInput" class="form-control form-control-wedding">
                                    <small class="text-muted italic">Kosongkan jika tidak ingin mengubah foto utama.</small>
                                </div>

                                <div class="mb-4">
                                    <label class="label-gold">Project Details</label>
                                    <textarea id="description" class="form-control ckeditor" name="description">{{$gallery->description}}</textarea>
                                </div>
                            </div>

                            <div class="col-md-5 text-center">
                                <label class="label-gold d-block mb-3">Photo Preview</label>
                                
                                <div class="current-img-container">
                                    {{-- Menampilkan foto lama dari Base64 --}}
                                    <img id="imagePreview" src="{{$gallery->image}}" alt="Current Lighting" style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 15px rgba(255,215,0,0.2);">
                                    <p id="preview-label" class="mt-2 small text-muted">Current Project Photo</p>
                                </div>

                                <div class="alert alert-dark border-secondary small text-left">
                                    <i class="fa fa-info-circle text-warning"></i> 
                                    Tips: Gunakan foto dengan pencahayaan terbaik untuk memperkuat kesan <b>Diamond Lightning</b>.
                                </div>
                            </div>

                            <div class="col-12 mt-4 pt-3 border-top border-secondary text-right">
                                <button class="btn btn-outline-warning mr-2" name="save_action" value="DRAFT" style="border-radius:30px;">
                                    Set as Draft
                                </button>
                                <button class="btn btn-gold" name="save_action" value="PUBLISH">
                                    Update & Publish
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Script untuk preview instan saat pilih file baru
        document.getElementById('imageInput').onchange = evt => {
            const [file] = document.getElementById('imageInput').files
            if (file) {
                document.getElementById('imagePreview').src = URL.createObjectURL(file)
                document.getElementById('preview-label').innerHTML = "New Image Selected (Not yet saved)"
                document.getElementById('preview-label').classList.remove('text-muted')
                document.getElementById('preview-label').classList.add('text-warning')
            }
        }

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