@extends('backend.app')

@section('title', 'Shop Gallery (20 Images)')

@section('content')
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="toolbar" id="kt_toolbar">
            <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <h1 class="text-dark fw-bold my-1 fs-2">Shop Gallery Management</h1>
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item text-dark">Shop Gallery (20 Images)</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <div class="container-fluid">
                @if(session('success'))
                    <div class="alert alert-success d-flex align-items-center p-4 mb-5">
                        <i class="ki-duotone ki-shield-tick fs-2x text-success me-4"><span class="path1"></span><span class="path2"></span></i>
                        <div class="d-flex flex-column">
                            <span class="fw-bold">{{ session('success') }}</span>
                        </div>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger p-4 mb-5">
                        <div class="fw-bold mb-2">Please fix the following validation errors:</div>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('admin.shop.gallery.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card card-flush mb-5">
                        <div class="card-header align-items-center py-5">
                            <div class="card-title">
                                <h3 class="fw-bold text-gray-800 me-3">20 Image Upload Form & Sort Orders</h3>
                                <span class="badge badge-light-primary fs-7">All 20 images and sort orders are required</span>
                            </div>
                            <div class="card-toolbar">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-2 me-1"></i> Save All 20 Gallery Images
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="row g-5">
                        @for ($i = 0; $i < 20; $i++)
                            @php
                                $item = $items[$i] ?? null;
                                $slotNum = $i + 1;
                                $existingImage = $item ? $item->image : null;
                                $sortOrder = old("gallery.{$i}.sort_order", $item->sort_order ?? $slotNum);
                            @endphp
                            <div class="col-xl-3 col-lg-4 col-md-6">
                                <div class="card card-bordered h-100 shadow-sm">
                                    <div class="card-header bg-light px-4 py-3 min-h-auto">
                                        <div class="card-title m-0">
                                            <span class="badge badge-primary me-2">#{{ $slotNum }}</span>
                                            <h5 class="fw-bold m-0 text-gray-800">Gallery Image {{ $slotNum }}</h5>
                                        </div>
                                    </div>
                                    <div class="card-body p-4 d-flex flex-column justify-content-between">
                                        <input type="hidden" name="gallery[{{ $i }}][id]" value="{{ $item->id ?? '' }}">
                                        <input type="hidden" name="gallery[{{ $i }}][existing_image]" value="{{ $existingImage }}">

                                        <div class="text-center mb-3">
                                            @if ($existingImage)
                                                <div class="symbol symbol-120px symbol-2px mb-2">
                                                    <img src="{{ asset('storage/' . $existingImage) }}" alt="Gallery Image {{ $slotNum }}" class="object-fit-cover rounded border">
                                                </div>
                                                <div class="text-muted fs-8">Current Image Saved</div>
                                            @else
                                                <div class="symbol symbol-120px bg-light-secondary border rounded d-flex align-items-center justify-content-center mx-auto mb-2">
                                                    <i class="ki-duotone ki-picture fs-3x text-muted"><span class="path1"></span><span class="path2"></span></i>
                                                </div>
                                                <span class="badge badge-light-danger fs-8">No Image Selected</span>
                                            @endif
                                        </div>

                                        <div>
                                            <div class="mb-3">
                                                <label class="form-label required fs-7 fw-bold">Upload Image {{ $slotNum }}</label>
                                                <input type="file" name="gallery[{{ $i }}][image]" class="form-control form-control-sm @error("gallery.{$i}.image") is-invalid @enderror" accept="image/*" {{ !$existingImage ? 'required' : '' }}>
                                                @error("gallery.{$i}.image")
                                                    <div class="invalid-feedback fs-8">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="mb-0">
                                                <label class="form-label required fs-7 fw-bold">Sort Order</label>
                                                <input type="number" name="gallery[{{ $i }}][sort_order]" class="form-control form-control-sm @error("gallery.{$i}.sort_order") is-invalid @enderror" value="{{ $sortOrder }}" min="1" required>
                                                @error("gallery.{$i}.sort_order")
                                                    <div class="invalid-feedback fs-8">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>

                    <div class="card card-flush mt-5">
                        <div class="card-footer d-flex justify-content-end py-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="ki-duotone ki-check fs-2 me-1"></i> Save All 20 Gallery Images
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection