@extends('master')
@section('title')
Reclamo - gastos medicos
@endsection
@section('breadcrumb')
<li class="breadcrumb-item">
        <a href="{{url('/claims/list')}}">
        <i class="bi bi-file-earmark-medical"></i>
            Reclamos
        </a>
    </li>
    <li class="breadcrumb-item">
    <a href="{{url('/claims/create-list')}}">
        <i class="bi bi-file-earmark-medical"></i>
            Creación nuevo reclamo
        </a>
    </li>
@endsection
@section('link')
<link rel="stylesheet" href="{{url('/static/css/select2.min.css?v='.time())}}">
@endsection
@section('body')
<style>
    .custom-alert {
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
        font-weight: bold;
        display: none; /* Oculto por defecto */
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
</style>
    <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 - Precertificación</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-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <select required class="form-select js-pick-ticket-id" id="ticket_id" name="ticket_id">
                                                    <option value=""> Seleccionar N° Gestión</option>
                                                        @foreach ($tickets as $ticket)
                                                            <option @if(old('ticket_id') == $ticket->id) selected @endif value="{{$ticket->id}}"> NG-{{$ticket->id}} </option>
                                                        @endforeach
                                                    </select>
                                                    <label for="user_id">Número de Gestión</label>
                                                </div>
                                            </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">
                                                    <input value="0.00" type="text" class="form-control" id="valor_total_reclamo" name="valor_total_reclamo" readonly>
                                                    <label for="valor_total_reclamo">Valor Total del Reclamo</label>
                                                </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">
                                                    <input value="{{old('client_id')}}" required readonly type="text" class="form-control" id="client_id" name="client_id">
                                                    <label for="client_id">Cliente</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('policy_id')}}" required readonly type="text" class="form-control" id="policy_id" name="policy_id">
                                                    <label for="policy_id">Póliza</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('insurer_id')}}" required readonly type="text" class="form-control" id="insurance_id" name="insurance_id">
                                                    <label for="insurer_id">Aseguradora</label>
                                                </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="2" 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">
                                                    <select required class="form-select " id="client_title" name="client_title">
                                                    <option value="1"> Sr.</option>
                                                    <option value="2"> Sra.</option>
                                                    </select>
                                                    <label for="client_title">Título del Cliente</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('insurance_id')}}" required readonly type="text" class="form-control" id="insurer_id" name="insurer_id">
                                                    <label for="insurance_id">Titular</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <select required class="form-select js-pick-insurer-dependient" id="insurer_dependient_id" name="insurer_dependient_id">

                                                    </select>
                                                    <label for="insurer_dependient_id">Dependiente del Asegurador</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('ramo_id')}}" readonly type="text" class="form-control" id="ramo_id" name="ramo_id">
                                                    <label for="insurance_id">Ramo</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('date_infinity_recive')}}" type="date" class="form-control" id="date_infinity_recive" name="date_infinity_recive">
                                                    <label for="date_infinity_recive">Fecha recibido en infinity</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('date_start_diagnostic')}}" type="date" class="form-control" id="date_start_diagnostic" name="date_start_diagnostic">
                                                    <label for="date_start_diagnostic">Fecha inicio diagnostico</label>
                                                </div>
                                            </div>


                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('date_infinity_recive')}}" type="date" class="form-control" id="date_cover_efective" name="date_cover_efective" readonly>
                                                    <label for="date_cover_efective">Fecha efectiva cobertura</label>
                                                </div>
                                                <div class="form-check mt-2" id="confirm-checkbox-container" style="display: none;">
                                                    <input class="form-check-input" type="checkbox" id="confirm-checkbox">
                                                    <label class="form-check-label" for="confirm-checkbox">
                                                        Confirmar fecha efectiva de cobertura
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-2">
                                                <div id="alert-container" class="custom-alert"></div>
                                            </div>

                                            <!-- Grupo: Detalles Médicos -->
                                            <small class="my-2" >Detalles Médicos</small>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('date_claim_cost')}}" type="date" class="form-control" id="date_claim_cost" name="date_claim_cost">
                                                    <label for="date_claim_cost">Fecha del Gasto</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                <div class="form-floating">
                                                    <input value="{{old('doctor_name')}}" type="text" class="form-control" id="doctor_name" name="doctor_name">
                                                    <label for="doctor_name">Médico Tratante</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                <div class="form-floating">
                                                    <textarea class="form-control" id="principal_diagnost" name="principal_diagnost" rows="4">{{ old('principal_diagnost') }}</textarea>
                                                    <label for="principal_diagnost">Diagnóstico Principal</label>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                <div class="form-floating">
                                                    <textarea class="form-control" id="second_diagnost" name="second_diagnost" rows="4">{{ old('second_diagnost') }}</textarea>
                                                    <label for="second_diagnost">Diagnóstico Secundario</label>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <!-- Tab Navigation -->
                                                <ul class="nav nav-tabs" id="presertificationTabs" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link active" id="procedimientos-tab" data-bs-toggle="tab" href="#procedimientos" role="tab" aria-controls="procedimientos" aria-selected="true">Procedimientos Programados</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link" id="farmacia-tab" data-bs-toggle="tab" href="#farmacia" role="tab" aria-controls="farmacia" aria-selected="false">Farmacia</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link" id="laboratorio-tab" data-bs-toggle="tab" href="#laboratorio" role="tab" aria-controls="laboratorio" aria-selected="false">Laboratorio</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link" id="imagenes-tab" data-bs-toggle="tab" href="#imagenes" role="tab" aria-controls="imagenes" aria-selected="false">Estudio de Imágenes</a>
                                                    </li>
                                                </ul>

                                                <div class="tab-content" id="presertificationTabsContent">
                                                    <!-- Procedimientos Programados -->
                                                    <div class="tab-pane fade show active" id="procedimientos" role="tabpanel" aria-labelledby="procedimientos-tab">
                                                        <div class="row my-3">
                                                            <small class="my-2">Procedimientos Programados</small>
                                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="main_doctor" name="main_doctor">
                                                                    <label for="main_doctor">Médico Tratante</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="assistant_doctor_1" name="assistant_doctor_1">
                                                                    <label for="assistant_doctor_1">Médico Asistente 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="assistant_doctor_2" name="assistant_doctor_2">
                                                                    <label for="assistant_doctor_2">Médico Asistente 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="anesthetist" name="anesthetist">
                                                                    <label for="anesthetist">Anestesiólogo</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="medical_equipment" name="medical_equipment">
                                                                    <label for="medical_equipment">Equipo Médico</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="provider" name="provider">
                                                                    <label for="provider">Proveedor (Hospital/Clínica)</label>
                                                                </div>
                                                            </div>
                                                            <!-- Procedimientos Desglosados -->
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="procedure_1" name="procedure_1">
                                                                    <label for="procedure_1">Procedimiento 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="procedure_date_1" name="procedure_date_1">
                                                                    <label for="procedure_date_1">Fecha Procedimiento 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="procedure_2" name="procedure_2">
                                                                    <label for="procedure_2">Procedimiento 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="procedure_date_2" name="procedure_date_2">
                                                                    <label for="procedure_date_2">Fecha Procedimiento 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="procedure_3" name="procedure_3">
                                                                    <label for="procedure_3">Procedimiento 3</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="procedure_date_3" name="procedure_date_3">
                                                                    <label for="procedure_date_3">Fecha Procedimiento 3</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Farmacia -->
                                                    <div class="tab-pane fade" id="farmacia" role="tabpanel" aria-labelledby="farmacia-tab">
                                                        <div class="row my-3">
                                                            <small class="my-2">Farmacia</small>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="pharmacy_provider" name="pharmacy_provider">
                                                                    <label for="pharmacy_provider">Proveedor (Farmacia)</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2"></div>
                                                            <!-- Medicamentos -->
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="pharmacy_item_1" name="pharmacy_item_1">
                                                                    <label for="pharmacy_item_1">Medicamento 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="number" class="form-control" id="pharmacy_quantity_1" name="pharmacy_quantity_1">
                                                                    <label for="pharmacy_quantity_1">Cantidad Medicamento 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="pharmacy_item_2" name="pharmacy_item_2">
                                                                    <label for="pharmacy_item_2">Medicamento 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="number" class="form-control" id="pharmacy_quantity_2" name="pharmacy_quantity_2">
                                                                    <label for="pharmacy_quantity_2">Cantidad Medicamento 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="pharmacy_item_3" name="pharmacy_item_3">
                                                                    <label for="pharmacy_item_3">Medicamento 3</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="number" class="form-control" id="pharmacy_quantity_3" name="pharmacy_quantity_3">
                                                                    <label for="pharmacy_quantity_3">Cantidad Medicamento 3</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Laboratorio -->
                                                    <div class="tab-pane fade" id="laboratorio" role="tabpanel" aria-labelledby="laboratorio-tab">
                                                        <div class="row my-3">
                                                            <small class="my-2">Exámenes de Laboratorio</small>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="lab_provider" name="lab_provider">
                                                                    <label for="lab_provider">Proveedor (Laboratorio)</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2"></div>
                                                            <!-- Exámenes -->
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="lab_test_1" name="lab_test_1">
                                                                    <label for="lab_test_1">Examen de Laboratorio 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="lab_date_1" name="lab_date_1">
                                                                    <label for="lab_date_1">Fecha Examen 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="lab_test_2" name="lab_test_2">
                                                                    <label for="lab_test_2">Examen de Laboratorio 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="lab_date_2" name="lab_date_2">
                                                                    <label for="lab_date_2">Fecha Examen 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="lab_test_3" name="lab_test_3">
                                                                    <label for="lab_test_3">Examen de Laboratorio 3</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="lab_date_3" name="lab_date_3">
                                                                    <label for="lab_date_3">Fecha Examen 3</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Estudio de Imágenes -->
                                                    <div class="tab-pane fade" id="imagenes" role="tabpanel" aria-labelledby="imagenes-tab">
                                                        <div class="row my-3">
                                                            <small class="my-2">Estudios de Imágenes</small>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="image_main_doctor" name="image_main_doctor">
                                                                    <label for="image_main_doctor">Médico Tratante</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="image_anesthetist" name="image_anesthetist">
                                                                    <label for="image_anesthetist">Anestesiólogo</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="image_provider" name="image_provider">
                                                                    <label for="image_provider">Proveedor (Centro de Imágenes)</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="biopsy" name="biopsy">
                                                                    <label for="biopsy">Biopsia</label>
                                                                </div>
                                                            </div>
                                                            <!-- Estudios de Imágenes -->
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="image_study_1" name="image_study_1">
                                                                    <label for="image_study_1">Estudio de Imágenes 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="image_date_1" name="image_date_1">
                                                                    <label for="image_date_1">Fecha Estudio 1</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="image_study_2" name="image_study_2">
                                                                    <label for="image_study_2">Estudio de Imágenes 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="image_date_2" name="image_date_2">
                                                                    <label for="image_date_2">Fecha Estudio 2</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control" id="image_study_3" name="image_study_3">
                                                                    <label for="image_study_3">Estudio de Imágenes 3</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-2">
                                                                <div class="form-floating">
                                                                    <input type="date" class="form-control" id="image_date_3" name="image_date_3">
                                                                    <label for="image_date_3">Fecha Estudio 3</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </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-lg-12 col-md-12 col-sm-12 col-12 mb-2">
                                                <div class="row document-entry">
                                                    <!-- Tipo de Documento -->
                                                    <div class="col-lg-3 col-md-3 col-sm-4 col-12 mb-2">
                                                        <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-3 col-md-3 col-sm-4 col-12 mb-2">
                                                        <div class="form-floating">
                                                            <input type="file" class="form-control" name="document_file[]">
                                                            <label for="document_file">Subir Documento</label>
                                                        </div>
                                                    </div>

                                                    <!-- Input de valor -->
                                                    <div class="col-lg-3 col-md-3 col-sm-4 col-12 mb-2">
                                                        <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-lg-3 col-md-3 col-sm-4 col-12 mb-2 d-flex align-items-center">
                                                        <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" id="submit-button" disabled>Crear Reclamo</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                </div>
            </div>

        </div>
    </div>


@endsection

@section('script')
<script src="{{url('/static/js/select2.min.js?v='.time())}}"></script>
<script src="{{url('/static/js/claim_creation.js?v='.time())}}"></script>
<script>
    $(document).ready(function() {
        console.log('Script cargado y listo');

        $('.js-pick-ticket-id').select2().on('change', function(){
            getInfoClaimsFromTicket(this.value);
        });

        // Función para manejar el cambio de fecha
        $('#date_cover_efective').on('change', function() {
            $('#confirm-checkbox-container').show();
            $('#submit-button').prop('disabled', true);
        });

        // Función para manejar el checkbox
        $('#confirm-checkbox').on('change', function() {
            if ($(this).is(':checked')) {
                $('#submit-button').prop('disabled', false);
            } else {
                $('#submit-button').prop('disabled', true);
            }
        });

        const dateStartDiagnosticInput = document.getElementById('date_start_diagnostic');
        const dateCoverEfectiveInput = document.getElementById('date_cover_efective');

        // Añadir eventos de cambio a los inputs
        dateStartDiagnosticInput.addEventListener('change', validateDates);
        dateCoverEfectiveInput.addEventListener('change', validateDates);

    });

        // Función para validar las fechas y mostrar la alerta visual
        function validateDates() {
            let dateStartDiagnosticInput = document.getElementById('date_start_diagnostic');
            let dateCoverEfectiveInput = document.getElementById('date_cover_efective');

            const dateStartDiagnostic = new Date(dateStartDiagnosticInput.value);
            const dateCoverEfective = new Date(dateCoverEfectiveInput.value);

            console.log('Validando fechas:', dateStartDiagnostic, dateCoverEfective);

            const confirmCheckboxContainer = document.getElementById('confirm-checkbox-container');
            const submitButton = document.getElementById('submit-button');

            if (dateStartDiagnostic && dateCoverEfective) {
                const sixMonthsAfterCover = new Date(dateCoverEfective);
                sixMonthsAfterCover.setMonth(sixMonthsAfterCover.getMonth() + 6);

                let alertMessage = '';
                let alertClass = '';

                if (dateStartDiagnostic < dateCoverEfective) {
                    alertMessage = 'El diagnóstico comenzó antes de la fecha de cobertura. No está cubierto.';
                    alertClass = 'alert-danger';
                    document.getElementById('confirm-checkbox-container').style.display = 'none';
                    submitButton.disabled = true;
                } else if (dateStartDiagnostic <= sixMonthsAfterCover) {
                    alertMessage = 'El diagnóstico comenzó dentro de los primeros seis meses de cobertura. Advertencia. Marque la casilla de verificación';
                    alertClass = 'alert-warning';
                    $('#confirm-checkbox-container').show();
                    submitButton.disabled = true;
                } else {
                    alertMessage = 'El diagnóstico comenzó más de seis meses después de la cobertura. Cobertura probable.';
                    alertClass = 'alert-success';
                    document.getElementById('confirm-checkbox-container').style.display = 'none';
                    submitButton.disabled = false;
                }

                const alertContainer = document.getElementById('alert-container');
                alertContainer.textContent = alertMessage;
                alertContainer.className = 'custom-alert ' + alertClass;
                alertContainer.style.display = 'block';
            } else {
                document.getElementById('alert-container').style.display = 'none';
                document.getElementById('confirm-checkbox-container').style.display = 'none';
                submitButton.disabled = true;

                const alertContainer = document.getElementById('alert-container');
                alertContainer.textContent = alertMessage;
                alertContainer.className = 'custom-alert ' + alertClass;
                alertContainer.style.display = 'none';
            }
        }


</script>
@endsection