@extends('layouts.admin')
@section('title', 'Banner Principal')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h5 class="fw-bold mb-1">Banner Principal (Hero)</h5>
        <p class="text-muted small mb-0">Imagenes que rotan en la portada, cada una con su titulo y subtitulo</p>
    </div>
    <a href="{{ route('hero-slides.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i> Nuevo Slide
    </a>
</div>

<div class="card table-card mb-4">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="fw-bold mb-0"><i class="bi bi-arrow-left-right me-2 text-primary"></i>Efecto de transicion</h6>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="{{ route('hero-slides.effect') }}">
            @csrf
            <div class="d-flex flex-wrap gap-3 align-items-end">
                <div class="effect-option {{ $settings->hero_effect === 'slide' ? 'active' : '' }}">
                    <label class="m-0 d-block cursor-pointer">
                        <input type="radio" name="hero_effect" value="slide" {{ $settings->hero_effect === 'slide' ? 'checked' : '' }} onchange="this.form.submit()">
                        <div class="effect-preview"><i class="bi bi-arrow-left-right"></i></div>
                        <div class="text-center fw-semibold small mt-1">Horizontal (slider)</div>
                    </label>
                </div>
                <div class="effect-option {{ $settings->hero_effect === 'vertical' ? 'active' : '' }}">
                    <label class="m-0 d-block cursor-pointer">
                        <input type="radio" name="hero_effect" value="vertical" {{ $settings->hero_effect === 'vertical' ? 'checked' : '' }} onchange="this.form.submit()">
                        <div class="effect-preview"><i class="bi bi-arrow-down-up"></i></div>
                        <div class="text-center fw-semibold small mt-1">Abajo hacia arriba</div>
                    </label>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card table-card">
    <div class="table-responsive">
        @if ($slides->isEmpty())
            <div class="empty-state">
                <div class="empty-icon mb-3"><i class="bi bi-images"></i></div>
                <h6 class="text-muted">No hay slides creados</h6>
                <a href="{{ route('hero-slides.create') }}" class="btn btn-primary btn-sm mt-2">
                    <i class="bi bi-plus-lg me-1"></i> Nuevo Slide
                </a>
            </div>
        @else
            <table class="table">
                <thead>
                    <tr>
                        <th>Imagen</th>
                        <th>Titulo</th>
                        <th>Subtitulo</th>
                        <th>Orden</th>
                        <th>Estado</th>
                        <th class="text-end">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($slides as $slide)
                        <tr>
                            <td>
                                @if($slide->image)
                                    <img src="{{ image_url($slide->image) }}" class="rounded" style="height:50px;width:80px;object-fit:cover;">
                                @else
                                    <span class="text-muted small">Sin imagen</span>
                                @endif
                            </td>
                            <td class="fw-semibold">{{ $slide->title ?: '-' }}</td>
                            <td class="text-muted small">{{ $slide->subtitle ? Str::limit($slide->subtitle, 40) : '-' }}</td>
                            <td>{{ $slide->order }}</td>
                            <td>
                                @if ($slide->active)
                                    <span class="badge-status bg-success bg-opacity-10 text-success">Activo</span>
                                @else
                                    <span class="badge-status bg-danger bg-opacity-10 text-danger">Inactivo</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <a href="{{ route('hero-slides.edit', $slide) }}" class="btn btn-sm btn-light btn-action" title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('hero-slides.destroy', $slide) }}" method="POST" class="d-inline" data-confirm="Eliminar este slide?">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-light btn-action text-danger" title="Eliminar">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>
@endsection

@push('styles')
<style>
    .effect-option { border: 2px solid #e2e8f0; border-radius: 12px; padding: 14px 18px; transition: 0.2s; cursor: pointer; }
    .effect-option:hover { border-color: #cbd5e1; }
    .effect-option.active { border-color: var(--primary); background: #eef2ff; }
    .effect-option input { display: none; }
    .effect-option .effect-preview { width: 64px; height: 64px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--primary); margin: 0 auto; }
    .cursor-pointer { cursor: pointer; }
</style>
@endpush