@extends('layouts.vertical', ['title' => 'Gestión #' . $ticket->id])

@section('css')
    @vite([
        'node_modules/select2/dist/css/select2.min.css',
        'node_modules/quill/dist/quill.core.css',
        'node_modules/quill/dist/quill.snow.css',
        'node_modules/quill/dist/quill.bubble.css'
    ])
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

        @include('layouts.shared.page-title', [
            'breadcrumbs' => [
                ['title' => 'CRM', 'url' => url('/dashabord')],
                ['title' => 'Gestiones', 'url' => url('/tickets/list')],
                ['title' => 'Gestión #' . $ticket->id],
            ]
        ])

    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <!-- project card -->
            <div class="card d-block">
                <div class="card-body" style="border: solid 3px var(--first-color); border-radius: 6px;">

                    <div class="float-sm-end mb-2 mb-sm-0">
                        <div class="row g-2">
                            <div class="col-auto">
                            @php
                                $ticketOpen = in_array($ticket->status, [1, 2, 5]); // Mostrar "Cerrar Gestión" solo si el estado es 1, 2 o 5
                            @endphp

                            @if($ticket->status == 3)
                                <!-- Si el ticket está cerrado, mostrar botón "Reabrir Gestión" -->
                                <a href="#" class="text-success btn btn-sm btn-link" onclick="updateStatusTicket({{ $ticket->id }}, 1)">
                                    <i class="bi bi-book-half"></i> Reabrir Gestión
                                </a>
                            @elseif($ticketOpen)
                                <!-- Si el estado es 1, 2 o 5, mostrar "Cerrar Gestión" -->
                                <a href="#" class="text-danger btn btn-sm btn-link" onclick="updateStatusTicket({{ $ticket->id }}, 3)">
                                    <i class="bi bi-x-lg"></i> Cerrar Gestión
                                </a>
                            @endif
                            </div>
                        </div>
                    </div> <!-- end dropdown-->

                    <h4 class="mb-3 mt-0 font-18">{{$ticket->title}} @isset($ticket->subtitle) - {{$ticket->subtitle}} @endisset</h4>

                    <div class="clerfix"></div>

                    <div class="row">
                        <div class="col-md-4">
                            <!-- Supervisor -->
                            <label class="mt-2 mb-1 fw-bold">Cliente:</label>
                            <div class="d-flex align-items-start">
                                @if (optional($ticket->getClient)->avatar == null)
                                    <img src="{{url('/static/img/src/user_profile.png')}}" class="rounded-circle me-2" style="width: 24px; height: 24px; object-fit: cover;">
                                @else
                                    <img src="{{getFileUrl(optional($ticket->getClient)->avatar)}}" class="rounded-circle me-2" style="width: 24px; height: 24px; object-fit: cover;">
                                @endif
                                <div class="w-100">
                                    <p>
                                        @php
                                            $typeClient = optional($ticket->getClient)->type;
                                            $clientId = optional($ticket->getClient)->id;
                                            $clientName = ($typeClient == 2) ? optional($ticket->getClient)->business_comercial_name :
                                                optional($ticket->getClient)->name . ' ' . optional($ticket->getClient)->name2 . ' ' . optional($ticket->getClient)->lastname . ' ' . optional($ticket->getClient)->lastname2;
                                            $legalRepresentative = optional($ticket->getClient)->name . ' ' . optional($ticket->getClient)->name2 . ' ' . optional($ticket->getClient)->lastname . ' ' . optional($ticket->getClient)->lastname2;
                                        @endphp

                                        @if(getPermission(Auth::user()->permissions, 'clients_edit'))
                                            <a href="{{ url('/clients/profile/'.$clientId) }}">{{ $clientName }}</a>
                                        @else
                                            <span>{{ $clientName }}</span>
                                        @endif

                                        @if ($typeClient == 2)
                                            <br/>
                                            Representante Legal: <span class="badge bg-secondary">{{ $legalRepresentative }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            <!-- end Client -->
                        </div> <!-- end col -->
                        <div class="col-md-4">
                            <!-- Poliza -->
                            <label class="mt-2 mb-1 fw-bold">Póliza:</label>
                            <p>
                                @php
                                    $categoryId = optional(optional(optional($ticket->getPolicy)->getBranch)->getCategory)->id;
                                    $policyId = optional($ticket->getPolicy)->policy_id;
                                    $policyUrl = url('/policy/insurers/' . optional($ticket->getPolicy)->id);
                                @endphp

                                @switch($categoryId)
                                    @case(1)
                                        <i class="fas fa-user font-18" style="color: #43bfe5;"></i>
                                        @break
                                    @case(2)
                                        <i class="bi bi-car-front-fill font-18" style="color: #6d9d3c;"></i>
                                        @break
                                    @case(3)
                                        <i class="fas fa-building" style="color: #323a46;"></i>
                                        @break
                                @endswitch

                                @if(!empty($policyId))
                                    <a target="_blank" href="{{ $policyUrl }}" class="ms-1">
                                        {{ $policyId }}
                                    </a>
                                @else
                                    <span class="text-muted">(Poliza no asignada)</span>
                                @endif
                            </p>
                            <!-- end Poliza -->
                        </div>
                        <div class="col-md-4">
                            <!-- Asegurado -->
                            <label class="mt-2 mb-1 fw-bold">Asegurado:</label>
                            @php
                                $categoryId = optional(optional(optional($ticket->getPolicy)->getBranch)->getCategory)->id;
                                $categoryPolicy = optional($ticket->getPolicy)->category_policy;
                                $insurer = '';

                                switch ($categoryPolicy) {
                                    case '1':
                                        $insurer = optional($ticket->getInsurerLife)->name;
                                        break;
                                    case '2':
                                        $insurer = optional($ticket->getInsurerVehicle)->brand . ' - ' . optional($ticket->getInsurerVehicle)->placa;
                                        break;
                                    case '3':
                                        $insurer = optional($ticket->getInsurerDamage)->name;
                                        break;
                                }

                                // Si no hay asegurado asignado, mostrar "(Asegurado no asignado)"
                                $showIcon = !empty($insurer);
                                if (!$showIcon) {
                                    $insurer = '<span class="text-muted">(Asegurado no asignado)</span>';
                                }
                            @endphp

                            <p>
                                @if($showIcon)
                                    @switch($categoryId)
                                        @case(1)
                                            <i class="fas fa-user font-18" style="color: #43bfe5;"></i>
                                            @break
                                        @case(2)
                                            <i class="bi bi-car-front-fill font-18" style="color: #6d9d3c;"></i>
                                            @break
                                        @case(3)
                                            <i class="fas fa-building" style="color: #323a46;"></i>
                                            @break
                                        @default
                                            <i class="bi bi-clipboard-check font-18 text-success align-middle"></i>
                                    @endswitch
                                @endif

                                <span class="ms-1">{!! $insurer !!}</span> <!-- Aquí se agrega el margen entre el icono y el texto -->
                            </p>
                            <!-- end Asegurado -->
                        </div>

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

                    <div class="row">
                        <div class="col-md-4">
                            <!-- Supervisor -->
                            <label class="mt-2 mb-1 fw-bold">Supervisor:</label>
                            <div class="d-flex align-items-start">
                                @if (optional($ticket->getSupervisor)->avatar == null)
                                    <img src="{{url('/static/img/src/user_profile.png')}}" class="rounded-circle me-2" style="width: 24px; height: 24x; object-fit: cover;">
                                @else
                                    <img src="{{getFileUrl(optional($ticket->getSupervisor)->avatar)}}" class="rounded-circle me-2" style="width: 24px; height: 24px; object-fit: cover;">
                                @endif
                                <div class="w-100">
                                    <p>{{optional($ticket->getSupervisor)->name}}</p>
                                </div>
                            </div>
                            <!-- end Supervisor -->
                        </div> <!-- end col -->

                        <div class="col-md-4">
                            <!-- Asesor -->
                            <label class="mt-2 mb-1 fw-bold">Asesor:</label>
                            <div class="d-flex align-items-start">
                                @if (optional($ticket->getUser)->avatar == null)
                                    <img src="{{url('/static/img/src/user_profile.png')}}" class="rounded-circle me-2" style="width: 24px; height: 24px; object-fit: cover;">
                                @else
                                    <img src="{{getFileUrl(optional($ticket->getUser)->avatar)}}" class="rounded-circle me-2" style="width: 24px; height: 24px; object-fit: cover;">
                                @endif
                                <div class="w-100">
                                    <p>{{optional($ticket->getUser)->name}}</p>
                                </div>
                            </div>
                            <!-- end Asesor -->
                        </div> <!-- end col -->
                        <div class="col-md-4">
                            <!-- assignee -->
                            <label class="mt-2 mb-1 fw-bold">Creado:</label>
                            <p><i class="bi bi-calendar-check"></i> {{$ticket->created_at->format('d/m/Y')}}</p>
                            <!-- end assignee -->
                        </div> <!-- end col -->
                    </div> <!-- end row -->

                    <div class="row">
                        <div class="col-md-4">
                            <!-- Status -->
                            <label class="mt-2 form-label fw-bold">Estado:</label>
                            @php
                                // Si el ticket tiene un estado relacionado en la tabla tickets_status, usa sus valores.
                                $statusName = optional($ticket->getStatus)->ticket_status_name ?? 'Estado desconocido';
                                $statusClass = optional($ticket->getStatus)->ticket_status_class ?? 'badge-secondary'; // Clase CSS por defecto si no existe.

                                switch ($ticket->status) {
                                case 1: // Abierto
                                    break;
                                case 2: // Seguimiento
                                    break;
                                case 3: // Cerrado
                                    break;
                                case 5: // Retrasado
                                    break;
                                }
                            @endphp

                            <p>
                                <span class="badge {{ $statusClass }}">{{ $statusName }}</span>
                            </p>

                            <!-- end Status -->
                        </div> <!-- end col -->

                        <div class="col-md-4">
                            <!-- Priority -->
                            <label class="mt-2 mb-1 fw-bold">Prioridad:</label>
                            <p>
                                <!-- Icono de la prioridad -->
                                @switch($ticket->priority)
                                    @case(1)
                                        <i class="fas fa-flag text-danger"></i> Urgente
                                        @break
                                    @case(2)
                                        <i class="fas fa-flag text-warning"></i> Media
                                        @break
                                    @case(3)
                                        <i class="fas fa-flag text-success"></i> Baja
                                        @break
                                @endswitch
                            </p>
                            <!-- end Priority -->
                        </div> <!-- end col -->

                        @if($ticketOpen)
                        <div class="col-md-4">
                            <!-- Asesor -->
                            <label class="mt-2 mb-1 fw-bold">Reasignar Asesor:</label>
                            <select class="form-select" data-toggle="select2"
                                    onchange="updateAsesorTicket({{ $ticket->id }}, this.value)" required>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}"
                                        @if($ticket->getUser->id == $user->id) selected @endif>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                            <!-- end Asesor -->
                        </div> <!-- end col -->
                        @endif

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

                    <label class="mt-4 mb-1 fw-bold">Detalle:</label>

                    <p class="text-muted mb-0">
                        {!!$ticket->desc!!}
                    </p>

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

            </div> <!-- end card-->

            <div class="card">
                <div class="card-body">

                    <h4 class="mb-4 mt-0 font-16">Seguimientos ({{ count($tickets_det) }})</h4>

                    @if($ticketOpen)
                        <div class="rounded mt-4 mb-4">
                            <form action="{{url('/tickets/edit/'.$ticket->id)}}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <!-- Campo para subir archivos -->
                                <input type="file" class="form-control d-none" id="Attachments" multiple name="Attachments[]" onchange="previewFiles()" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.rar,.jpg,.jpeg,.png,.gif,.mp3,.wav,.mp4,.avi,.txt">

                                <!-- Editor de texto -->
                                <input type="hidden" name="text" id="text">
                                <div id="snow-editor" style="height: 150px;" class="mb-2">
                                    {{ old('text') }}
                                </div>

                                <button type="submit" class="btn btn-success"><i class="mdi mdi-send"></i> Agregar Seguimiento</button>
                                <!-- Botón para seleccionar archivos -->
                                <button type="button" class="btn btn-light ms-1" onclick="document.getElementById('Attachments').click();">
                                    <i class="bi bi-paperclip"></i> Adjuntar archivos
                                </button>

                                <!-- Previsualización de archivos seleccionados -->
                                <div id="file-preview" class="row mt-2"></div>
                            </form>
                        </div>
                    @endif

                    @foreach ($tickets_det as $ticket_det)
                        <div class="card mb-2 p-3 shadow-sm border"> <!-- Tarjeta para cada seguimiento -->
                            <div class="d-flex align-items-start">
                                <!-- Imagen de usuario -->
                                @if (optional($ticket_det->getUser)->avatar == null)
                                    <img src="{{ url('/static/img/src/user_profile.png') }}" class="rounded-circle me-2" style="width: 48px; height: 48px; object-fit: cover;">
                                @else
                                    <img src="{{ getFileUrl(optional($ticket_det->getUser)->avatar) }}" class="rounded-circle me-2" style="width: 48px; height: 48px; object-fit: cover;">
                                @endif

                                <!-- Información del seguimiento -->
                                <div class="w-100">
                                    <h5 class="mb-1">
                                        {{ optional($ticket_det->getUser)->name }}
                                        <small class="text-muted float-end">
                                            <i class="bi bi-clock"></i> {{ ucfirst($ticket_det->created_at->diffForHumans()) }} <!-- ({{ $ticket_det->created_at->format('d/m/Y') }}) -->
                                        </small>
                                    </h5>
                                    <p class="m-0">{!! $ticket_det->text !!}</p>
                                </div>
                            </div>

                            <!-- Sección de archivos adjuntos -->
                            @if(count($ticket_det->getFiles) > 0)
                            <div>
                                <h6 class="text-muted">Archivos adjuntos:</h6>
                                <div class="row">
                                @foreach ($ticket_det->getFiles as $file)
                                    @php
                                        $fileData = json_decode($file->url_file, true);
                                        $isUploadError = isset($fileData['upload']) && $fileData['upload'] == 'error';
                                        $fileUrl = getFileUrl($file->url_file);
                                        $fileName = pathinfo($fileUrl, PATHINFO_BASENAME);
                                        $fileExt = strtolower(pathinfo($fileUrl, PATHINFO_EXTENSION));
                                        $icon = 'bi-file-earmark'; // Icono por defecto y color
                                        $color = 'text-secondary'; // Color por defecto

                                        // Asignar icono y color según la extensión del archivo
                                        $icons = [
                                            'pdf' => ['icon' => 'bi-file-earmark-pdf', 'color' => 'text-danger'],
                                            'doc' => ['icon' => 'bi-file-earmark-word', 'color' => 'text-info'],
                                            'docx' => ['icon' => 'bi-file-earmark-word', 'color' => 'text-info'],
                                            'xls' => ['icon' => 'bi-file-earmark-excel', 'color' => 'text-success'],
                                            'xlsx' => ['icon' => 'bi-file-earmark-excel', 'color' => 'text-success'],
                                            'ppt' => ['icon' => 'bi-file-earmark-ppt', 'color' => 'text-warning'],
                                            'pptx' => ['icon' => 'bi-file-earmark-ppt', 'color' => 'text-warning'],
                                            'zip' => ['icon' => 'bi-file-earmark-zip', 'color' => 'text-warning'],
                                            'rar' => ['icon' => 'bi-file-earmark-zip', 'color' => 'text-secondary'],
                                            'jpg' => ['icon' => 'bi-file-earmark-image', 'color' => 'text-info'],
                                            'jpeg' => ['icon' => 'bi-file-earmark-image', 'color' => 'text-info'],
                                            'png' => ['icon' => 'bi-file-earmark-image', 'color' => 'text-info'],
                                            'gif' => ['icon' => 'bi-file-earmark-image', 'color' => 'text-info'],
                                            'mp3' => ['icon' => 'bi-file-earmark-music', 'color' => 'text-dark'],
                                            'wav' => ['icon' => 'bi-file-earmark-music', 'color' => 'text-dark'],
                                            'mp4' => ['icon' => 'bi-file-earmark-play', 'color' => 'text-dark'],
                                            'avi' => ['icon' => 'bi-file-earmark-play', 'color' => 'text-dark'],
                                            'txt' => ['icon' => 'bi-file-earmark-text', 'color' => 'text-muted']
                                        ];

                                        if (array_key_exists($fileExt, $icons)) {
                                            $icon = $icons[$fileExt]['icon'];
                                            $color = $icons[$fileExt]['color'];
                                        }

                                        // Obtener el tamaño del archivo usando size_kb y size_mb
                                        $fileSizeKB = isset($fileData['size_kb']) ? (float) $fileData['size_kb'] : null;
                                        $fileSizeMB = isset($fileData['size_mb']) ? (float) $fileData['size_mb'] : null;
                                        $fileSizeText = 'Tamaño desconocido';

                                        if ($fileSizeKB !== null && $fileSizeMB !== null) {
                                            $fileSizeText = $fileSizeMB >= 1 ? $fileSizeMB . ' MB' : $fileSizeKB . ' KB';
                                        }
                                    @endphp

                                    <div class="col-md-4"> <!-- Tamaño fijo para que no tome toda la anchura -->
                                        <div class="card p-2 shadow-sm border">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm">
                                                    <span class="avatar-title bg-light rounded" style="border: 1px solid {{ $color }};">
                                                        <i class="bi {{ $icon }} font-20 {{ $color }}"></i>
                                                    </span>
                                                </div>
                                                <div class="ms-2">
                                                    @if ($isUploadError)
                                                        <span class="text-danger fw-bold">ERROR DE SUBIDA</span>
                                                    @else
                                                        <a href="{{ $fileUrl }}" class="text-muted fw-bold text-truncate d-block" style="max-width: 200px;" download="{{ $fileName }}">
                                                            {{ $fileName }}
                                                        </a>
                                                        <p class="mb-0 font-12">{{ $fileSizeText }}</p>
                                                    @endif
                                                </div>
                                                <div class="ms-auto">
                                                    @if (!$isUploadError)
                                                        <a href="{{ $fileUrl }}" class="btn btn-link text-muted" download="{{ $fileName }}">
                                                            <i class="bi bi-download"></i>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                </div> <!-- Fin row -->
                            </div>

                            @endif
                        </div>
                    @endforeach
                </div> <!-- end card-body-->
            </div>
            <!-- end card-->
        </div> <!-- end col -->
    </div>
    <!-- end row -->

</div> <!-- container -->
@endsection
@section('script')
    @vite([
        'resources/js/pages/form-advanced.init.js',
        'resources/js/pages/form-quilljs.init.js'
        ])
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Sincronizar Quill con el input oculto
        quillSnow.on('text-change', function() {
            document.querySelector("#text").value = quillSnow.root.innerHTML;
        });
        // Restaurar contenido si hay un valor previo (por ejemplo, en edición)
        let oldContent = `{{ old('text') }}`;
        if (oldContent.trim() !== "") {
            quillSnow.root.innerHTML = oldContent;
        }
    });
</script>
@endsection