@extends('layouts.vertical', ['title' => $user->name])

@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/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' => 'Usuarios', 'url' => '/users/list'],
                ['title' => $user->name . ': Perfil de Usuario'],
            ]
        ])

        <div class="row">
            <div class="col-xl-12 order-xl-1 order-2">

                <div class="card mb-2">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-sm-6">
                                <div class="d-flex align-items-start">
                                    @if ($user->avatar == null)
                                        <img class="d-flex align-self-center me-3 rounded-circle" src="{{url('/static/img/src/user_profile.png')}}" height="64">
                                    @else
                                        <img class="d-flex align-self-center me-3 rounded-circle" src="{{getFileUrl($user->avatar, '256_')}}" height="64">
                                    @endif
                                    <div class="w-100">
                                        <h4 class="mt-0 mb-2 font-16">{{$user->name}}</h4>
                                        <p class="mb-1"><b>Cargo:</b> {{ rvfj(json_encode(charges()),$user->charge) }}</p>
                                        <p class="mb-1"><b>Dirección:</b> {{$user->address}}</p>
                                        <p class="mb-0"><b>Registro:</b> {{ \Carbon\Carbon::parse($user->created_at)->format('d/m/Y') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <p class="mb-1 mt-3 mt-sm-0"><i class="mdi mdi-email me-1"></i> {{$user->email}}</p>
                                <p class="mb-0"><i class="mdi mdi-phone-classic me-1"></i> {{$user->phone}}</p>
                            </div>
                            <div class="col-sm-1">
                                <div class="text-center mt-3 mt-sm-0">
                                    <div class="badge font-14 
                                        {{ $user->status == 1 ? 'bg-soft-success text-success' : 'bg-soft-danger text-danger' }} 
                                        p-1">
                                        {{ $user->status == 1 ? 'Activo' : 'Bloqueado' }}
                                    </div>
                                </div>
                            </div>
                            @if(getPermission( Auth::user()->permissions , 'user_edit'))  
                            <div class="col-sm-1">
                                <div class="text-sm-end">
                                    <a href="{{ url('/users/edit/' . $user->id) }}" class="action-icon"> <i class="mdi mdi-square-edit-outline"></i></a>
                                </div>
                            </div> <!-- end col-->
                            @endif 
                        </div> <!-- end row -->
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col -->

        </div>
        <!-- end row -->

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="header-title">Actividad de usuario</h4>
                        <p class="text-muted font-13 mb-4">
                            Actividad detallada de usuario.
                        </p>

                        <table id="usersActivity" class="table dt-responsive nowrap w-100">
                            <thead class="table-brand">
                                <tr>
                                    <th>Título</th>
                                    <th>Mensaje</th>
                                    <th>Modulo</th>
                                    <th>Fecha</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Los datos se cargarán dinámicamente a través de DataTables y Ajax -->
                            </tbody>
                        </table>


                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
        <!-- end row-->

    </div> <!-- container -->

@endsection

@section('script') 
    @vite(['resources/js/pages/datatables.init.js'])
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var id = "{{ request()->route('id') }}"; // Obtiene el {id} de la URL
            
            var Columns = [
                { data: 'title', name: 'title', orderable: false, searchable: false },
                { data: 'message', name: 'message', orderable: false, searchable: false },
                { data: 'module', name: 'module', orderable: false, searchable: false },
                { data: 'date', name: 'date', orderable: false, searchable: false }
                ];

                var priorityColumns = [0];  // La columna 1 y -1 tienen prioridad en dispositivos móviles.
                var sizeColumns = [
                    { column: 0, width: "300px" }, // Ajustar ancho de columna 0
                    { column: 2, width: "150px", className: "text-wrap" }, 
                    { column: 3, width: "150px", className: "text-wrap" }
                ];

            initializeDataTable('#usersActivity', `/users/activity/${id}`, Columns, priorityColumns, sizeColumns);
        });
    </script>
@endsection