@extends('layouts.app')

@section('title', 'Asignacion - Tipo de Operacion')

@push('styles')
    <style>
        .op-link {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            border: 1px solid #dce6ef;
            border-radius: 12px;
            padding: 1rem 1.1rem;
            text-decoration: none;
            color: #446078;
            font-weight: 600;
            background: #f8fbfd;
            transition: all 0.2s ease;
        }

        .op-link:hover {
            border-color: #077BA1;
            color: #077BA1;
            background: #edf8fc;
        }

        .op-link img {
            width: 220px;
            height: 124px;
            object-fit: contain;
            border-radius: 10px;
            background: #fff;
            border: 1px solid #e5edf3;
            padding: 0.35rem;
        }

        .op-link .label {
            line-height: 1.2;
        }

        @media (max-width: 575.98px) {
            .op-link img {
                width: 160px;
                height: 90px;
            }
        }

        @media (min-width: 576px) and (max-width: 991.98px) {
            .op-link img {
                width: 190px;
                height: 106px;
            }
        }

        /* --- DARK MODE OVERRIDES --- */
        html[data-theme='dark'] .op-link {
            border-color: var(--theme-border);
            background: var(--theme-surface);
            color: var(--theme-text);
            box-shadow: var(--theme-shadow);
        }
        html[data-theme='dark'] .op-link:hover {
            border-color: var(--theme-primary);
            color: var(--theme-primary);
            background: rgba(57, 166, 201, 0.14);
        }
        html[data-theme='dark'] .op-link img {
            background: var(--theme-surface-alt);
            border-color: var(--theme-border);
        }
        html[data-theme='dark'] .op-link .label {
            color: var(--theme-text);
        }
    </style>
@endpush

@section('content')
    <div class="row justify-content-center">
        <div class="col-12 col-lg-8">
            <div class="card card-soft border-0">
                <div class="card-body p-4 p-md-5">
                    <h1 class="h4 mb-2">Tipo de Operacion</h1>
                    <p class="text-muted-brand mb-4">Seleccione una opcion para continuar.</p>

                    <div class="alert alert-success mb-4">
                        <strong>Solicitante:</strong> {{ $prestamistaUser->nombre ?? 'Sin nombre' }}
                        <br>
                        <strong>Cedula validada (prestamista):</strong> {{ $prestamista }}
                    </div>

                    <div class="d-grid gap-3">
                        <a href="{{ route('asignacion.alimentos') }}" class="op-link">
                            <img src="{{ asset('imgs/prestamos.png') }}" alt="Asignacion de alimentos">
                            <span class="label">Asignacion de alimentos</span>
                        </a>
                        {{--
                        <a href="{{ route('asignacion.dotacion') }}" class="op-link">
                            <img src="{{ asset('imgs/dotacion.png') }}" alt="Dotacion">
                            <span class="label">Dotacion</span>
                        </a>
                        --}}
                        <a href="{{ route('asignacion.transferencia') }}" class="op-link">
                            <img src="{{ asset('imgs/transferencia.png') }}" alt="Transferencia">
                            <span class="label">Transferencia</span>
                        </a>
                        <a href="{{ route('asignacion.devolucion') }}" class="op-link">
                            <img src="{{ asset('imgs/devolucion.png') }}" alt="Devolucion">
                            <span class="label">Devolucion</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection