@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Sidebar Offcanvas')

@section('content')

    <div class="card">
        <div class="p-4">

            <div class="flex justify-between items-center mb-4">
                <h3 class="mb-1 text-2xl font-semibold">Sidebar Offcanvas Images</h3>
                <a href="{{ route('admin.setting.index') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-left me-2"></i> Back
                </a>
            </div>

            <form action="{{ route('admin.setting.sidebar-offcanvas.save') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Main Social Platforms -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="selected_image_preview col-span-2">
                        <div class="image-input w-full max-w-[360px]">
                            <h3 class="mb-2">Gallery Images</h3>
                            <label for="gallery-images"
                                class="aspect-[360/157] flex flex-col items-center justify-center border-2 border-dashed border-blue-400 rounded-lg cursor-pointer hover:bg-blue-50 transition">
                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_2161_7517)">
                                        <path d="M20 10.6665H20.0133" stroke="#1F61EC" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        <path
                                            d="M22.6673 5.3335H9.33398C7.12485 5.3335 5.33398 7.12436 5.33398 9.3335V22.6668C5.33398 24.876 7.12485 26.6668 9.33398 26.6668H22.6673C24.8765 26.6668 26.6673 24.876 26.6673 22.6668V9.3335C26.6673 7.12436 24.8765 5.3335 22.6673 5.3335Z"
                                            stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M5.33398 19.9999L10.6673 14.6666C11.2754 14.0815 11.9652 13.7734 12.6673 13.7734C13.3695 13.7734 14.0592 14.0815 14.6673 14.6666L21.334 21.3333"
                                            stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M18.666 18.6664L19.9993 17.3331C20.6074 16.748 21.2972 16.4399 21.9993 16.4399C22.7015 16.4399 23.3913 16.748 23.9993 17.3331L26.666 19.9998"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_2161_7517">
                                            <rect width="32" height="32" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <div class="flex gap-2 mt-2">
                                    <p><span>Choose files</span></p>
                                </div>
                                <p class="text-14 text-paragraph">
                                    JPEG, PNG, JPG, GIF, WEBP (Multiple allowed)
                                </p>
                            </label>
                            <input type="file" name="gallery[]" id="gallery-images" accept="image/*" multiple
                                class="hidden" />
                            <div class="text-red-500 text-sm mt-1 hidden">Error message</div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end gap-2">
                    <a href="{{ route('admin.setting.index') }}" class="btn btn-secondary">Back</a>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>

            @if (count($offcanvas_gallery) > 0)
                <div class="grid grid-cols-4 gap-4 mt-8">
                    @foreach ($offcanvas_gallery as $key => $image)
                        <form
                            action="{{ route('admin.setting.sidebar-offcanvas.delete', ['key' => $key, 'image' => $image]) }}"
                            method="POST">
                            @csrf
                            @method('DELETE')

                            <div class="image-preview-item position-relative d-inline-block me-2 mb-2">
                                <img src="{{ asset($image) }}" class="img-thumbnail w-full max-w-[360px] max-h-[157px]">
                                <button type="submit" class="btn btn-danger btn-sm position-absolute top-0 end-0"
                                    style="transform: translate(50%, -50%); border-radius: 50%; width: 25px; height: 25px; padding: 0;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </form>
                    @endforeach
                </div>
            @endif

        </div>
    </div>

@endsection

@push('scripts')
    @include('backend::components.image-preview')
@endpush