@extends('layouts.app')

@section('content')
    <div class="toolbar pb-lg-3" id="kt_toolbar">
        <div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
            <div class="page-title d-flex flex-column me-3">
                <h1 class="d-flex text-white fw-bold my-1 fs-3">Reporte de Movimientos Pendientes</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-1">
                    <li class="breadcrumb-item text-white opacity-75">
                        <a href="{{ route('home.index') }}" class="text-white text-hover-primary">Inicio</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="bullet bg-white opacity-75 w-5px h-2px"></span>
                    </li>
                    <li class="breadcrumb-item text-white opacity-75">Movimientos Pendientes</li>
                </ul>
            </div>
        </div>
    </div>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">

            <!-- Filtros -->
            <div class="card mb-5">
                <div class="card-header">
                    <h3 class="card-title">Filtros del Reporte</h3>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('expenses-pending.reports') }}" class="row g-3">
                        <div class="col-md-2">
                            <label class="form-label">Desde</label>
                            <input type="date" name="date_from" value="{{ request('date_from', $dateFrom) }}" class="form-control form-control-sm" />
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Hasta</label>
                            <input type="date" name="date_to" value="{{ request('date_to', $dateTo) }}" class="form-control form-control-sm" />
                        </div>
                        <div class="col-md-4">
                            <label for="user_id" class="form-label">Responsable</label>
                            <div class="input-group input-group-sm flex-nowrap">
                                <span class="input-group-text">
                                    <i class="ki-duotone ki-user fs-3">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                        <span class="path5"></span>
                                        <span class="path6"></span>
                                    </i>
                                </span>
                                <div class="overflow-hidden flex-grow-1">
                                    <select
                                        name="user_id"
                                        id="user_id"
                                        class="form-select form-select-sm rounded-start-0"
                                        data-control="select2"
                                        data-placeholder="Todos los responsables"
                                    >
                                        <option value=""></option>
                                        @foreach($filterUsers as $user)
                                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="card_id" class="form-label">Tarjeta</label>
                            <div class="input-group input-group-sm flex-nowrap">
                                <span class="input-group-text">
                                    <i class="ki-duotone ki-credit-cart fs-3">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                </span>
                                <div class="overflow-hidden flex-grow-1">
                                    <select
                                        name="card_id"
                                        id="card_id"
                                        class="form-select form-select-sm rounded-start-0"
                                        data-control="select2"
                                        data-placeholder="Todas las tarjetas"
                                    >
                                        <option value=""></option>
                                        @foreach($filterCards as $card)
                                            <option value="{{ $card->id }}" {{ request('card_id') == $card->id ? 'selected' : '' }}>
                                                {{ $card->number }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="ki-duotone ki-check fs-2 me-1">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>Aplicar filtros
                            </button>
                            <a href="{{ route('expenses-pending.reports') }}" class="btn btn-secondary me-2">
                                <i class="ki-duotone ki-refresh fs-2 me-1">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>Restablecer
                            </a>
                            <a href="#" class="btn btn-success btn-flex btn-color-white" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                <i class="ki-duotone ki-down fs-5 me-1">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>Exportar
                            </a>
                            <div class="menu menu-sub menu-sub-dropdown w-150px" data-kt-menu="true">
                                <div class="px-4 py-2">
                                    <a href="{{ route('expenses-pending.export-excel', request()->query()) }}" class="d-flex align-items-center text-dark text-hover-primary">
                                        <i class="ki-duotone ki-file-excel fs-5 me-2">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                        Excel
                                    </a>
                                </div>
                                <div class="px-4 py-2">
                                    <a href="{{ route('expenses-pending.export-pdf', request()->query()) }}" target="_blank" class="d-flex align-items-center text-dark text-hover-primary">
                                        <i class="ki-duotone ki-file-pdf fs-5 me-2">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                        PDF
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Tarjetas de resumen -->
            <div class="row g-5 g-xl-9 mb-8">
                <div class="col-md-6 col-xl-4">
                    <div class="card card-flush h-md-100 border border-2 border-danger">
                        <div class="card-header">
                            <div class="card-title">
                                <h2 class="text-danger">Total Pendientes</h2>
                            </div>
                        </div>
                        <div class="card-body pt-1">
                            <div class="fw-bold text-danger mb-2 fs-2">{{ $totalPending }}</div>
                            <div class="fw-bold text-danger mb-5 fs-3">{{ number_format($totalPendingAmount, 2, ',', '.') }}</div>
                            <div class="text-gray-600">Movimientos sin procesar</div>
                        </div>
                    </div>
                </div>

                @if($usersSummary->isNotEmpty())
                    <div class="col-md-6 col-xl-4">
                        <div class="card card-flush h-md-100 border border-2 border-warning">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2 class="text-warning">Mas cri­tico</h2>
                                </div>
                            </div>
                            <div class="card-body pt-1">
                                <div class="fw-bold text-warning mb-2 fs-5">{{ $usersSummary->first()->name }}</div>
                                <div class="fw-bold text-warning mb-2 fs-2">{{ $usersSummary->first()->count }}</div>
                                <div class="fw-bold text-warning mb-5 fs-3">{{ number_format($usersSummary->first()->total_amount, 2, ',', '.') }}</div>
                                <div class="text-gray-600">Movimientos pendientes</div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="col-md-6 col-xl-4">
                    <div class="card card-flush h-md-100 border border-2 border-info">
                        <div class="card-header">
                            <div class="card-title">
                                <h2 class="text-info">Promedio</h2>
                            </div>
                        </div>
                        <div class="card-body pt-1">
                            @php
                                $avg = $totalPending > 0 ? $totalPendingAmount / $totalPending : 0;
                            @endphp
                            <div class="fw-bold text-info mb-5 fs-3">{{ number_format($avg, 2, ',', '.') }}</div>
                            <div class="text-gray-600">Monto promedio por movimiento</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Grafico de barras -->
            @if($usersSummary->isNotEmpty())
                <div class="card mb-8">
                    <div class="card-header">
                        <h3 class="card-title">Distribucii³n de Movimientos por Responsable</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="expensesChart" style="height: 300px;"></canvas>
                    </div>
                </div>
            @endif

            <!-- Desglose por usuario -->
            @if($usersSummary->isNotEmpty())
                <div class="card mb-8">
                    <div class="card-header">
                        <h3 class="card-title">Desglose por Responsable</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-row-bordered table-row-gray-300 align-middle gs-0 gy-4">
                                <thead>
                                    <tr class="fw-bold text-muted bg-light">
                                        <th>Responsable</th>
                                        <th class="text-end">Cantidad</th>
                                        <th class="text-end">Monto Total</th>
                                        <th class="text-end">%</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($usersSummary as $user)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="symbol symbol-40px me-3">
                                                        <div class="symbol-label fs-2 bg-light-primary text-primary">
                                                            {{ substr($user->name, 0, 1) }}
                                                        </div>
                                                    </div>
                                                    <div class="d-flex justify-content-start flex-column">
                                                        <a href="#" class="text-gray-900 fw-bold text-hover-primary mb-1 fs-6">{{ $user->name }}</a>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-end fw-bold">{{ $user->count }}</td>
                                            <td class="text-end fw-bold">{{ number_format($user->total_amount, 2, ',', '.') }}</td>
                                            <td class="text-end">
                                                @if($totalPendingAmount > 0)
                                                    <span class="badge badge-light-primary fs-7">
                                                        {{ number_format(($user->total_amount / $totalPendingAmount) * 100, 1) }}%
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Desglose por tarjeta -->
            @if($cardsSummary->isNotEmpty())
                <div class="card mb-8">
                    <div class="card-header">
                        <h3 class="card-title">Desglose por Tarjeta</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-row-bordered table-row-gray-300 align-middle gs-0 gy-4">
                                <thead>
                                    <tr class="fw-bold text-muted bg-light">
                                        <th>Tarjeta</th>
                                        <th>Banco</th>
                                        <th class="text-end">Cantidad</th>
                                        <th class="text-end">Monto Total</th>
                                        <th class="text-end">%</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($cardsSummary as $card)
                                        <tr>
                                            <td class="fw-bold">{{ $card->number }}</td>
                                            <td class="text-gray-600">{{ $card->bank_name }}</td>
                                            <td class="text-end fw-bold">{{ $card->count }}</td>
                                            <td class="text-end fw-bold">{{ number_format($card->total_amount, 2, ',', '.') }}</td>
                                            <td class="text-end">
                                                @if($totalPendingAmount > 0)
                                                    <span class="badge badge-light-danger fs-7">
                                                        {{ number_format(($card->total_amount / $totalPendingAmount) * 100, 1) }}%
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Listado detallado -->
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <h3 class="fw-bold">Listado de Movimientos Pendientes</h3>
                    </div>
                </div>
                <div class="card-body py-4">
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5">
                            <thead>
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th>Fecha</th>
                                    <th>Transaccion</th>
                                    <th>Tarjeta</th>
                                    <th>Responsable</th>
                                    <th>Monto</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                                @forelse($expenses as $expense)
                                    <tr>
                                        <td>{{ $expense->date->format('d/m/Y') }}</td>
                                        <td>{{ $expense->transaction_number }}</td>
                                        <td>
                                            @if($expense->card)
                                                {{ $expense->card->number }} - {{ optional($expense->card->bank)->name ?? 'N/A' }}
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td>{{ optional($expense->user)->name ?? 'N/A' }}</td>
                                        <td class="text-danger fw-bold">{{ number_format($expense->amount, 2, ',', '.') }}</td>
                                        <td>
                                            <a href="{{ route('expenses.show', $expense) }}" class="btn btn-icon btn-text-secondary btn-active-light-primary" title="Ver">
                                                <i class="ki-duotone ki-eye fs-2">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                </i>
                                            </a>
                                            @permission('expenses.edit')
                                                <a href="{{ route('expenses.edit', $expense) }}" class="btn btn-icon btn-text-secondary btn-active-light-primary" title="Editar">
                                                    <i class="ki-duotone ki-pencil fs-2">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                    </i>
                                                </a>
                                            @endpermission
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">No hay movimientos pendientes.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-center mt-5">
                        {{ $expenses->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Inicializar Select2
            if (typeof KTApp !== 'undefined' && typeof KTApp.initSelect2 === 'function') {
                KTApp.initSelect2();
            }

            // Grafico de barras
            const ctx = document.getElementById('expensesChart');
            if (ctx) {
                const labels = @json($chartLabels);
                const data = @json($chartData);

                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Monto (Pendiente)',
                            data: data,
                            backgroundColor: '#f1416c',
                            borderColor: '#f1416c',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '₲' + value.toLocaleString('es-PY', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                                    }
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return '₲' + context.parsed.y.toLocaleString('es-PY', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    }
                                }
                            }
                        }
                    }
                });
            }
        });
    </script>
@endsection