@extends('layouts.user')
@section('pageTitle')
    Galeri
@endsection
@section('content')
    <div class="pt-2 pb-20 w-full">
        <div class="h-[calc(100vh-150px)] overflow-y-auto flex flex-col items-center gap-10">
            <form action="{{ route('workers.gallery.add') }}" enctype="multipart/form-data" method="POST"
                onsubmit="showLoading()" class="mt-4 max-w-sm sm:max-w-lg md:max-w-xl px-6">
                @csrf

                <label for="dropzone-file"
                    class="mx-auto cursor-pointer flex w-full max-w-lg flex-col items-center rounded-xl border-2 focus:ring-blue-800 border-gray-700 text-gray-400 p-6 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                    </svg>

                    <h2 class="mt-4 text-xl font-medium text-gray-300 tracking-wide">Resim Yükleyiniz</h2>

                    <p class="mt-2 text-gray-500 tracking-wide">Resimleriniz PNG veya JPG formatında olmalıdır. </p>

                    <input id="dropzone-file" type="file" class="hidden" name="images[]" multiple />
                </label>

                <div class="flex justify-end mt-2">
                    <button type="submit" class="button-3">
                        <i class="fa-solid fa-save"></i>
                        Kaydet
                    </button>
                </div>
            </form>

            <div class="grid grid-cols-6 col-span-2 gap-2 mt-4 max-w-sm sm:max-w-lg md:max-w-xl px-6">
                @forelse ($gallery as $index => $item)
                    {{-- @dd($item) --}}
                    {{-- @php
                        // Her 5 öğede bir
                        $isFirstInGroup = $index % 5 == 0;
                        $colSpan = $isFirstInGroup ? 3 : 2;
                        $maxHeight = $isFirstInGroup ? 14 : 10;
                    @endphp --}}

                    <div class="image cursor-pointer relative overflow-hidden rounded-xl col-span-2 max-h-[14]">
                        <form id="deleteGalery{{ $item->id }}" onsubmit="showLoading()"
                            action="{{ route('workers.gallery.delete', ['photo' => $item]) }}" method="post">
                            @csrf
                            @method('DELETE')
                        </form>
                        <button
                            class="hidden px-2 py-1 absolute top-1 right-1 rounded-xl bg-red-700 text-xs text-gray-200 z-10"
                            form="deleteGalery{{ $item->id }}" type="submit">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                        <img class="h-full w-full object-cover" src="{{ getCdnFile($item->path) }}" alt="">
                    </div>
                @empty
                    <p class="col-span-6 text-gray-300">Henüz galeri öğesi bulunmuyor. Lütfen resim yükleyiniz.</p>
                @endforelse
            </div>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
@endsection
@section('javascript')
    <script>
        $('.image').click(function() {
            var button = $(this).find('button');
            button.fadeToggle('fast');
        });
    </script>
@endsection