@extends('layouts.app')

@section('title', 'Tablero')
@section('page_title', 'Informe Gerencial')
@section('page_breadcrumb', 'Tablero')
@section('page_breadcrumb_item', 'Comercial')

@section('content')
    @permission('home.dashboard')
        <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">
                <!--begin::Row-->
                <div class="row gx-5 gx-xl-10">
            <!--begin::Col - Resumen de Pendientes-->
            <div class="col-xl-4 mb-10">
                <!--begin::Lists Widget 19-->
                <div class="card card-flush h-xl-100">
                    <!--begin::Heading-->
                    <div class="card-header rounded bgi-no-repeat bgi-size-cover bgi-position-y-top bgi-position-x-center align-items-start h-250px" style="background-image:url('{{ asset('assets/media/svg/shapes/top-green.png') }}')" data-bs-theme="light">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column text-white pt-15">
                            <span class="fw-bold fs-2x mb-3">Movimientos Pendientes</span>
                            <div class="fs-4 text-white">
                                <span class="opacity-75">Tienes</span>
                                <span class="position-relative d-inline-block">
                                    <span class="link-white opacity-75-hover fw-bold d-block mb-1">
                                        {{ $pendingByUser->sum('qty') }} movimientos
                                    </span>
                                    <!--begin::Separator-->
                                    <span class="position-absolute opacity-50 bottom-0 start-0 border-2 border-body border-bottom w-100"></span>
                                    <!--end::Separator-->
                                </span>
                                <span class="opacity-75">por procesar</span>
                            </div>
                        </h3>
                        <!--end::Title-->
                        <!--begin::Toolbar-->
                        <div class="card-toolbar pt-5">
                            <span class="badge bg-white bg-opacity-25 text-white py-2 px-3">
                                {{ $monthStart->format('m/Y') }}
                            </span>
                        </div>
                        <!--end::Toolbar-->
                    </div>
                    <!--end::Heading-->
                    <!--begin::Body-->
                    <div class="card-body mt-n20">
                        <!--begin::Stats-->
                        <div class="mt-n20 position-relative">
                            <!--begin::Row-->
                            <div class="row g-3 g-lg-6">
                                <!--begin::Col-->
                                <div class="col-6">
                                    <!--begin::Items-->
                                    <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-30px me-5 mb-8">
                                            <span class="symbol-label">
                                                <i class="ki-duotone ki-time fs-1 text-warning">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Stats-->
                                        <div class="m-0">
                                            <!--begin::Number-->
                                            <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($processedMonthCount, 0, ',', '.') }}</span>
                                            <!--end::Number-->
                                            <!--begin::Desc-->
                                            <span class="text-gray-500 fw-semibold fs-6">Procesados</span>
                                            <!--end::Desc-->
                                        </div>
                                        <!--end::Stats-->
                                    </div>
                                    <!--end::Items-->
                                </div>
                                <!--end::Col-->
                                <!--begin::Col-->
                                <div class="col-6">
                                    <!--begin::Items-->
                                    <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-30px me-5 mb-8">
                                            <span class="symbol-label">
                                                <i class="ki-duotone ki-check-circle fs-1 text-success">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Stats-->
                                        <div class="m-0">
                                            <!--begin::Number-->
                                            <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($conciliatedMonthCount, 0, ',', '.') }}</span>
                                            <!--end::Number-->
                                            <!--begin::Desc-->
                                            <span class="text-gray-500 fw-semibold fs-6">Conciliados</span>
                                            <!--end::Desc-->
                                        </div>
                                        <!--end::Stats-->
                                    </div>
                                    <!--end::Items-->
                                </div>
                                <!--end::Col-->
                                <!--begin::Col-->
                                <div class="col-6">
                                    <!--begin::Items-->
                                    <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-30px me-5 mb-8">
                                            <span class="symbol-label">
                                                <i class="ki-duotone ki-dollar fs-1 text-primary">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                </i>
                                            </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Stats-->
                                        <div class="m-0">
                                            <!--begin::Number-->
                                            <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($processedMonthAmount, 0, ',', '.') }}</span>
                                            <!--end::Number-->
                                            <!--begin::Desc-->
                                            <span class="text-gray-500 fw-semibold fs-6">Monto Procesado</span>
                                            <!--end::Desc-->
                                        </div>
                                        <!--end::Stats-->
                                    </div>
                                    <!--end::Items-->
                                </div>
                                <!--end::Col-->
                                <!--begin::Col-->
                                <div class="col-6">
                                    <!--begin::Items-->
                                    <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-30px me-5 mb-8">
                                            <span class="symbol-label">
                                                <i class="ki-duotone ki-wallet fs-1 text-success">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                </i>
                                            </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Stats-->
                                        <div class="m-0">
                                            <!--begin::Number-->
                                            <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($conciliatedMonthAmount, 0, ',', '.') }}</span>
                                            <!--end::Number-->
                                            <!--begin::Desc-->
                                            <span class="text-gray-500 fw-semibold fs-6">Monto Conciliado</span>
                                            <!--end::Desc-->
                                        </div>
                                        <!--end::Stats-->
                                    </div>
                                    <!--end::Items-->
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Stats-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Lists Widget 19-->
            </div>
            <!--end::Col-->

            <!--begin::Col - Gráficos de Movimientos-->
            <div class="col-xl-8 mb-10">
                <!--begin::Row-->
                <div class="row g-5 g-xl-10">
                    <!--begin::Col - Movimientos por Proveedor-->
                    <div class="col-xl-6 mb-xl-10">
                        <!--begin::Chart Widget-->
                        <div class="card card-flush h-xl-100">
                            <!--begin::Header-->
                            <div class="card-header pt-5">
                                <!--begin::Title-->
                                <h4 class="card-title d-flex align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">Movimientos por Proveedor</span>
                                    <span class="text-gray-500 mt-1 fw-bold fs-7">Top 10 del mes</span>
                                </h4>
                                <!--end::Title-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body py-6">
                                <!--begin::Chart-->
                                <div class="min-h-auto">
                                    <canvas id="chartExpensesBySupplier" style="height: 200px"></canvas>
                                </div>
                                <!--end::Chart-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Chart Widget-->
                    </div>
                    <!--end::Col-->

                    <!--begin::Col - Movimientos por Concepto-->
                    <div class="col-xl-6 mb-5 mb-xl-10">
                        <!--begin::Chart Widget-->
                        <div class="card card-flush h-xl-100">
                            <!--begin::Header-->
                            <div class="card-header pt-5">
                                <!--begin::Title-->
                                <h4 class="card-title d-flex align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">Movimientos por Concepto</span>
                                    <span class="text-gray-500 mt-1 fw-bold fs-7">Top 10 del mes</span>
                                </h4>
                                <!--end::Title-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body py-6">
                                <!--begin::Chart-->
                                <div class="min-h-auto">
                                    <canvas id="chartExpensesByConcept" style="height: 200px"></canvas>
                                </div>
                                <!--end::Chart-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Chart Widget-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <!--begin::Engage widget 4-->
                <div class="card border-transparent" data-bs-theme="light" style="background-color: #1C325E;">
                    <!--begin::Body-->
                    <div class="card-body d-flex ps-xl-15">
                        <!--begin::Wrapper-->
                        <div class="m-0">
                            <!--begin::Title-->
                            <div class="position-relative fs-2x z-index-2 fw-bold text-white mb-7">
                                <span class="me-2">Tienes
                                <span class="position-relative d-inline-block text-danger">
                                    <span class="text-danger opacity-75-hover">{{ $pendingByUser->sum('qty') }} movimientos pendientes</span>
                                    <!--begin::Separator-->
                                    <span class="position-absolute opacity-50 bottom-0 start-0 border-4 border-danger border-bottom w-100"></span>
                                    <!--end::Separator-->
                                </span></span>
                                <br />por un total de {{ number_format($pendingByUser->sum('total'), 2, ',', '.') }}
                            </div>
                            <!--end::Title-->
                            <!--begin::Action-->
                            <div class="mb-3">
                                @permission('expenses.index')
                                    <button type="button" class="btn btn-danger fw-semibold me-2" data-bs-toggle="modal" data-bs-target="#kt_modal_pending_expenses">
                                        Ver Movimientos Pendientes
                                    </button>
                                @endpermission
                                @permission('expenses.create')
                                    <a href="{{ route('expenses.create') }}" class="btn btn-color-white bg-white bg-opacity-15 bg-hover-opacity-25 fw-semibold">Nuevo Movimiento</a>
                                @endpermission
                            </div>
                            <!--begin::Action-->
                        </div>
                        <!--begin::Wrapper-->
                        <!--begin::Illustration-->
                        <img src="{{ asset('assets/media/illustrations/sigma-1/17-dark.png') }}" class="position-absolute me-3 bottom-0 end-0 h-200px" alt="" />
                        <!--end::Illustration-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Engage widget 4-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!--begin::Row-->
        <div class="row g-5 g-xl-10">
            <!--begin::Col - Pendientes por Usuario-->
            <div class="col-xl-4 mb-xl-10">
                <!--begin::List widget 20-->
                <div class="card h-xl-100">
                    <!--begin::Header-->
                    <div class="card-header border-0 pt-5">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-900">Pendientes por Usuario</span>
                            <span class="text-muted mt-1 fw-semibold fs-7">{{ $pendingByUser->count() }} usuarios con pendientes</span>
                        </h3>
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-6">
                        @forelse($pendingByUser as $row)
                            <!--begin::Item-->
                            <div class="d-flex flex-stack">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-40px me-4">
                                    <div class="symbol-label fs-2 fw-semibold bg-light-primary text-primary">
                                        {{ strtoupper(substr($row->user_name, 0, 1)) }}
                                    </div>
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Section-->
                                <div class="d-flex align-items-center flex-row-fluid flex-wrap">
                                    <!--begin:Author-->
                                    <div class="flex-grow-1 me-2">
                                        <span class="text-gray-800 fs-6 fw-bold">{{ $row->user_name }}</span>
                                        <span class="text-muted fw-semibold d-block fs-7">{{ number_format($row->qty, 0, ',', '.') }} movimientos</span>
                                    </div>
                                    <!--end:Author-->
                                    <!--begin::Amount-->
                                    <span class="badge badge-light-primary fs-7 fw-bold">{{ number_format($row->total, 0, ',', '.') }}</span>
                                    <!--end::Amount-->
                                </div>
                                <!--end::Section-->
                            </div>
                            <!--end::Item-->
                            @if(!$loop->last)
                                <!--begin::Separator-->
                                <div class="separator separator-dashed my-4"></div>
                                <!--end::Separator-->
                            @endif
                        @empty
                            <div class="text-center text-muted py-10">
                                <i class="ki-duotone ki-information-5 fs-3x mb-5">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                </i>
                                <div class="fw-semibold">No hay movimientos pendientes</div>
                            </div>
                        @endforelse
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::List widget 20-->
            </div>
            <!--end::Col-->

            <!--begin::Col - Detalle de Movimientos por Proveedor-->
            <div class="col-xl-8 mb-5 mb-xl-10">
                <!--begin::Table Widget-->
                <div class="card card-flush h-xl-100">
                    <!--begin::Header-->
                    <div class="card-header pt-7">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Detalle por Proveedor</span>
                            <span class="text-gray-500 mt-1 fw-semibold fs-6">Movimientos del mes actual</span>
                        </h3>
                        <!--end::Title-->
                        <!--begin::Toolbar-->
                        <div class="card-toolbar">
                            <span class="badge badge-light-primary">{{ $monthStart->format('m/Y') }}</span>
                        </div>
                        <!--end::Toolbar-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-6">
                        <div class="table-responsive">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-3">
                                <!--begin::Table head-->
                                <thead>
                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                        <th class="min-w-200px">Proveedor</th>
                                        <th class="text-end min-w-100px">Cantidad</th>
                                        <th class="text-end min-w-125px">Monto Total</th>
                                        <th class="text-end min-w-100px">Promedio</th>
                                    </tr>
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-semibold text-gray-700">
                                    @forelse($expensesBySupplier as $row)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="symbol symbol-35px symbol-circle me-3">
                                                        <span class="symbol-label bg-light-info text-info fw-bold">
                                                            {{ strtoupper(substr($row->supplier_name, 0, 1)) }}
                                                        </span>
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <span class="text-gray-800 fw-bold">{{ $row->supplier_name }}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-end">
                                                <span class="badge badge-light-primary">{{ number_format($row->qty, 0, ',', '.') }}</span>
                                            </td>
                                            <td class="text-end fw-bold">{{ number_format($row->total, 2, ',', '.') }}</td>
                                            <td class="text-end text-muted">{{ number_format($row->total / $row->qty, 2, ',', '.') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-10">Sin datos para mostrar</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Table Widget-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!--begin::Row-->
        <div class="row g-5 g-xl-10">
            <!--begin::Col - Detalle por Concepto (Lista)-->
            <div class="col-xl-4">
                <!--begin::List widget 21-->
                <div class="card card-flush h-xl-100">
                    <!--begin::Header-->
                    <div class="card-header border-0 pt-5">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-900">Movimientos por Concepto</span>
                            <span class="text-muted mt-1 fw-semibold fs-7">Distribución del mes</span>
                        </h3>
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-5">
                        @forelse($expensesByConcept as $row)
                            <!--begin::Item-->
                            <div class="d-flex flex-stack">
                                <!--begin::Wrapper-->
                                <div class="d-flex align-items-center me-3">
                                    <!--begin::Logo-->
                                    <div class="symbol symbol-40px me-4">
                                        <span class="symbol-label bg-light-{{ ['success', 'warning', 'info', 'primary', 'danger'][$loop->index % 5] }}">
                                            <i class="ki-duotone ki-category fs-2 text-{{ ['success', 'warning', 'info', 'primary', 'danger'][$loop->index % 5] }}">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                                <span class="path3"></span>
                                                <span class="path4"></span>
                                            </i>
                                        </span>
                                    </div>
                                    <!--end::Logo-->
                                    <!--begin::Section-->
                                    <div class="flex-grow-1">
                                        <!--begin::Text-->
                                        <span class="text-gray-800 fs-6 fw-bold lh-0">{{ $row->concept_name }}</span>
                                        <!--end::Text-->
                                        <!--begin::Description-->
                                        <span class="text-muted fw-semibold d-block fs-7">{{ number_format($row->qty, 0, ',', '.') }} gastos</span>
                                        <!--end::Description=-->
                                    </div>
                                    <!--end::Section-->
                                </div>
                                <!--end::Wrapper-->
                                <!--begin::Statistics-->
                                <div class="d-flex align-items-center w-100 mw-125px">
                                    <!--begin::Progress-->
                                    <div class="progress h-6px w-100 me-2 bg-light-{{ ['success', 'warning', 'info', 'primary', 'danger'][$loop->index % 5] }}">
                                        <div class="progress-bar bg-{{ ['success', 'warning', 'info', 'primary', 'danger'][$loop->index % 5] }}"
                                             role="progressbar"
                                             style="width: {{ min(100, ($row->total / $expensesByConcept->max('total')) * 100) }}%"
                                             aria-valuenow="{{ ($row->total / $expensesByConcept->max('total')) * 100 }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                    <!--end::Progress-->
                                    <!--begin::Value-->
                                    <span class="text-gray-500 fw-semibold fs-8">{{ number_format($row->total, 0, ',', '.') }}</span>
                                    <!--end::Value-->
                                </div>
                                <!--end::Statistics-->
                            </div>
                            <!--end::Item-->
                            @if(!$loop->last)
                                <!--begin::Separator-->
                                <div class="separator separator-dashed my-3"></div>
                                <!--end::Separator-->
                            @endif
                        @empty
                            <div class="text-center text-muted py-10">
                                <i class="ki-duotone ki-information-5 fs-3x mb-5">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                </i>
                                <div class="fw-semibold">Sin movimientos en el mes</div>
                            </div>
                        @endforelse
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::List widget 21-->
            </div>
            <!--end::Col-->

            <!--begin::Col - Gráfico de Actividad-->
            <div class="col-xl-8">
                <!--begin::Chart widget 18-->
                <div class="card card-flush h-xl-100">
                    <!--begin::Header-->
                    <div class="card-header pt-7">
                        <!--begin::Title-->
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Actividad de Movimientos</span>
                            <span class="text-gray-500 mt-1 fw-semibold fs-6">Comparativa por proveedor</span>
                        </h3>
                        <!--end::Title-->
                        <!--begin::Toolbar-->
                        <div class="card-toolbar">
                            <span class="badge badge-light-primary fs-7 fw-bold">Mes: {{ $monthStart->format('m/Y') }}</span>
                        </div>
                        <!--end::Toolbar-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body d-flex align-items-end px-0 pt-3 pb-5">
                        <!--begin::Chart-->
                        <div id="chartActivityBySupplier" class="h-325px w-100 min-h-auto ps-4 pe-6"></div>
                        <!--end::Chart-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Chart widget 18-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->

        <!--begin::Modal - Movimientos Pendientes-->
        <div class="modal fade" id="kt_modal_pending_expenses" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-900px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">Movimientos Pendientes</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <i class="ki-duotone ki-cross fs-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        @if($pendingExpenses->count() > 0)
                            <!--begin::Table-->
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5">
                                    <!--begin::Table head-->
                                    <thead>
                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                            <th class="min-w-100px">Fecha</th>
                                            <th class="min-w-150px">Proveedor</th>
                                            <th class="min-w-125px">Concepto</th>
                                            <th class="min-w-100px">Usuario</th>
                                            <th class="text-end min-w-100px">Monto</th>
                                            <th class="text-end min-w-70px">Acciones</th>
                                        </tr>
                                    </thead>
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody class="fw-semibold text-gray-700">
                                        @foreach($pendingExpenses as $expense)
                                            <tr>
                                                <td>
                                                    <span class="text-gray-800 fw-bold">{{ $expense->date->format('d/m/Y') }}</span>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-30px symbol-circle me-3">
                                                            <span class="symbol-label bg-light-info text-info fw-bold">
                                                                {{ strtoupper(substr($expense->supplier->name ?? 'N/A', 0, 1)) }}
                                                            </span>
                                                        </div>
                                                        <div class="d-flex flex-column">
                                                            <span class="text-gray-800">{{ $expense->supplier->name ?? 'N/A' }}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-light-primary">{{ $expense->expenseConcept->name ?? 'N/A' }}</span>
                                                </td>
                                                <td>
                                                    <span class="text-gray-800">{{ $expense->user->name ?? 'N/A' }}</span>
                                                </td>
                                                <td class="text-end">
                                                    <span class="text-gray-900 fw-bold">{{ number_format($expense->amount, 2, ',', '.') }}</span>
                                                </td>
                                                <td class="text-end">
                                                    @permission('expenses.index')
                                                        <a href="{{ route('expenses.show', $expense->id) }}" class="btn btn-sm btn-light btn-active-light-primary" title="Ver detalle">
                                                            <i class="ki-duotone ki-eye fs-5">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                                <span class="path3"></span>
                                                            </i>
                                                        </a>
                                                    @endpermission
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <!--end::Table body-->
                                </table>
                            </div>
                            <!--end::Table-->
                            <!--begin::Summary-->
                            <div class="d-flex justify-content-end mt-5 pt-5 border-top">
                                <div class="text-end">
                                    <div class="fs-6 text-gray-600 mb-2">Total de movimientos pendientes:</div>
                                    <div class="fs-2 fw-bold text-gray-900">{{ number_format($pendingExpenses->sum('amount'), 2, ',', '.') }}</div>
                                </div>
                            </div>
                            <!--end::Summary-->
                        @else
                            <!--begin::Empty state-->
                            <div class="text-center py-10">
                                <i class="ki-duotone ki-information-5 fs-5x text-muted mb-5">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                </i>
                                <div class="fw-bold fs-3 text-gray-600">No hay movimientos pendientes</div>
                                <div class="text-muted fs-6 mt-2">Todos los movimientos han sido procesados</div>
                            </div>
                            <!--end::Empty state-->
                        @endif
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - Movimientos Pendientes-->

        @push('scripts')
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script>
                // Datos para los gráficos
                const supplierLabels = @json($expensesBySupplier->pluck('supplier_name'));
                const supplierTotals = @json($expensesBySupplier->pluck('total'));
                const supplierQty    = @json($expensesBySupplier->pluck('qty'));
                const conceptLabels  = @json($expensesByConcept->pluck('concept_name'));
                const conceptTotals  = @json($expensesByConcept->pluck('total'));

                const moneyTooltip = (value) => {
                    try {
                        return Number(value).toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                    } catch (e) {
                        return value;
                    }
                };

                // Colores para los gráficos
                const colors = {
                    primary: 'rgba(54, 162, 235, 0.8)',
                    success: 'rgba(75, 192, 192, 0.8)',
                    warning: 'rgba(255, 206, 86, 0.8)',
                    danger: 'rgba(255, 99, 132, 0.8)',
                    info: 'rgba(153, 102, 255, 0.8)'
                };

                // Gráfico de Movimientos por Proveedor (Doughnut)
                if (document.getElementById('chartExpensesBySupplier')) {
                    new Chart(document.getElementById('chartExpensesBySupplier'), {
                        type: 'doughnut',
                        data: {
                            labels: supplierLabels,
                            datasets: [{
                                label: 'Monto',
                                data: supplierTotals,
                                backgroundColor: [
                                    colors.primary,
                                    colors.success,
                                    colors.warning,
                                    colors.danger,
                                    colors.info,
                                    'rgba(255, 159, 64, 0.8)',
                                    'rgba(201, 203, 207, 0.8)',
                                    'rgba(100, 181, 246, 0.8)',
                                    'rgba(129, 199, 132, 0.8)',
                                    'rgba(255, 138, 101, 0.8)'
                                ],
                                borderWidth: 0
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom',
                                    labels: {
                                        boxWidth: 12,
                                        padding: 10,
                                        font: {
                                            size: 11
                                        }
                                    }
                                },
                                tooltip: {
                                    callbacks: {
                                        label: (ctx) => ctx.label + ': ' + moneyTooltip(ctx.parsed)
                                    }
                                }
                            }
                        }
                    });
                }

                // Gráfico de Movimientos por Concepto (Doughnut)
                if (document.getElementById('chartExpensesByConcept')) {
                    new Chart(document.getElementById('chartExpensesByConcept'), {
                        type: 'doughnut',
                        data: {
                            labels: conceptLabels,
                            datasets: [{
                                label: 'Monto',
                                data: conceptTotals,
                                backgroundColor: [
                                    colors.success,
                                    colors.warning,
                                    colors.info,
                                    colors.primary,
                                    colors.danger,
                                    'rgba(255, 159, 64, 0.8)',
                                    'rgba(201, 203, 207, 0.8)',
                                    'rgba(100, 181, 246, 0.8)',
                                    'rgba(129, 199, 132, 0.8)',
                                    'rgba(255, 138, 101, 0.8)'
                                ],
                                borderWidth: 0
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'bottom',
                                    labels: {
                                        boxWidth: 12,
                                        padding: 10,
                                        font: {
                                            size: 11
                                        }
                                    }
                                },
                                tooltip: {
                                    callbacks: {
                                        label: (ctx) => ctx.label + ': ' + moneyTooltip(ctx.parsed)
                                    }
                                }
                            }
                        }
                    });
                }

                // Gráfico de Actividad por Proveedor (Bar horizontal)
                if (document.getElementById('chartActivityBySupplier')) {
                    new Chart(document.getElementById('chartActivityBySupplier'), {
                        type: 'bar',
                        data: {
                            labels: supplierLabels,
                            datasets: [
                                {
                                    label: 'Cantidad',
                                    data: supplierQty,
                                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    borderWidth: 1,
                                    yAxisID: 'y'
                                },
                                {
                                    label: 'Monto Total',
                                    data: supplierTotals,
                                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                                    borderColor: 'rgba(75, 192, 192, 1)',
                                    borderWidth: 1,
                                    yAxisID: 'y1'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            interaction: {
                                mode: 'index',
                                intersect: false
                            },
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'top'
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(ctx) {
                                            let label = ctx.dataset.label || '';
                                            if (label) {
                                                label += ': ';
                                            }
                                            if (ctx.datasetIndex === 1) {
                                                label += moneyTooltip(ctx.parsed.y);
                                            } else {
                                                label += ctx.parsed.y;
                                            }
                                            return label;
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    type: 'linear',
                                    display: true,
                                    position: 'left',
                                    title: {
                                        display: true,
                                        text: 'Cantidad'
                                    }
                                },
                                y1: {
                                    type: 'linear',
                                    display: true,
                                    position: 'right',
                                    title: {
                                        display: true,
                                        text: 'Monto'
                                    },
                                    grid: {
                                        drawOnChartArea: false
                                    },
                                    ticks: {
                                        callback: (v) => moneyTooltip(v)
                                    }
                                }
                            }
                        }
                    });
                }
            </script>
        @endpush
            </div>
        </div>
    @endpermission
@endsection