@extends('layouts.admin')
@section('title','Gallery')
@section('page-title','Gallery')
@section('content')
<div class="page-header"><h1>Gallery Management</h1></div>
<div class="grid-2" style="align-items:start;gap:1.5rem;">
    <div class="card">
        <div class="card-header"><span style="font-weight:600;">Add Image</span></div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.gallery.store') }}" enctype="multipart/form-data">
                @csrf
                @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif

                {{-- Main image upload --}}
                <div class="form-group">
                    <label>Photo <span style="color:#dc2626">*</span></label>
                    <div id="main-drop-zone" style="border:2px dashed #E8D5C4;border-radius:.5rem;padding:1.5rem;text-align:center;cursor:pointer;transition:border-color .2s;background:#fdfaf8;"
                         onclick="document.getElementById('main-file').click()"
                         ondragover="event.preventDefault();this.style.borderColor='#8B3252'"
                         ondragleave="this.style.borderColor='#E8D5C4'"
                         ondrop="handleDrop(event,'main')">
                        <img id="main-preview" src="" alt="" style="display:none;max-height:140px;max-width:100%;border-radius:.375rem;margin-bottom:.5rem;">
                        <div id="main-drop-text">
                            <div style="font-size:1.75rem;margin-bottom:.35rem;">🖼</div>
                            <div style="font-size:.85rem;color:#7A6058;">Click or drag & drop an image here</div>
                            <div style="font-size:.75rem;color:#a89891;margin-top:.25rem;">JPG, PNG, WebP — max 8 MB</div>
                        </div>
                    </div>
                    <input type="file" name="image" id="main-file" accept="image/*" style="display:none;" required onchange="previewFile(this,'main')">
                </div>

                <div class="form-group"><label>Caption</label><input type="text" name="caption" placeholder="e.g. Elegant Braided Updo"></div>
                <div class="form-group"><label>Category</label>
                    <select name="category">
                        <option value="">Select category</option>
                        @foreach(['braids','natural','weaves','colour','makeup','nails','skin'] as $c)<option value="{{ $c }}">{{ ucfirst($c) }}</option>@endforeach
                    </select>
                </div>
                <label style="display:flex;gap:.5rem;align-items:center;font-size:.9rem;cursor:pointer;margin-bottom:1rem;">
                    <input type="checkbox" name="is_before_after" value="1" id="before-after-cb" onchange="toggleBeforeAfter(this)"> Before & After
                </label>

                {{-- Before image upload (hidden until checkbox ticked) --}}
                <div id="before-upload-wrap" style="display:none;">
                    <div class="form-group">
                        <label>Before Photo</label>
                        <div id="before-drop-zone" style="border:2px dashed #E8D5C4;border-radius:.5rem;padding:1.25rem;text-align:center;cursor:pointer;background:#fdfaf8;"
                             onclick="document.getElementById('before-file').click()"
                             ondragover="event.preventDefault();this.style.borderColor='#8B3252'"
                             ondragleave="this.style.borderColor='#E8D5C4'"
                             ondrop="handleDrop(event,'before')">
                            <img id="before-preview" src="" alt="" style="display:none;max-height:100px;max-width:100%;border-radius:.375rem;margin-bottom:.4rem;">
                            <div id="before-drop-text" style="font-size:.82rem;color:#7A6058;">Click or drag & drop before photo</div>
                        </div>
                        <input type="file" name="before_image" id="before-file" accept="image/*" style="display:none;" onchange="previewFile(this,'before')">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="width:100%;">Upload to Gallery</button>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><span style="font-weight:600;">Gallery ({{ $images->total() }} images)</span></div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;padding:1rem;">
            @forelse($images as $img)
            <div style="position:relative;border-radius:.375rem;overflow:hidden;">
                <img src="{{ $img->url }}" alt="{{ $img->caption }}" style="width:100%;height:120px;object-fit:cover;">
                <div style="position:absolute;top:4px;right:4px;">
                    <form method="POST" action="{{ route('admin.gallery.destroy',$img) }}">@csrf @method('DELETE')
                        <button type="submit" style="background:rgba(220,38,38,.85);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:.75rem;cursor:pointer;line-height:24px;text-align:center;" title="Remove" onclick="return confirm('Remove?')">✕</button>
                    </form>
                </div>
                @if($img->is_before_after)<div style="position:absolute;top:4px;left:4px;background:#8B3252;color:#fff;font-size:.6rem;padding:.15rem .35rem;border-radius:.2rem;">B&A</div>@endif
                @if($img->caption)<div style="padding:.35rem .5rem;font-size:.75rem;color:#7A6058;background:#fafafa;">{{ Str::limit($img->caption,30) }}</div>@endif
            </div>
            @empty
            <div style="grid-column:1/-1;text-align:center;color:#7A6058;padding:2rem;">No images yet.</div>
            @endforelse
        </div>
        {{ $images->links() }}
    </div>
</div>
@push('scripts')
<script>
function previewFile(input, zone) {
    if (!input.files || !input.files[0]) return;
    const reader = new FileReader();
    reader.onload = e => {
        const preview  = document.getElementById(zone + '-preview');
        const dropText = document.getElementById(zone + '-drop-text');
        preview.src = e.target.result;
        preview.style.display = 'block';
        if (dropText) dropText.style.display = 'none';
    };
    reader.readAsDataURL(input.files[0]);
}

function handleDrop(e, zone) {
    e.preventDefault();
    document.getElementById(zone + '-drop-zone').style.borderColor = '#E8D5C4';
    const input = document.getElementById(zone + '-file');
    const dt = new DataTransfer();
    dt.items.add(e.dataTransfer.files[0]);
    input.files = dt.files;
    previewFile(input, zone);
}

function toggleBeforeAfter(cb) {
    document.getElementById('before-upload-wrap').style.display = cb.checked ? 'block' : 'none';
}
</script>
@endpush
@endsection