@extends('layouts.vertical', ['title' => 'Gestión de Llamadas - Call Center'])

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

@section('content')
<div class="card">
    <div class="card-body">
        <div class="col wrapper">
            <div class="row">
                <div class="col-12 mtop16 mb-5">
                    <div class="panel myshadow">
                        <div class="mypanel">
                            <div class="title mb-3">
                                <p><i class="bi bi-telephone"></i> Registro de Llamadas - Call Center</p>
                            </div>
                            <form action="{{ url('/claims/callcenter/' . $claim->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <!-- Datos del Cliente -->
                                    <div class="col-12"><small class="my-2">Información del Cliente y Seguro</small></div>
                                    <div class="col-lg-3 col-md-6 mb-3">
                                        <label class="form-label">Cliente</label>
                                        <p>{{ rvfj(json_encode(personIdentifier()), $claim->client_title) }} {{ getClientName($claim->getClient) }}</p>
                                    </div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">Póliza</label><p>{{ $claim->policy?->policy_id }}</p></div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">Aseguradora</label><p>{{ $claim->insurance?->name }}</p></div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">Ramo</label><p>{{ $claim->insuranceInsurer?->name }}</p></div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">Asegurado</label><p>{{ rvfj(json_encode(personIdentifier()), $claim->client_title) }} {{ $claim->policyInsurer?->name }}</p></div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">Teléfono</label><p>{{ $claim->policyInsurer?->phone }}</p></div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">E-mail</label><p>{{ $claim->policyInsurer?->email }}</p></div>
                                    <div class="col-lg-3 col-md-6 mb-3"><label class="form-label">Dependiente</label><p>{{ $claim->policyInsurerDependient?->name ?? 'N/A' }}</p></div>

                                    <!-- Registro de llamada -->
                                    <div class="col-12"><small class="my-2">Registro de Llamada</small></div>

                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <label class="form-label">Fecha de la llamada</label>
                                        <input type="datetime-local" class="form-control" name="call_date"
                                            value="{{ old('call_date') }}">
                                    </div>

                                    <div class="col-lg-12 mb-3">
                                        <label class="form-label">Observación de llamada (Call Center)</label>
                                        <input type="hidden" name="call_center_note" id="call_center_note">
                                        <div id="snow-editor-call" style="height: 150px;" class="mb-2">
                                            {!! old('call_center_note') !!}
                                        </div>
                                    </div>

                                    <div class="col-lg-12 mb-3">
                                        <label class="form-label">Subir grabación de llamada (opcional)</label>
                                        <input type="file" class="form-control" name="call_recording">
                                    </div>

                                    @if(getPermission(Auth::user()->permissions, 'claims_callcenter_infinity'))
                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label">Observación de llamada (Infinity)</label>
                                            <input type="hidden" name="infinity_note" id="infinity_note">
                                            <div id="snow-editor-infinity" style="height: 150px;" class="mb-2">
                                                {!! old('infinity_note') !!}
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-12 mt-4">
                                        <button class="btn btn-primary" type="submit">Guardar Registro</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if($historyLogs->count() && getPermission(Auth::user()->permissions, 'claims_callcenter_history'))
    <div class="my-4">
        <h5 class="mb-3">Historial de llamadas</h5>

        @foreach($historyLogs as $log)
            <div class="card mb-4 shadow-sm border">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <h4 class="mb-0 text-primary">
                                Fecha de llamada: {{ \Carbon\Carbon::parse($log->call_date)->format('d/m/Y H:i') }}
                            </h4>
                            <p class="text-muted">
                                Registro creado el {{ $log->created_at->format('d/m/Y H:i') }} por {{ optional($log->updatedBy)->name ?? 'Desconocido' }}
                            </p>
                        </div>
                        @if($log->call_recording_path)
                            <a href="{{ getFileUrl($log->call_recording_path) }}" target="_blank" class="btn btn-outline-info btn-sm">
                                <i class="bi bi-play-circle"></i> Escuchar grabación
                            </a>
                        @endif
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Observación Call Center:</label>
                        <div class="bg-light p-2 border rounded">
                            {!! $log->call_center_note !!}
                        </div>
                    </div>

                    @if(getPermission(Auth::user()->permissions, 'claims_callcenter_infinity') && $log->infinity_note)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Observación Infinity:</label>
                            <div class="bg-light p-2 border rounded">
                                {!! $log->infinity_note !!}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@endif


@endsection

@section('script')
    @vite([
        'resources/js/pages/form-advanced.init.js',
        'resources/js/pages/form-quilljs.init.js'
    ])
<script>
    document.addEventListener("DOMContentLoaded", function () {
        if (typeof quillCall !== 'undefined') {
            quillCall.on('text-change', function () {
                document.querySelector("#call_center_note").value = quillCall.root.innerHTML;
            });
            let oldCall = `{!! old('call_center_note') !!}`;
            if (oldCall.trim() !== "") {
                quillCall.root.innerHTML = oldCall;
            }
        }

        if (typeof quillInfinity !== 'undefined') {
            quillInfinity.on('text-change', function () {
                document.querySelector("#infinity_note").value = quillInfinity.root.innerHTML;
            });
            let oldInfinity = `{!! old('infinity_note')!!}`;
            if (oldInfinity.trim() !== "") {
                quillInfinity.root.innerHTML = oldInfinity;
            }
        }
    });
</script>
@endsection