@extends('layouts.app', ['title' => 'Galeria do Produto'])

@section('css')
<style type="text/css">
    /* Modern Card & Layout */
    .card-modern {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        background: #fff;
        transition: transform 0.2s;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .page-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .btn-back {
        background: white;
        border: 1px solid #e5e7eb;
        color: #4b5563;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        font-weight: 500;
        text-decoration: none;
    }
    
    .btn-back:hover {
        background: #f9fafb;
        color: #1f2937;
        border-color: #d1d5db;
        transform: translateX(-2px);
    }

    /* Gallery Specific Styles */
    .main-image-card {
        text-align: center;
        background: #f8f9fa;
        border-radius: 1rem;
        padding: 1.5rem;
        border: 1px dashed #dee2e6;
    }
    .main-image {
        max-height: 250px;
        object-fit: contain;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .upload-zone {
        border: 2px dashed #e5e7eb;
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        transition: all 0.2s;
        cursor: pointer;
        background: #fafafa;
    }
    .upload-zone:hover {
        border-color: #4f46e5;
        background: #f5f3ff;
    }
    
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .gallery-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .gallery-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.9);
        padding: 0.75rem;
        transform: translateY(100%);
        transition: transform 0.2s;
    }
    .gallery-item:hover .gallery-actions {
        transform: translateY(0);
    }
    
    /* File Input Styling */
    .file-input-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .file-input-wrapper input[type=file] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    
    .preview-container {
        width: 100%;
        height: 200px;
        background: #eee;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 1rem;
    }
    .preview-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>
@endsection

@section('content')

<div class="container-fluid px-4 py-4">
    <!-- Header -->
    <div class="page-header">
        <h1 class="page-title">
            <i class="ri-image-2-line text-primary"></i>
            Galeria do Produto
        </h1>
        <a href="{{ route('produtos.index') }}" class="btn-back">
            <i class="ri-arrow-left-line"></i>
            Voltar para Lista
        </a>
    </div>

    <div class="card card-modern mb-4">
        <div class="card-body p-4">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="main-image-card">
                        <span class="badge bg-primary mb-2">Imagem Principal</span>
                        <br>
                        <img src="{{ $item->img }}" class="main-image" alt="Imagem Principal">
                    </div>
                </div>
                <div class="col-md-8">
                    <h3 class="fw-bold text-dark">{{ $item->nome }}</h3>
                    <p class="text-muted">Gerencie as imagens adicionais para este produto. Você pode adicionar múltiplas imagens para criar uma galeria completa.</p>
                    
                    <div class="card bg-light border-0">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3"><i class="ri-upload-cloud-2-line me-1"></i> Adicionar Nova Imagem</h5>
                            
                            {!!Form::open()
                            ->post()
                            ->route('produtos.galeria-store', [$item->id])
                            ->multipart()
                            ->id('form-image')
                            !!}
                            
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="preview-container">
                                        <img id="file-ip-1-preview" src="/imgs/no-image.png">
                                    </div>
                                </div>
                                <div class="col-md-8 d-flex flex-column justify-content-center">
                                    <div class="mb-3">
                                        <label class="form-label">Selecione uma imagem</label>
                                        <div class="file-input-wrapper w-100">
                                            <button type="button" class="btn btn-outline-primary w-100">
                                                <i class="ri-folder-image-line me-1"></i> Escolher Arquivo
                                            </button>
                                            <input type="file" id="file-ip-1" name="image" accept="image/*" onchange="showPreview(event);">
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-success w-100">
                                        <i class="ri-save-line me-1"></i> Salvar Imagem
                                    </button>
                                </div>
                            </div>
                            
                            {!!Form::close()!!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex align-items-center mb-3">
        <h5 class="fw-bold m-0"><i class="ri-gallery-line me-1"></i> Imagens Adicionais</h5>
        <span class="badge bg-light text-dark ms-2">{{ count($item->galeria) }} imagens</span>
    </div>

    <div class="row g-4">
        @forelse($item->galeria as $i)
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card gallery-item border-0 h-100">
                <img src="{{ $i->img }}" class="gallery-img">
                <div class="gallery-actions text-center">
                    <form action="{{ route('produtos.destroy-image', $i->id) }}" method="post" id="form-{{$i->id}}">
                        @method('delete')
                        @csrf
                        <button type="button" class="btn btn-danger btn-sm btn-delete rounded-pill px-3">
                            <i class="ri-delete-bin-line me-1"></i> Remover
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="text-center py-5 text-muted">
                <i class="ri-image-add-line fs-1 text-light mb-3" style="font-size: 4rem !important;"></i>
                <p>Nenhuma imagem adicional cadastrada.</p>
            </div>
        </div>
        @endforelse
    </div>

</div>
@endsection

@section('js')
<script>
    function showPreview(event){
        if(event.target.files.length > 0){
            var src = URL.createObjectURL(event.target.files[0]);
            var preview = document.getElementById("file-ip-1-preview");
            preview.src = src;
            preview.style.display = "block";
        }
    }

    $('.btn-delete').on('click', function (e) {
        e.preventDefault();
        var form = $(this).parents('form').attr('id');
        swal({
            title: "Você está certo?",
            text: "Uma vez deletada, você não poderá recuperar essa imagem!",
            icon: "warning",
            buttons: true,
            buttons: ["Cancelar", "Excluir"],
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                $('#'+form).submit();
            }
        });
    });
</script>
@endsection