@extends('layouts.app')

@section('content')
    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <!--begin::Post-->
        <div class="content flex-row-fluid" id="kt_content">
            <!--begin::Layout-->
            <div class="d-flex flex-column flex-lg-row">
                <!--begin::Sidebar-->
                <div class="flex-column flex-lg-row-auto w-lg-250px w-xl-350px mb-10">
                    <!--begin::Card-->
                    <div class="card mb-5 mb-xl-8">
                        <!--begin::Card body-->
                        <div class="card-body">
                            <!--begin::Summary-->
                            <!--begin::User Info-->
                            <div class="d-flex flex-center flex-column py-5">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-100px symbol-circle mb-7">
                                    <img src="{{ asset('empty-user.png') }}" alt="image">
                                </div>
                                <!--end::Avatar-->
                                <!--begin::Name-->
                                <a href="#" class="fs-3 text-gray-800 text-hover-primary fw-bold mb-3">{{ $user->name }}</a>
                                <!--end::Name-->
                                <!--begin::Position-->
                                <div class="mb-9">
                                    <!--begin::Badge-->
                                    <div class="badge badge-lg badge-light-primary d-inline">
                                        {{ $user->roles->first()->display_name ?? 'Sin rol' }}
                                    </div>
                                    <!--begin::Badge-->
                                </div>
                                <!--end::Position-->
                                <!--begin::Info-->
                                <!--begin::Info heading-->
                                <div class="fw-bold mb-3">
                                    Tarjetas y Movimientos
                                    <span class="ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content="Número de tarjetas y movimientos vinculados a este usuario.">
                                        <i class="ki-duotone ki-information fs-7">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                            <span class="path3"></span>
                                        </i>
                                    </span>
                                </div>
                                <!--end::Info heading-->
                                <div class="d-flex flex-wrap flex-center">
                                    <!--begin::Stats-->
                                    <div class="border border-gray-300 border-dashed rounded py-3 px-3 mb-3">
                                        <div class="fs-4 fw-bold text-gray-700">
                                            <span class="w-75px">{{ $user->cards->count() }}</span>
                                        </div>
                                        <div class="fw-semibold text-muted">Tarjetas</div>
                                    </div>
                                    <!--end::Stats-->
                                    <!--begin::Stats-->
                                    <div class="border border-gray-300 border-dashed rounded py-3 px-3 mx-4 mb-3">
                                        <div class="fs-4 fw-bold text-gray-700">
                                            <span class="w-50px">{{ $user->expenses->count() }}</span>
                                        </div>
                                        <div class="fw-semibold text-muted">Movimientos</div>
                                    </div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::User Info-->
                            <!--end::Summary-->
                            <!--begin::Details toggle-->
                            <div class="d-flex flex-stack fs-4 py-3">
                                <div class="fw-bold rotate collapsible" data-bs-toggle="collapse" href="#kt_user_view_details" role="button" aria-expanded="false" aria-controls="kt_user_view_details">
                                    Detalles
                                    <span class="ms-2 rotate-180">
                                        <i class="ki-duotone ki-down fs-3"></i>
                                    </span>
                                </div>
                                <span data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-original-title="Editar detalles del usuario">
                                    <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-light-primary">Editar</a>
                                </span>
                            </div>
                            <!--end::Details toggle-->
                            <div class="separator"></div>
                            <!--begin::Details content-->
                            <div id="kt_user_view_details" class="collapse show">
                                <div class="pb-5 fs-6">
                                    <!--begin::Details item-->
                                    <div class="fw-bold mt-5">ID de Cuenta</div>
                                    <div class="text-gray-600">{{ $user->id }}</div>
                                    <!--begin::Details item-->
                                    <!--begin::Details item-->
                                    <div class="fw-bold mt-5">Email</div>
                                    <div class="text-gray-600">
                                        <a href="mailto:{{ $user->email }}" class="text-gray-600 text-hover-primary">{{ $user->email }}</a>
                                    </div>
                                    <!--begin::Details item-->
                                    <!--begin::Details item-->
                                    <div class="fw-bold mt-5">Estado</div>
                                    <div class="text-gray-600">
                                        @if($user->status)
                                            <span class="badge badge-light-success">Activo</span>
                                        @else
                                            <span class="badge badge-light-danger">Inactivo</span>
                                        @endif
                                    </div>
                                    <!--begin::Details item-->
                                    <!--begin::Details item-->
                                    <div class="fw-bold mt-5">Fecha de Creación</div>
                                    <div class="text-gray-600">{{ $user->created_at->format('d M Y, H:i') }}</div>
                                    <!--begin::Details item-->
                                </div>
                            </div>
                            <!--end::Details content-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Sidebar-->
                <!--begin::Content-->
                <div class="flex-lg-row-fluid ms-lg-15">
                    <!--begin:::Tabs-->
                    <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8" role="tablist">
                        <!--begin:::Tab item-->
                        <li class="nav-item" role="presentation">
                            <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_user_view_overview_tab" aria-selected="true" role="tab">Vista General</a>
                        </li>
                        <!--end:::Tab item-->
                        <!--begin:::Tab item-->
                        <li class="nav-item" role="presentation">
                            <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_user_view_cards_tab" aria-selected="false" tabindex="-1" role="tab">Tarjetas</a>
                        </li>
                        <!--end:::Tab item-->
                        <!--begin:::Tab item-->
                        <li class="nav-item" role="presentation">
                            <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_user_view_expenses_tab" aria-selected="false" tabindex="-1" role="tab">Movimientos</a>
                        </li>
                        <!--end:::Tab item-->
                    </ul>
                    <!--end:::Tabs-->
                    <!--begin:::Tab content-->
                    <div class="tab-content" id="myTabContent">
                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade show active" id="kt_user_view_overview_tab" role="tabpanel">
                            <!--begin::Card-->
                            <div class="card card-flush mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header mt-6">
                                    <!--begin::Card title-->
                                    <div class="card-title flex-column">
                                        <h2 class="mb-1">Resumen</h2>
                                        <div class="fs-6 fw-semibold text-muted">Información general del usuario</div>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body p-9 pt-4">
                                    <div class="row g-9">
                                        <div class="col-lg-6">
                                            <div class="fw-bold text-gray-900 mb-2">Rol</div>
                                            <div class="text-gray-600">{{ $user->roles->first()->display_name ?? 'Sin rol' }}</div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="fw-bold text-gray-900 mb-2">Estado</div>
                                            <div class="text-gray-600">
                                                @if($user->status)
                                                    <span class="badge badge-light-success">Activo</span>
                                                @else
                                                    <span class="badge badge-light-danger">Inactivo</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="fw-bold text-gray-900 mb-2">Email</div>
                                            <div class="text-gray-600">{{ $user->email }}</div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="fw-bold text-gray-900 mb-2">Fecha de Creación</div>
                                            <div class="text-gray-600">{{ $user->created_at->format('d M Y, H:i') }}</div>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end:::Tab pane-->
                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade" id="kt_user_view_cards_tab" role="tabpanel">
                            <!--begin::Card-->
                            <div class="card card-flush mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header mt-6">
                                    <!--begin::Card title-->
                                    <div class="card-title flex-column">
                                        <h2 class="mb-1">Tarjetas Vinculadas</h2>
                                        <div class="fs-6 fw-semibold text-muted">{{ $cards->total() }} tarjetas encontradas</div>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body p-9 pt-4">
                                    <!--begin::Table-->
                                    <div class="table-responsive">
                                        <table class="table align-middle table-row-dashed gy-5">
                                            <thead class="border-bottom border-gray-200 fs-7 fw-bold">
                                                <tr class="text-start text-muted text-uppercase gs-0">
                                                    <th class="min-w-150px">Banco</th>
                                                    <th class="min-w-150px">Número de Tarjeta</th>
                                                    <th class="min-w-100px">Estado</th>
                                                    <th class="text-end min-w-100px">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody class="fs-6 fw-semibold text-gray-600">
                                                @foreach($cards as $card)
                                                    <tr>
                                                        <td>{{ $card->bank->name }}</td>
                                                        <td>{{ $card->masked_number }}</td>
                                                        <td>
                                                            @if($card->status)
                                                                <span class="badge badge-light-success">Activa</span>
                                                            @else
                                                                <span class="badge badge-light-danger">Inactiva</span>
                                                            @endif
                                                        </td>
                                                        <td class="text-end">
                                                            <a href="{{ route('cards.show', $card->id) }}" class="btn btn-sm btn-light-primary">Ver</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <!--end::Table-->
                                    <!--begin::Pagination-->
                                    <div class="d-flex justify-content-center mt-10">
                                        {{ $cards->links() }}
                                    </div>
                                    <!--end::Pagination-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end:::Tab pane-->
                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade" id="kt_user_view_expenses_tab" role="tabpanel">
                            <!--begin::Card-->
                            <div class="card card-flush mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header mt-6">
                                    <!--begin::Card title-->
                                    <div class="card-title flex-column">
                                        <h2 class="mb-1">Movimientos Vinculados</h2>
                                        <div class="fs-6 fw-semibold text-muted">{{ $expenses->total() }} movimientos encontrados</div>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body p-9 pt-4">
                                    <!--begin::Table-->
                                    <div class="table-responsive">
                                        <table class="table align-middle table-row-dashed gy-5">
                                            <thead class="border-bottom border-gray-200 fs-7 fw-bold">
                                                <tr class="text-start text-muted text-uppercase gs-0">
                                                    <th class="min-w-100px">Fecha</th>
                                                    <th class="min-w-200px">Concepto</th>
                                                    <th class="min-w-150px">Proveedor</th>
                                                    <th class="min-w-100px">Monto</th>
                                                    <th class="min-w-150px">Estado</th>
                                                    <th class="text-end min-w-100px">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody class="fs-6 fw-semibold text-gray-600">
                                                @foreach($expenses as $expense)
                                                    <tr>
                                                        <td>{{ $expense->date->format('d M Y') }}</td>
                                                        <td>{{ optional($expense->expenseConcept)->name }}</td>
                                                        <td>{{ optional($expense->supplier)->name }}</td>
                                                        <td>{{ number_format($expense->amount, 2) }}</td>
                                                        <td>
                                                            @if($expense->status == 0)
                                                                <span class="badge badge-light-warning">Pendiente</span>
                                                            @elseif($expense->status == 1)
                                                                <span class="badge badge-light-primary">Procesado</span>
                                                            @elseif($expense->status == 2)
                                                                <span class="badge badge-light-success">Conciliado</span>
                                                            @endif
                                                        </td>
                                                        <td class="text-end">
                                                            <a href="{{ route('expenses.show', $expense->id) }}" class="btn btn-sm btn-light-primary">Ver</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <!--end::Table-->
                                    <!--begin::Pagination-->
                                    <div class="d-flex justify-content-center mt-10">
                                        {{ $expenses->links() }}
                                    </div>
                                    <!--end::Pagination-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end:::Tab pane-->
                    </div>
                    <!--end:::Tab content-->
                </div>
                <!--end::Content-->
            </div>
            <!--end::Layout-->
        </div>
        <!--end::Post-->
    </div>
@endsection