@extends('layouts.vertical', ['title' => 'Reclamo - creación gastos medicos'])

@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',
        ])
@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="row">
                            <div class=" col-12 ">
                                <div class="panel myshadow">
                                    <div class="mypanel">
                                        <div class="title mb-3">
                                            <p><i class="bi bi-plus-circle"></i> Nuevo Reclamo Gastos Médicos</p>
                                        </div>
                                        <form action="{{url('/claims/create/1')}}" method="POST" class="my-forms"  enctype="multipart/form-data" >
                                            @csrf
                                            <div class="row">
                                                <!-- Grupo: Información del Reclamo -->
                                                <small class="my-2" >Información del Reclamo</small>

                                                <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                                    <p class="mb-1 fw-bold text-muted">Gestiones <span class="text-danger fw-bold">*</span></p>
                                                    <p class="text-muted font-13">
                                                        Seleccione una gestión.
                                                    </p>
                                                    <select class="form-select" data-toggle="select2" data-parsley-error-message="Seleccionar una gestión es obligatorio." id="ticket_id"  name="ticket_id" required="">
                                                        <option value="">Seleccione una gestion...</option>
                                                        @foreach ($tickets as $ticket)
                                                            <option @if(old('ticket_id') == $ticket->id) selected @endif value="{{$ticket->id}}"> NG-{{$ticket->id}} - {{ getClientName($ticket->getClient) }} - {{ $ticket->title }}  </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <!-- Total acumulado de los valores -->
                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Valor Total del Reclamo</p>
                                                        <p class="text-muted font-13">Escriba el valor total del reclamo.</p>
                                                        <input value="0.00" type="text" class="form-control" id="valor_total_reclamo" name="valor_total_reclamo" readonly>
                                                        
                                                    </div>
                                                </div>


                                                <!-- Grupo: Información del Cliente y Seguro -->
                                                <small class="my-2" >Información del Cliente y Seguro</small>
                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Cliente</p>
                                                        <p class="text-muted font-13">Escriba el nombre del cliente.</p>
                                                        <input value="{{old('client_id')}}" required readonly type="text" class="form-control" id="client_id" name="client_id">
                                                        
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Póliza</p>
                                                        <p class="text-muted font-13">Escriba el codigo de la poliza.</p>
                                                        <input value="{{old('policy_id')}}" required readonly type="text" class="form-control" id="policy_id" name="policy_id">
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Aseguradora</p>
                                                        <p class="text-muted font-13">Escriba el nombre de la aseguradora.</p>
                                                        <input value="{{old('insurer_id')}}" required readonly type="text" class="form-control" id="insurance_id" name="insurance_id">
                                                    </div>
                                                </div>

                                                <input value="{{old('insurer_id_hidden')}}" type="hidden" class="form-control" id="insurer_id_hidden" name="insurer_id_hidden">
                                                <input value="{{old('policy_id_hidden')}}" type="hidden" class="form-control" id="policy_id_hidden" name="policy_id_hidden">
                                                <input value="{{old('client_id_hidden')}}" type="hidden" class="form-control" id="client_id_hidden" name="client_id_hidden">
                                                <input value="{{old('insurance_id_hidden')}}" type="hidden" class="form-control" id="insurance_id_hidden" name="insurance_id_hidden">
                                                <input value="{{old('ramo_id_hidden')}}" type="hidden" class="form-control" id="ramo_id_hidden" name="ramo_id_hidden">
                                                <input value="{{old('product_type')}}" type="hidden" class="form-control" id="product_type" name="product_type">
                                                <input value="1" type="hidden" class="form-control" id="claim_type" name="claim_type">

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Título del Cliente</p>
                                                        <p class="text-muted font-13">Seleccione el titulo del cliente.</p>
                                                        <select required class="form-select " id="client_title" name="client_title">
                                                        <option value="1"> Sr.</option>
                                                        <option value="2"> Sra.</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Titular</p>
                                                        <p class="text-muted font-13">Escriba el titular.</p>
                                                        <input value="{{old('insurance_id')}}" required readonly type="text" class="form-control" id="insurer_id" name="insurer_id">
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Dependiente del Asegurador</p>
                                                        <p class="text-muted font-13">Seleccione al dependiente del asegurador.</p>
                                                        <select  class="form-select js-pick-insurer-dependient" id="insurer_dependient_id" name="insurer_dependient_id">

                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Ramo</p>
                                                        <p class="text-muted font-13">Escriba el ramo.</p>
                                                        <input value="{{old('ramo_id')}}" readonly type="text" class="form-control" id="ramo_id" name="ramo_id">
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Fecha recibido en infinity</p>
                                                        <p class="text-muted font-13">Indique la fecha en la que se recibio en infinity.</p>
                                                        <input value="{{old('date_infinity_recive')}}" type="date" class="form-control" id="date_infinity_recive" name="date_infinity_recive">
                                                    </div>
                                                </div>

                                                <!-- Grupo: Detalles Médicos -->
                                                <small class="my-2" >Detalles Médicos</small>
                                                <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Fecha del Gasto</p>
                                                        <p class="text-muted font-13">Indique la fecha de gasto.</p>
                                                        <input value="{{old('date_claim_cost')}}" type="date" class="form-control" id="date_claim_cost" name="date_claim_cost">
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Médico Tratante</p>
                                                        <p class="text-muted font-13">Escriba el nombre del medico tratante.</p>
                                                        <input value="{{old('doctor_name')}}" type="text" class="form-control" id="doctor_name" name="doctor_name">
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Diagnóstico Principal</p>
                                                        <p class="text-muted font-13">Escriba el diagnostico principal.</p>
                                                        <textarea class="form-control" id="principal_diagnost" name="principal_diagnost" rows="4">{{ old('principal_diagnost') }}</textarea>
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Diagnóstico Secundario</p>
                                                        <p class="text-muted font-13">Escriba el diagnostico secundario.</p>
                                                        <textarea class="form-control" id="second_diagnost" name="second_diagnost" rows="4">{{ old('second_diagnost') }}</textarea>
                                                    </div>
                                                </div>

                                                <!-- Grupo: Medicamentos de Uso Continuo -->
                                                <small class="my-2" >Medicamentos de Uso Continuo</small>
                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Diagnóstico Secundario</p>
                                                        <p class="text-muted font-13">Escriba el diagnostico secundario.</p>    
                                                        <input value="{{old('medicament_continual_1')}}" type="text" class="form-control" id="medicament_continual_1" name="medicament_continual_1">
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Detalle Medicamento Continuo 1</p>
                                                        <p class="text-muted font-13">Escriba el detalle del medicamento continuo 1.</p>
                                                        <input value="{{old('detail_medicament_continual_1')}}" type="text" class="form-control" id="detail_medicament_continual_1" name="detail_medicament_continual_1">
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Fecha Final Medicamento Continuo 1</p>
                                                        <p class="text-muted font-13">Seleccione la fecha final del medicamento continuo 1.</p>
                                                        <input value="{{old('date_final_medicament_continual_1')}}" type="date" class="form-control" id="date_final_medicament_continual_1" name="date_final_medicament_continual_1">
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-md-6 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Detalle Medicamento Continuo 2</p>
                                                        <p class="text-muted font-13">Escriba el detalle del medicamento continuo 2.</p>
                                                        <input value="{{old('detail_medicament_continual_2')}}" type="text" class="form-control" id="detail_medicament_continual_2" name="detail_medicament_continual_2">
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-md-6 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Fecha Final Medicamento Continuo 2</p>
                                                        <p class="text-muted font-13">Seleccione la fecha final del medicamento continuo 2.</p>
                                                        <input value="{{old('date_final_medicament_continual_2')}}" type="date" class="form-control" id="date_final_medicament_continual_2" name="date_final_medicament_continual_2">
                                                    </div>
                                                </div>


                                                <!-- Medicamento Continuo 3 -->
                                                <div class="col-lg-6 col-md-6 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Detalle Medicamento Continuo 3</p>
                                                        <p class="text-muted font-13">Escriba el detalle del medicamento continuo 3.</p>
                                                        <input value="{{old('detail_medicament_continual_3')}}" type="text" class="form-control" id="detail_medicament_continual_3" name="detail_medicament_continual_3">
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-md-6 col-sm-4 col-12 mb-2">
                                                    <div class="form-floating">
                                                        <p class="mb-1 fw-bold text-muted">Fecha Final Medicamento Continuo 3</p>
                                                        <p class="text-muted font-13">Seleccione la fecha final del medicamento continuo 3.</p>
                                                        <input value="{{old('date_final_medicament_continual_3')}}" type="date" class="form-control" id="date_final_medicament_continual_3" name="date_final_medicament_continual_3">
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="row">
                                                <small class="my-2" >Agregar Documentos</small>

                                                <!-- Contenedor dinámico para los documentos -->
                                                <div id="document-container" class="col-12 mb-2">
                                                    <div class="row document-entry">
                                                        <!-- Tipo de Documento -->
                                                        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2">
                                                            <p class="mb-1 fw-bold text-muted">Documento</p>
                                                            <p class="text-muted small">Seleccione el tipo de documentoo a subir.</p>
                                                            <div class="form-floating">
                                                                <select class="form-select" name="document_type[]" aria-label="Tipo de Documento">
                                                                    <option value=""> Seleccionar tipo de documento</option>
                                                                    @foreach (ClaimDocumentTypeList() as $cdtl_id => $cdtl_name)
                                                                        <option @if(old('ticket_id') == $cdtl_id) selected @endif value="{{$cdtl_id}}"> {{$cdtl_name}} </option>
                                                                    @endforeach
                                                                </select>
                                                                <label for="document_type">Tipo de Documento</label>
                                                            </div>
                                                        </div>


                                                        <!-- Selección de Archivo -->
                                                        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2">
                                                            <div class="row">
                                                                <div class="col-6">
                                                                    <p class="mb-1 fw-bold text-muted">Archivos <span class="text-danger fw-bold">*</span></p>
                                                                    <p class="text-muted small">Adjunte los archivos de el reclamo.</p>

                                                                    <button type="button" class="btn btn-light w-100 mb-10" style="min-height: 60px" onclick="document.getElementById('customFileInput').click()">
                                                                        <i class="bi bi-paperclip"></i> Adjuntar archivos
                                                                    </button>
                                                                </div>

                                                                <div class="col-6">
                                                                    <!-- Nombre de los archivos subidos-->
                                                                    <div id="fileList" class="small text-muted" style="margin-top: 58px"></div>
                                                                </div>
                                                            </div>

                                                            <!-- Campo oculto para subir archivos -->
                                                            <input type="file" class="d-none" id="customFileInput" name="document_file[]" onchange="updateFileList(this)">
                                                        </div>

                                                        <!-- Input de valor -->
                                                        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2">
                                                            <p class="mb-1 fw-bold text-muted">Valor</p>
                                                            <p class="text-muted small">Escriba el valor.</p>
                                                            <div class="form-floating">
                                                                <input type="number" step="0.01" class="form-control document-value" name="document_value[]" placeholder="Valor">
                                                                <label for="document_value">Valor</label>
                                                            </div>
                                                        </div>

                                                        <!-- Botón de Eliminar Documento -->
                                                        <div class="col-12 mb-2 text-end">
                                                            <button type="button" class="btn btn-danger remove-document">Eliminar</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Botón para añadir más documentos -->
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-2">
                                                    <button type="button" class="btn btn-primary" id="add-document">Agregar más documentos</button>
                                                </div>

                                                <!-- Variable JSON para almacenar los documentos -->
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-2">
                                                    <input type="hidden" id="documents_json" name="documents_json">
                                                </div>

                                            </div>


                                            <button class="btn btn-success send-form mt-5" type="submit">Crear Reclamo</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>

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

@section('script')
    @vite([
        'resources/js/pages/form-advanced.init.js',
        'resources/js/pages/form-validation.init.js',
        'resources/js/pages/select2.min.js',
        ])
    <script src="{{url('/static/js/claim_creation.js?v='.time())}}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Manejar cambios en los selects
            $('#ticket_id').on('change', function () {
                getInfoClaimsFromTicket(this.value);
            });

        });
    </script>
@endsection