@extends('layouts.vertical', ['title' => getClientName($client)])

@section('css')
    @vite([
        'node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css',
        'node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css',
        'node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css',
        'node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css',
        'node_modules/select2/dist/css/select2.min.css',
        'node_modules/mohithg-switchery/dist/switchery.min.css'
    ])
@endsection

@section('content')
    <!-- Start Content-->
    <div class="container-fluid">
        
        @include('layouts.shared.page-title', [
            'breadcrumbs' => [
                ['title' => 'CRM', 'url' => '/dashboard'],
                ['title' => 'Clientes', 'url' => '/clients/list'],
                ['title' => getClientName($client) . ' :Perfil de Cliente'],
            ]
        ])

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h4 class="header-title mb-3">
                                    {{ getClientName($client) }}
                                    @if($client->type == 1)
                                        <span class="badge bg-primary"><i class="bi bi-person"></i> Natural</span>
                                    @elseif($client->type == 2)
                                        <span class="badge bg-success"><i class="bi bi-buildings"></i> Jurídico</span>
                                    @endif
                                </h4>

                                <div class="row mb-2">
                                    <div class="col-lg-4">
                                        <p class="mb-1 fw-bold">ID Cliente</p>
                                        <p>{{$client->id}}</p>
                                    </div>
                                    <div class="col-lg-4">
                                        <p class="mb-1 fw-bold">Correo Electrónico</p>
                                        <p>
                                            @php
                                                $email = $client->type == 1 ? $client->personal_email : $client->business_email;
                                            @endphp
                                            @if($email)
                                                {{ $email }}
                                            @else
                                                <span class="text-muted fst-italic">(Sin correo electrónico)</span>
                                            @endif
                                        </p>
                                    </div>
                                    <div class="col-lg-4">
                                        <p class="mb-1 fw-bold">Teléfono</p>
                                        <p>
                                            @php
                                                $phone = $client->type == 1 ? $client->personal_number : $client->business_phone;
                                            @endphp
                                            @if($phone)
                                                {{ $phone }}
                                            @else
                                                <span class="text-muted fst-italic">(Sin teléfono)</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="card widget-flat border">
                                            <div class="card-body">
                                                <div class="float-end">
                                                    <i class="bi bi-ticket-perforated widget-icon"></i>
                                                </div>
                                                <h5 class="text-muted fw-normal mt-0" title="Gestiones">Gestiones</h5>
                                                @if($countDelayedTicket > 0)
                                                    <h3 class="mt-3 mb-3 text-danger">{{ $countDelayedTicket }}</h3>
                                                    <p class="mb-0 text-muted">
                                                        <span class="text-danger me-2"><i class="bi bi-exclamation-triangle"></i> Gestiones Retrasadas</span>
                                                    </p>
                                                @else
                                                    <h3 class="mt-3 mb-3 text-success">0</h3>
                                                    <p class="mb-0 text-muted">
                                                        <span class="text-success me-2"><i class="bi bi-check-circle"></i> Sin Gestiones Retrasadas</span>
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="card widget-flat border">
                                            <div class="card-body">
                                                <div class="float-end">
                                                    <i class="bi bi-clipboard-x widget-icon"></i>
                                                </div>
                                                <h5 class="text-muted fw-normal mt-0" title="Pólizas Vencidas">Pólizas Vencidas</h5>
                                                @if($countfinalDatePast > 0)
                                                    <h3 class="mt-3 mb-3 text-danger">{{ $countfinalDatePast }}</h3>
                                                    <p class="mb-0 text-muted">
                                                        <span class="text-danger me-2"><i class="bi bi-exclamation-triangle"></i> Pólizas Vencidas</span>
                                                    </p>
                                                @else
                                                    <h3 class="mt-3 mb-3 text-success">0</h3>
                                                    <p class="mb-0 text-muted">
                                                        <span class="text-success me-2"><i class="bi bi-check-circle"></i> Sin Pólizas Vencidas</span>
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="card widget-flat border">
                                            <div class="card-body">
                                                <div class="float-end">
                                                    <i class="bi bi-clipboard-pulse widget-icon"></i>
                                                </div>
                                                <h5 class="text-muted fw-normal mt-0" title="Pólizas por Vencer">Pólizas por Vencer</h5>
                                                @if($countLessThanTwoMonths > 0)
                                                    <h3 class="mt-3 mb-3 text-warning">{{ $countLessThanTwoMonths }}</h3>
                                                    <p class="mb-0 text-muted">
                                                        <span class="text-warning me-2"><i class="bi bi-exclamation-circle"></i> Pólizas próximas a vencer</span>
                                                    </p>
                                                @else
                                                    <h3 class="mt-3 mb-3 text-success">0</h3>
                                                    <p class="mb-0 text-muted">
                                                        <span class="text-success me-2"><i class="bi bi-check-circle"></i> Sin Pólizas próximas a vencer</span>
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Acciones Rápidas -->
                        <div class="row mt-1">
                            <div class="col-12">
                                <h4 class="header-title mb-3">Acciones Rápidas</h4>
                                <div class="d-flex flex-wrap gap-2">
                                    @if(getPermission(Auth::user()->permissions , 'clients_edit'))
                                        <a href="{{url('/clients/edit/'.$client->id)}}" class="btn btn-primary">
                                            <i class="bi bi-pencil-square me-1"></i>Editar Cliente
                                        </a>
                                    @endif
                                    @if(getPermission(Auth::user()->permissions , 'policy_create'))
                                        <a href="{{url('/policy/create')}}" class="btn btn-info">
                                            <i class="bi bi-clipboard-check me-1"></i>Nueva Póliza
                                        </a>
                                    @endif
                                    @if(getPermission(Auth::user()->permissions , 'ticket_create'))
                                        <a href="{{url('/tickets/create')}}" class="btn btn-warning">
                                            <i class="bi bi-ticket-perforated me-1"></i>Nueva Gestión
                                        </a>
                                    @endif
                                    @if(getPermission(Auth::user()->permissions , 'claims_create'))
                                        <a href="{{url('/claims/create-list')}}" class="btn btn-pink">
                                            <i class="bi bi-file-earmark-medical me-1"></i>Nuevo Reclamo
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabs de información -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-tabs nav-bordered">
                            <li class="nav-item">
                                <a href="#tab-polizas" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
                                    <i class="bi bi-clipboard-check me-1"></i>Pólizas
                                    @if($countLessThanTwoMonths > 0) <span class="badge bg-warning">{{ $countLessThanTwoMonths }}</span>@endif
                                    @if($countfinalDatePast > 0) <span class="badge bg-danger">{{ $countfinalDatePast }}</span>@endif
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab-gestiones" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="bi bi-ticket-perforated me-1"></i>Gestiones
                                    @if($countDelayedTicket > 0) <span class="badge bg-danger">{{ $countDelayedTicket }}</span>@endif
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab-reclamos" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="bi bi-file-earmark-medical me-1"></i>Reclamos
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab-pagos" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="bi bi-credit-card me-1"></i>Pagos
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab-archivos" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="bi bi-cloud me-1"></i>NextCloud
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab-actividad" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="bi bi-activity me-1"></i>Actividad
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab-log" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="bi bi-code-slash me-1"></i>Log
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">

                            <div class="tab-pane show active" id="tab-polizas">
                                
                                <div class="table-responsive">
                                    <table id="policies-table" class="table dt-responsive nowrap w-100">
                                        <thead class="table-brand">
                                            <tr>
                                                <th>#</th>
                                                <th>Póliza</th>
                                                <th>Estado</th>
                                                <th>Ramo</th>
                                                <th>Aseguradora</th>
                                                <th>Cliente</th>
                                                <th>Inicio</th>
                                                <th>Fin</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Los datos se cargarán dinámicamente a través de DataTables y Ajax -->
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                            <div class="tab-pane" id="tab-gestiones">
                                
                                <div class="table-responsive">
                                    <table id="tickets-table" class="table dt-responsive nowrap w-100">
                                        <thead class="table-brand">
                                            <tr>
                                                <th>#</th>
                                                <th>Títulos</th>
                                                <th>Asesor</th>
                                                <th>Estado</th>
                                                <th>Prioridad</th>
                                                <th>Cliente</th>
                                                <th>Fecha</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Los datos se cargarán dinámicamente a través de DataTables y Ajax -->
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                            <div class="tab-pane" id="tab-reclamos">
                                <div class="alert alert-warning d-flex align-items-center" role="alert">
                                    <i class="bi bi-tools me-2"></i>
                                    <div>
                                        Esta funcionalidad se encuentra temporalmente deshabilitada mientras trabajamos en mejoras.
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab-pagos">
                                <div class="alert alert-warning d-flex align-items-center" role="alert">
                                    <i class="bi bi-tools me-2"></i>
                                    <div>
                                        Esta funcionalidad se encuentra temporalmente deshabilitada mientras trabajamos en mejoras.
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab-archivos">
                                @include('pages.clients.components.files-tab', ['files' => $files])
                            </div>

                            <div class="tab-pane" id="tab-actividad">

                                <div class="table-responsive">
                                    <table id="activities-table" class="table table-centered w-100 dt-responsive nowrap">
                                        <thead class="table-brand">
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Módulo</th>
                                                <th>Mensaje</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- Los datos se cargarán vía AJAX --}}
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                            <div class="tab-pane" id="tab-log">

                                <div class="table-responsive">
                                    <table id="logs-table" class="table table-centered w-100 dt-responsive nowrap">
                                        <thead class="table-brand">
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Usuario</th>
                                                <th>Campo</th>
                                                <th>Valor Anterior</th>
                                                <th>Valor Nuevo</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- Los datos se cargarán vía AJAX --}}
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @vite(['resources/js/pages/datatables.init.js'])
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        // Configuración para la tabla de pólizas
        var policiesColumns = [
            { data: 'id', name: 'id', orderable: false, searchable: false },
            { data: 'policy_id', name: 'policy_id', orderable: false, searchable: false },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'branch', name: 'branch', orderable: false, searchable: false },
            { data: 'insurer', name: 'insurer', orderable: false, searchable: false },
            { data: 'get_client.name', name: 'get_client.name', orderable: false, searchable: false },
            { data: 'policies.start_date', name: 'policies.start_date', orderable: false, searchable: false },
            { data: 'policies.final_date', name: 'policies.final_date', orderable: false, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ];

        var policiesPriorityColumns = [1, -1, 6, 7];
        var policiesSizeColumns = [
            { column: 5, width: "300px", className: "text-wrap" },
            { column: 3, width: "100px", className: "text-wrap" },
            { column: 4, width: "100px", className: "text-wrap" },
            { column: -1, className: "d-flex flex-wrap gap-1" }
        ];
        initializeDataTable('#policies-table', '/clients/policies/{{$client->id}}', policiesColumns, policiesPriorityColumns, policiesSizeColumns);

        // Configuración para la tabla de tickets
        var ticketsColumns = [
            { data: 'tickets.id', name: 'tickets.id', orderable: false, searchable: false },
            { data: 'tickets.title', name: 'tickets.title', orderable: false, searchable: false },
            { data: 'get_user.name', name: 'users.name', orderable: false, searchable: false },
            { data: 'tickets_status.ticket_status_name', name: 'tickets.ticket_status_name', orderable: false, searchable: false },
            { data: 'tickets_priorities.ticket_priority_name', name: 'tickets_priorities.ticket_priority_name', orderable: false, searchable: false },
            { data: 'get_client.name', name: 'clients.name', orderable: false, searchable: false },
            { data: 'tickets.created_at', name: 'tickets.created_at', orderable: false, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ];

        var ticketsPriorityColumns = [1, -1];
        var ticketsSizeColumns = [
            { column: 1, width: "300px", className: "text-wrap" },
            { column: 5, width: "300px", className: "text-wrap" }
        ];
        initializeDataTable('#tickets-table', '/clients/tickets/{{$client->id}}', ticketsColumns, ticketsPriorityColumns, ticketsSizeColumns);

        // Configuración para la tabla de actividades
        var activitiesColumns = [
            { data: 'date', name: 'created_at', orderable: false, searchable: false },
            { data: 'module', name: 'type', orderable: false, searchable: false },
            { data: 'message', name: 'message', orderable: false, searchable: false }
        ];

        var activitiesPriorityColumns = [0, 1];
        var activitiesSizeColumns = [
            { column: 0, width: "150px" },
            { column: 1, width: "100px" },
            { column: 2, className: "text-wrap" }
        ];
        initializeDataTable('#activities-table', '/clients/activities/{{$client->id}}', activitiesColumns, activitiesPriorityColumns, activitiesSizeColumns);

        // Configuración para la tabla de logs
        var logsColumns = [
            { data: 'date', name: 'created_at', orderable: false, searchable: false },
            { data: 'user', name: 'user', orderable: false, searchable: false },
            { data: 'field', name: 'field', orderable: false, searchable: false },
            { data: 'old_value', name: 'old_value', orderable: false, searchable: false },
            { data: 'new_value', name: 'new_value', orderable: false, searchable: false },
        ];

        var logsPriorityColumns = [0, 3];
        var logsSizeColumns = [
            { column: 0, width: "150px" },
            { column: 1, width: "120px" },
            { column: 2, width: "100px" },
            { column: 3, width: "80px" }
        ];
        initializeDataTable('#logs-table', '/clients/logs/{{$client->id}}', logsColumns, logsPriorityColumns, logsSizeColumns);
    });
    </script>
@endsection