@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Detalle de Pago de Planilla')
@section('plugins.Sweetalert2', true)

@section('content_header')
    <h1><i class="fas fa-eye"></i> Detalle de Pago de Planilla</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <a href="{{ route('planilla-pagos.export-pdf', $planillaPago) }}" target="_blank" class="btn btn-danger mb-3">
                <i class="fas fa-file-pdf"></i> Descargar PDF
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Información del Colaborador -->
        <div class="col-md-6">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-user"></i> Información del Colaborador
                    </h3>
                </div>
                <div class="card-body">
                    <p><strong>Nombre:</strong> {{ $planillaPago->empleado->nombre }} {{ $planillaPago->empleado->apellido }}</p>
                    <p><strong>Código:</strong> {{ $planillaPago->empleado->codigo }}</p>
                    <p><strong>Cargo:</strong> {{ $planillaPago->empleado->cargo }}</p>
                </div>
            </div>
        </div>

        <!-- Información del Período -->
        <div class="col-md-6">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-calendar-alt"></i> Período de Pago
                    </h3>
                </div>
                <div class="card-body">
                    @php
                        $meses = [
                            1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril',
                            5 => 'Mayo', 6 => 'Junio', 7 => 'Julio', 8 => 'Agosto',
                            9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre', 12 => 'Diciembre'
                        ];
                    @endphp
                    <p><strong>Período:</strong> {{ $meses[$planillaPago->periodo_mes] }} {{ $planillaPago->periodo_anio }}</p>
                    <p><strong>Fecha de Pago:</strong> {{ $planillaPago->fecha_pago->format('d/m/Y') }}</p>
                    <p><strong>Registrado por:</strong> {{ $planillaPago->usuario->name }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Resumen de Cálculo -->
    <div class="card card-success">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-calculator"></i> Resumen de Cálculo
            </h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-info"><i class="fas fa-calendar-check"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Días Trabajados</span>
                            <span class="info-box-number">{{ $planillaPago->dias_trabajados }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-danger"><i class="fas fa-calendar-times"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Días Faltados</span>
                            <span class="info-box-number">{{ $planillaPago->dias_faltados }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-warning"><i class="fas fa-calendar-alt"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Días Permisos</span>
                            <span class="info-box-number">{{ $planillaPago->dias_permisos }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-primary"><i class="fas fa-calendar-day"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Días Descansos</span>
                            <span class="info-box-number">{{ $planillaPago->dias_descansos }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th width="50%">Sueldo Base:</th>
                                <td class="text-right"><strong>S/ {{ number_format($planillaPago->sueldo_base, 2) }}</strong></td>
                            </tr>
                            <tr>
                                <th>Días del Mes:</th>
                                <td class="text-right"><strong>{{ $planillaPago->dias_mes }}</strong></td>
                            </tr>
                            <tr>
                                <th>Tarifa Diaria:</th>
                                <td class="text-right"><strong>S/ {{ number_format($planillaPago->tarifa_diaria, 2) }}</strong></td>
                            </tr>
                            <tr class="bg-danger text-white">
                                <th>Descuento (Faltas + Permisos):</th>
                                <td class="text-right"><strong>S/ {{ number_format($planillaPago->descuento_faltas_permisos, 2) }}</strong></td>
                            </tr>
                            <tr class="bg-warning">
                                <th>Pagos Adelantados:</th>
                                <td class="text-right"><strong>S/ {{ number_format($planillaPago->monto_adelantado, 2) }}</strong></td>
                            </tr>
                            <tr class="bg-success text-white">
                                <th><h4>Sueldo a Pagar:</h4></th>
                                <td class="text-right"><h4>S/ {{ number_format($planillaPago->monto_total, 2) }}</h4></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Información de Pago -->
    <div class="card card-warning">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-credit-card"></i> Información de Pago
            </h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <p><strong>Método de Pago:</strong> {{ ucfirst($planillaPago->metodo_pago) }}</p>
                </div>
                @if($planillaPago->caja)
                <div class="col-md-4">
                    <p><strong>Caja:</strong> {{ $planillaPago->caja->nombre }}</p>
                </div>
                @endif
            </div>
            @if($planillaPago->observaciones)
            <div class="row">
                <div class="col-md-12">
                    <p><strong>Observaciones:</strong> {{ $planillaPago->observaciones }}</p>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Pagos Adelantados -->
    @if($planillaPago->pagosAdelantados && $planillaPago->pagosAdelantados->count() > 0)
    <div class="card card-secondary">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-list"></i> Pagos Adelantados Aplicados
            </h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Monto</th>
                            <th>Motivo</th>
                            <th>Registrado por</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($planillaPago->pagosAdelantados as $adelantado)
                        <tr>
                            <td>{{ $adelantado->fecha_pago->format('d/m/Y') }}</td>
                            <td>S/ {{ number_format($adelantado->monto, 2) }}</td>
                            <td>{{ $adelantado->motivo ?? '-' }}</td>
                            <td>{{ $adelantado->usuario->name }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
@stop

@section('css')
<style>
    .info-box {
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border-radius: .25rem;
        background-color: #fff;
        display: flex;
        margin-bottom: 1rem;
        min-height: 80px;
        padding: .5rem;
        position: relative;
    }
    .info-box-icon {
        border-radius: .25rem;
        align-items: center;
        display: flex;
        font-size: 1.875rem;
        justify-content: center;
        text-align: center;
        width: 70px;
    }
    .info-box-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.8;
        flex: 1;
        padding: 0 10px;
    }
    .info-box-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
    }
    .info-box-number {
        display: block;
        font-weight: 700;
        font-size: 18px;
    }
</style>
@stop