@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.ml-picture-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    transition: box-shadow 0.15s;
    height: 100%;
}
.ml-picture-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
}
.ml-picture-card .picture-img-wrapper {
    position: relative;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    max-height: 220px;
    overflow: hidden;
}
.ml-picture-card .picture-img-wrapper img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}
.ml-picture-card .picture-badge {
    position: absolute;
    top: 8px;
    left: 8px;
}
.ml-picture-card .picture-info {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #dee2e6;
    background: #fff;
}
.ml-picture-card .picture-info code {
    font-size: 0.7rem;
}
.upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">
                <i class="ri-image-line me-1"></i> Imagenes de Publicacion
                @if($publication->ml_id)
                    <small class="text-muted">({{ $publication->ml_id }})</small>
                @endif
            </h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.publications.index') }}">Publicaciones</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.publications.edit', $publication->id) }}">Editar</a></li>
                    <li class="breadcrumb-item active">Imagenes</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Info de la publicacion --}}
<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-light border d-flex align-items-center gap-3 mb-0">
            @if($publication->url_image)
                <img src="{{ $publication->url_image }}" alt="" style="width:50px;height:50px;object-fit:contain;border-radius:0.25rem;border:1px solid #dee2e6;">
            @endif
            <div>
                <strong>{{ $publication->titu_publ }}</strong>
                <div class="text-muted small">
                    <span class="me-3"><i class="ri-shopping-bag-line me-1"></i>{{ $publication->co_arti }}</span>
                    @if($publication->ml_link)
                        <a href="{{ $publication->ml_link }}" target="_blank" class="me-3">
                            <i class="ri-external-link-line me-1"></i>Ver en ML
                        </a>
                    @endif
                    <span>
                        @switch($publication->estado)
                            @case('active')
                                <span class="badge bg-success">Activa</span>
                                @break
                            @case('paused')
                                <span class="badge bg-warning">Pausada</span>
                                @break
                            @case('closed')
                                <span class="badge bg-danger">Cerrada</span>
                                @break
                            @default
                                <span class="badge bg-secondary">Borrador</span>
                        @endswitch
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!$publication->isPublished())
    <div class="row">
        <div class="col-12">
            <div class="alert alert-warning">
                <i class="ri-error-warning-line me-1"></i>
                <strong>Publicacion no enviada a ML.</strong>
                La gestion de imagenes en MercadoLibre solo esta disponible para publicaciones que ya fueron publicadas.
                Podes gestionar las imagenes locales desde la <a href="{{ route('admin.meli.publications.edit', $publication->id) }}">pagina de edicion</a>.
            </div>
        </div>
    </div>
@else

    @if($mlError)
        <div class="row">
            <div class="col-12">
                <div class="alert alert-danger">
                    <i class="ri-error-warning-line me-1"></i>
                    <strong>Error al obtener imagenes de ML:</strong> {{ $mlError }}
                </div>
            </div>
        </div>
    @endif

    {{-- Imagenes actuales en ML --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="ri-gallery-line me-1"></i> Imagenes en MercadoLibre
                        <span class="badge bg-info ms-1">{{ count($pictures) }}</span>
                    </h5>
                    <small class="text-muted">ML permite hasta 10 imagenes por publicacion</small>
                </div>
                <div class="card-body">
                    @if(count($pictures) > 0)
                        <div class="row g-3">
                            @foreach($pictures as $index => $picture)
                                <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6">
                                    <div class="ml-picture-card">
                                        <div class="picture-img-wrapper">
                                            <img src="{{ $picture['secure_url'] ?? $picture['url'] ?? '' }}"
                                                 alt="Imagen {{ $index + 1 }}"
                                                 loading="lazy"
                                                 onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'150\' height=\'150\'><rect fill=\'%23f8f9fa\' width=\'150\' height=\'150\'/><text x=\'50%25\' y=\'50%25\' fill=\'%23adb5bd\' text-anchor=\'middle\' dy=\'.3em\' font-size=\'14\'>Error</text></svg>'">
                                            @if($index === 0)
                                                <div class="picture-badge">
                                                    <span class="badge bg-primary"><i class="ri-star-line me-1"></i>Principal</span>
                                                </div>
                                            @else
                                                <div class="picture-badge">
                                                    <span class="badge bg-secondary">{{ $index + 1 }}</span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="picture-info d-flex justify-content-between align-items-center">
                                            <code>{{ $picture['id'] ?? 'N/A' }}</code>
                                            @if(count($pictures) > 1)
                                                <button type="button"
                                                        class="btn btn-sm btn-outline-danger"
                                                        onclick="confirmRemoveImage('{{ $picture['id'] ?? '' }}', {{ $index + 1 }})"
                                                        title="Eliminar imagen">
                                                    <i class="ri-delete-bin-line"></i>
                                                </button>
                                            @else
                                                <span class="text-muted small" title="ML requiere al menos 1 imagen">
                                                    <i class="ri-lock-line"></i>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-muted py-5">
                            <i class="ri-image-line d-block" style="font-size:3rem;"></i>
                            <p class="mt-2 mb-0">No se encontraron imagenes en MercadoLibre.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Subir nueva imagen --}}
    @if(count($pictures) < 10)
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-upload-cloud-line me-1"></i> Subir Imagen (Archivo)</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.meli.publications.uploadImage', $publication->id) }}" method="POST" enctype="multipart/form-data" id="formUploadFile">
                        @csrf
                        <div class="upload-zone mb-3">
                            <i class="ri-image-add-line d-block" style="font-size:2.5rem;color:#adb5bd;"></i>
                            <p class="text-muted mb-2">Selecciona una imagen para subir a MercadoLibre</p>
                            <input type="file" name="image_file" id="image_file" class="form-control" accept="image/*">
                            <small class="text-muted mt-1 d-block">Formatos: JPG, PNG, WEBP. Maximo 10MB. Recomendado: 1200x1200px.</small>
                        </div>
                        @error('image_file')
                            <div class="text-danger small mb-2">{{ $message }}</div>
                        @enderror
                        <button type="button" class="btn btn-primary" onclick="confirmUpload('formUploadFile', 'archivo')">
                            <i class="ri-upload-2-line me-1"></i> Subir a MercadoLibre
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-link me-1"></i> Agregar Imagen por URL</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.meli.publications.uploadImage', $publication->id) }}" method="POST" id="formUploadUrl">
                        @csrf
                        <div class="mb-3">
                            <label for="image_url" class="form-label">URL de la imagen</label>
                            <input type="url" name="image_url" id="image_url" class="form-control"
                                   placeholder="https://ejemplo.com/imagen.jpg">
                            <small class="text-muted">ML descargara la imagen y la hosteara en sus servidores.</small>
                        </div>
                        @error('image_url')
                            <div class="text-danger small mb-2">{{ $message }}</div>
                        @enderror
                        <button type="button" class="btn btn-primary" onclick="confirmUpload('formUploadUrl', 'URL')">
                            <i class="ri-add-line me-1"></i> Agregar a MercadoLibre
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @else
        <div class="alert alert-info">
            <i class="ri-information-line me-1"></i>
            La publicacion ya tiene el maximo de 10 imagenes permitidas por MercadoLibre.
            Elimina alguna imagen para poder agregar una nueva.
        </div>
    @endif
@endif

{{-- Boton Volver --}}
<div class="row mb-4">
    <div class="col-12">
        <a href="{{ route('admin.meli.publications.edit', $publication->id) }}" class="btn btn-light">
            <i class="ri-arrow-left-line me-1"></i> Volver a Editar
        </a>
    </div>
</div>

{{-- Formularios ocultos para eliminar imagenes --}}
@foreach($pictures as $picture)
    @if(!empty($picture['id']))
    <form id="formRemove-{{ $picture['id'] }}"
          action="{{ route('admin.meli.publications.removeImage', [$publication->id, $picture['id']]) }}"
          method="POST" style="display:none;">
        @csrf
        @method('DELETE')
    </form>
    @endif
@endforeach

@endsection

@push('js')
<script>
function confirmRemoveImage(pictureId, position) {
    Swal.fire({
        title: 'Eliminar imagen ' + position + '?',
        text: 'Se eliminara la imagen de la publicacion en MercadoLibre. Esta accion no se puede deshacer.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="ri-delete-bin-line me-1"></i> Si, eliminar',
        cancelButtonText: 'Cancelar',
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Eliminando imagen...',
                text: 'Comunicandose con MercadoLibre, por favor espera.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formRemove-' + pictureId).submit();
        }
    });
}

function confirmUpload(formId, tipo) {
    var form = document.getElementById(formId);

    // Validar que haya algo para subir
    if (tipo === 'archivo') {
        var fileInput = form.querySelector('input[type="file"]');
        if (!fileInput || !fileInput.files.length) {
            Swal.fire({ icon: 'warning', title: 'Sin archivo', text: 'Selecciona una imagen para subir.' });
            return;
        }
    } else {
        var urlInput = form.querySelector('input[name="image_url"]');
        if (!urlInput || !urlInput.value.trim()) {
            Swal.fire({ icon: 'warning', title: 'Sin URL', text: 'Ingresa la URL de la imagen.' });
            return;
        }
    }

    Swal.fire({
        title: 'Subir imagen?',
        text: 'Se agregara la imagen a la publicacion en MercadoLibre.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#0d6efd',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="ri-upload-2-line me-1"></i> Si, subir',
        cancelButtonText: 'Cancelar',
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Subiendo imagen...',
                text: 'Comunicandose con MercadoLibre, por favor espera.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: function() { Swal.showLoading(); }
            });
            form.submit();
        }
    });
}
</script>
@endpush