@extends('layouts.app')
@section('titulo', 'Detalle de compra')

@section('contenido')

{{-- INFORMACIÓN GENERAL --}}

<div class="flex items-center justify-between mb-5">
    <div>
        <h2 class="text-lg font-semibold text-slate-800">
            Compra {{ $compra->numero_documento }}
        </h2>

    <p class="text-sm text-slate-400">
        Información general de la compra
    </p>
</div>

@if ($compra->estado === 'recibida')
    <span class="inline-flex px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold">
        Recibida
    </span>
@else
    <span class="inline-flex px-3 py-1 rounded-full bg-amber-50 text-amber-700 text-xs font-semibold">
        {{ ucfirst($compra->estado) }}
    </span>
@endif


</div>

{{-- DATOS GENERALES --}}

<div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">


<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-5 text-sm">

    {{-- PROVEEDOR --}}
    <div>
        <p class="text-xs text-slate-400 mb-1">
            Proveedor
        </p>

        <p class="font-medium text-slate-700">
            {{ $compra->proveedor?->razon_social ?? '—' }}
        </p>
    </div>


    {{-- LOCAL --}}
    <div>
        <p class="text-xs text-slate-400 mb-1">
            Local
        </p>

        <p class="font-medium text-slate-700">
            {{ $compra->local?->nombre ?? '—' }}
        </p>
    </div>


    {{-- ALMACÉN --}}
    <div>
        <p class="text-xs text-slate-400 mb-1">
            Almacén
        </p>

        <p class="font-medium text-slate-700">
            {{ $compra->almacen?->nombre ?? '—' }}
        </p>
    </div>


    {{-- FECHA --}}
    <div>
        <p class="text-xs text-slate-400 mb-1">
            Fecha
        </p>

        <p class="font-medium text-slate-700">
            {{ optional($compra->fecha)->format('d/m/Y') ?? $compra->created_at->format('d/m/Y') }}
        </p>
    </div>


    {{-- REGISTRADO POR --}}
    <div>
        <p class="text-xs text-slate-400 mb-1">
            Registrado por
        </p>

        <p class="font-medium text-slate-700">
            {{ $compra->usuario?->name ?? '—' }}
        </p>
    </div>


    {{-- ESTADO DE PAGO --}}
    <div>
        <p class="text-xs text-slate-400 mb-1">
            Estado de pago
        </p>

        @if ($compra->estado_pago === 'pagada')

            <span class="inline-flex px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold">
                Pagada
            </span>

        @else

            <span class="inline-flex px-2 py-0.5 rounded-full bg-amber-50 text-amber-700 text-xs font-semibold">
                Pendiente
            </span>

        @endif
    </div>

</div>


{{-- OBSERVACIÓN --}}

@if ($compra->observacion)

    <div class="mt-5 pt-5 border-t border-slate-100">

        <p class="text-xs text-slate-400 mb-1">
            Observación
        </p>

        <p class="text-sm text-slate-600">
            {{ $compra->observacion }}
        </p>

    </div>

@endif


</div>

{{-- ========================================================= --}}
{{-- INFORMACIÓN DEL PAGO --}}
{{-- ========================================================= --}}

<div class="bg-white rounded-2xl border border-slate-200 shadow-sm mt-5">


<div class="px-5 py-4 border-b border-slate-100">

    <h3 class="font-semibold text-slate-800">
        Pago al proveedor
    </h3>

    <p class="text-xs text-slate-400 mt-1">
        Información relacionada con el pago de esta compra
    </p>

</div>


{{-- ===================================================== --}}
{{-- SI YA ESTÁ PAGADA --}}
{{-- ===================================================== --}}

@if ($compra->estado_pago === 'pagada')

    <div class="p-5">

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">

            {{-- FECHA DE PAGO --}}
            <div>

                <p class="text-xs text-slate-400 mb-1">
                    Fecha de pago
                </p>

                <p class="font-medium text-slate-700">
                    {{ optional($compra->fecha_pago)->format('d/m/Y') ?? '—' }}
                </p>

            </div>


            {{-- MONTO PAGADO --}}
            <div>

                <p class="text-xs text-slate-400 mb-1">
                    Monto pagado
                </p>

                <p class="font-semibold text-emerald-600">
                    S/ {{ number_format($compra->monto_pagado, 2) }}
                </p>

            </div>


            {{-- MÉTODO DE PAGO --}}
            <div>

                <p class="text-xs text-slate-400 mb-1">
                    Método de pago
                </p>

                <p class="font-medium text-slate-700">
                    {{ $compra->metodo_pago ? ucfirst($compra->metodo_pago) : '—' }}
                </p>

            </div>

        </div>

    </div>


{{-- ===================================================== --}}
{{-- SI ESTÁ PENDIENTE --}}
{{-- ===================================================== --}}

@else

    <form
        method="POST"
        action="{{ route('compras.pago', $compra) }}"
        class="p-5"
    >

        @csrf


        <div class="grid grid-cols-1 md:grid-cols-4 gap-5 items-end">


            {{-- MONTO --}}
            <div>

                <label class="block text-xs font-medium text-slate-500 mb-1">
                    Monto a pagar
                </label>

                <div class="relative">

                    <span class="absolute left-3 top-2.5 text-slate-400">
                        S/
                    </span>

                    <input
                        type="number"
                        name="monto_pagado"
                        step="0.01"
                        min="0"
                        value="{{ number_format($compra->total, 2, '.', '') }}"
                        required
                        class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                    >

                </div>

            </div>


            {{-- FECHA DE PAGO --}}
            <div>

                <label class="block text-xs font-medium text-slate-500 mb-1">
                    Fecha de pago
                </label>

                <input
                    type="date"
                    name="fecha_pago"
                    value="{{ now()->format('Y-m-d') }}"
                    required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                >

            </div>


            {{-- MÉTODO --}}
            <div>

                <label class="block text-xs font-medium text-slate-500 mb-1">
                    Método de pago
                </label>

                <select
                    name="metodo_pago"
                    required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                >

                    <option value="">
                        Seleccionar
                    </option>

                    <option value="efectivo">
                        Efectivo
                    </option>

                    <option value="transferencia">
                        Transferencia bancaria
                    </option>

                    <option value="yape">
                        Yape
                    </option>

                    <option value="plin">
                        Plin
                    </option>

                    <option value="tarjeta">
                        Tarjeta
                    </option>

                    <option value="otro">
                        Otro
                    </option>

                </select>

            </div>


            {{-- BOTÓN --}}
            <div>

                <button
                    type="submit"
                    onclick="return confirm('¿Confirmas que deseas registrar este pago al proveedor?')"
                    class="w-full inline-flex items-center justify-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg transition"
                >

                    Registrar pago

                </button>

            </div>

        </div>


        {{-- INFORMACIÓN --}}

        <div class="mt-4 p-3 rounded-lg bg-amber-50 border border-amber-100">

            <p class="text-xs text-amber-700">

                <strong>Total de la compra:</strong>
                S/ {{ number_format($compra->total, 2) }}

                <span class="mx-2">•</span>

                Al registrar el pago, la compra pasará a estado
                <strong>Pagada</strong>.

            </p>

        </div>

    </form>

@endif


</div>

{{-- ========================================================= --}}
{{-- DETALLE DE PRODUCTOS --}}
{{-- ========================================================= --}}

<div class="bg-white rounded-2xl border border-slate-200 shadow-sm mt-5">


<div class="px-5 py-4 border-b border-slate-100">

    <h3 class="font-semibold text-slate-800">
        Productos recibidos
    </h3>

    <p class="text-xs text-slate-400 mt-1">
        Detalle de productos incluidos en la compra
    </p>

</div>


<div class="overflow-x-auto">

    <table class="w-full text-sm">

        <thead class="bg-slate-50 text-slate-500 text-left">

            <tr>

                <th class="px-5 py-3 font-semibold">
                    Producto
                </th>

                <th class="px-5 py-3 font-semibold text-center">
                    Cant.
                </th>

                <th class="px-5 py-3 font-semibold text-right">
                    Costo unit.
                </th>

                <th class="px-5 py-3 font-semibold">
                    Lote
                </th>

                <th class="px-5 py-3 font-semibold">
                    Vencimiento
                </th>

                <th class="px-5 py-3 font-semibold text-right">
                    Subtotal
                </th>

            </tr>

        </thead>


        <tbody class="divide-y divide-slate-100">

            @forelse ($compra->detalles as $d)

                <tr class="hover:bg-slate-50">

                    <td class="px-5 py-3">

                        <div class="font-medium text-slate-700">
                            {{ $d->descripcion }}
                        </div>

                        @if ($d->producto)

                            <div class="text-xs text-slate-400 mt-0.5">
                                {{ $d->producto->codigo ?? '' }}
                            </div>

                        @endif

                    </td>


                    <td class="px-5 py-3 text-center">
                        {{ $d->cantidad }}
                    </td>


                    <td class="px-5 py-3 text-right">
                        S/ {{ number_format($d->precio_compra, 2) }}
                    </td>


                    <td class="px-5 py-3 text-slate-500">
                        {{ $d->lote ?: '—' }}
                    </td>


                    <td class="px-5 py-3 text-slate-500">
                        {{ optional($d->fecha_vencimiento)->format('d/m/Y') ?? '—' }}
                    </td>


                    <td class="px-5 py-3 text-right font-semibold text-slate-700">
                        S/ {{ number_format($d->subtotal, 2) }}
                    </td>

                </tr>

            @empty

                <tr>

                    <td
                        colspan="6"
                        class="px-5 py-10 text-center text-slate-400"
                    >
                        No hay productos registrados en esta compra.
                    </td>

                </tr>

            @endforelse

        </tbody>


        {{-- TOTALES --}}

        <tfoot class="bg-slate-50/60">

            <tr>

                <td
                    colspan="5"
                    class="px-5 py-2 text-right text-slate-500"
                >
                    Subtotal
                </td>

                <td class="px-5 py-2 text-right font-medium">
                    S/ {{ number_format($compra->subtotal, 2) }}
                </td>

            </tr>


            <tr>

                <td
                    colspan="5"
                    class="px-5 py-2 text-right text-slate-500"
                >
                    IGV (18%)
                </td>

                <td class="px-5 py-2 text-right font-medium">
                    S/ {{ number_format($compra->igv, 2) }}
                </td>

            </tr>


            <tr>

                <td
                    colspan="5"
                    class="px-5 py-3 text-right text-lg font-bold text-slate-800"
                >
                    Total
                </td>

                <td
                    class="px-5 py-3 text-right text-lg font-bold text-slate-800"
                >
                    S/ {{ number_format($compra->total, 2) }}
                </td>

            </tr>

        </tfoot>

    </table>

</div>


</div>

@endsection