@extends('layouts.app-repairs')
@section('css')
  <style>
    .group-inputs {
      display: grid;
      /* gap: 10px; */
      /* gap: 5px; */
      position: relative;
      /* Necesario para el divisor vertical */
    }

    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-family: Arial, sans-serif;
      font-size: 14px;
      resize: vertical;
      /* Permite redimensionar verticalmente */
    }

    /* Estilos para pantallas grandes (2 columnas) */
    @media (min-width: 768px) {
      .group-inputs {
        grid-template-columns: 1fr 1fr;
      }

      .group-inputs::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        /* width: 2px; */
        width: 1px;
        background-color: #dee2e6;
        /* background-color: #3478f6; */
        /* margin: 1em; */
        transform: translateX(-50%);
      }

      /* Separación de la línea vertical */
      .group-inputs div.row:nth-child(odd) {
        margin-right: 5px;
        /* Margen derecho para elementos de la columna izquierda */
      }

      .group-inputs div.row:nth-child(even) {
        margin-left: 5px;
        /* Margen izquierdo para elementos de la columna derecha */
      }
    }

    /* Estilos para pantallas pequeñas (1 columna) */
    @media (max-width: 767px) {
      .group-inputs {
        grid-template-columns: 1fr;
      }

      /* Resetear márgenes en pantallas pequeñas */
      .group-inputs div.row {
        margin-right: 0;
        margin-left: 0;
      }
    }
  </style>
@endsection

@section('content')
  <div class="page-header d-print-none m-0 p-0 pb-5">
    <div class="mt-3 w-100 pb-5">
      <div class="container-xl" style="margin-bottom: 90px">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 w-100">
          <div>
            <b style="color:#3478f6">Administración de Orden (Nro.{{ $repairOrder->order_number_formatted }})</b>
          </div>
          <div class="d-flex flex-row flex-wrap align-items-center gap-1 px-3">
            {{-- back button --}}
            <x-buttons.button-action icon="fas fa-arrow-left" text="Volver"
              onclick="window.location.href='{{ route('repair-orders.index') }}'" />

            {{-- Boton imprimir --}}
            <x-buttons.button-action class="btn-outline-primary" icon="fas fa-print" title="Imprimir Orden de trabajo"
              onclick="window.open('{{ route('repair-orders.generate-work-order-pdf', $repairOrder->id) }}', '_blank')" />
          </div>
        </div>

        <div class="row mt-2 px-2">

          {{-- Card datos cliente --}}
          <div class="col-md-6 mt-3">
            <div class="card card-sm" style="border-radius:10px;">
              <div class="card-header">
                <b style="color:#3478f6">Cliente</b>
              </div>
              <div class="card-body">
                <span><strong>Cliente:</strong> {{ $repairOrder->customer->full_name }}</span><br>
                <span><strong>Teléfono:</strong> {{ $repairOrder->customer->phone_number }}</span><br>
                <span><strong>Correo:</strong> {{ $repairOrder->customer->email }}</span><br>
              </div>
            </div>
          </div>
          {{-- Card datos de equipo --}}
          <div class="col-md-6 mt-3">
            <div class="card card-sm" style="border-radius:10px;">
              <div class="card-header">
                <b style="color:#3478f6">Equipo</b>
              </div>
              <div class="card-body">
                <span><strong>Marca:</strong> {{ $repairOrder->device->deviceBrand->name ?? '--' }}</span><br>
                <span><strong>Modelo:</strong> {{ $repairOrder->device->deviceModel->name ?? '--' }}</span><br>

                {{-- Password --}}
                <div>
                  <div class="d-flex align-items-start">
                    <span><strong>Contraseña:</strong> </span>
                    <span class="ms-2 text-truncate d-inline-block" id="device_password"
                      style="max-width: 500px; cursor: pointer;" data-bs-toggle="collapse"
                      data-bs-target="#password_container"> ***********
                      <button class="btn btn-sm btn-outline-primary ms-2" id="password_show_button">
                        <i class="fas fa-eye"></i>
                      </button>
                    </span>
                  </div>
                  <!-- Texto Expandido (Bootstrap Collapse) -->
                  <div class="collapse mt-2" id="password_container">
                    @if ($repairOrder->device->has_pattern)
                      @include('device.pattern', [
                          'initialPattern' => $repairOrder->device->password,
                          'readOnly' => true,
                      ])
                    @else
                      {{ $repairOrder->device->password }}
                    @endif
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-12 mt-3">
            <div class="card card-sm" style="border-radius:10px;">
              <div class="card-header" data-bs-toggle="collapse" data-bs-target="#collapseOne" style="cursor: pointer;">
                <b style="color:#3478f6">Información Adicional</b>
                <button class="btn btn-link text-decoration-none">
                  <i id="toggleIcon" class="fas fa-eye toggle-icon"></i> <!-- Bootstrap Icons -->
                </button>
              </div>

              <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
                <div class="card-body">


                  <div class="col">
                    <h3>Información del equipo</h3>
                  </div>

                  <div class="row" style="padding: 0 10px 0 10px">

                    <div class="group-inputs">

                      <div class="row mb-3">
                        <div class="col-md-12">
                          <span><strong>IMEI:</strong> {{ $repairOrder->device->imei ?? '--' }}</span><br>
                        </div>
                      </div>


                      {{-- Para agregar espacio en la segunda columna y forzar que el label "Detalles"
                        se muestre en la primera columna --}}
                      <div class="row">
                        <div class="col-md-12">
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-12">
                          <label for="last_name" class="form-label"><strong>Detalles:</strong></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <div class="">
                            <input disabled class="form-check-input" type="checkbox" name="has_sim_card" value="1"
                              @if ($repairOrder->device->has_sim_card) checked @endif />
                            <label for="has_sim_card" style="opacity: 1;">Tiene tarjeta SIM.</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <div class="">
                            <input disabled class="form-check-input" type="checkbox" name="request_backup" value="1"
                              @if ($repairOrder->device->request_backup) checked @endif />
                            <label for="request_backup" style="opacity: 1;">Pidió realizar una copia de seguridad.
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <div class="">
                            <input disabled class="form-check-input" type="checkbox" name="request_format" value="1"
                              @if ($repairOrder->device->request_format) checked @endif />
                            <label for="request_format" style="opacity: 1;">Pidió formatear el equipo.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>


                  <!-- Separador Horizontal-->
                  <div class="my-3" style="height: 1px; background-color: #dee2e6;"></div>

                  <div class="col">
                    <h3>Información del caso</h3>
                  </div>

                  <div class="row" style="padding: 0 10px 0 10px">
                    <div class="mb-2">
                      <span><strong>Descripción del problema:</strong>
                        {{ $repairOrder->caseInformation->problem_description }}</span><br>
                    </div>

                    <div class="group-inputs">
                      @foreach ($details as $key => $detail)
                        <div class="row">
                          <div class="col-md-12">
                            @if ($loop->first)
                              {{-- This is the first iteration --}}
                              <label for="details" class="form-label"><strong>Detalles:</strong></label>
                            @endif
                            <div class="form-check">
                              <input disabled class="form-check-input" type="checkbox" value="1"
                                {{-- dependiendo del old value marcar o desmarcar checkbox --}} @if ($repairOrder->caseInformation[$key] == 1) checked @endif
                                name="{{ $key }}" id="{{ $key }}">
                              <label class="form-check-label" for="{{ $key }}" style="opacity: 1;">
                                {{ $detail }}
                              </label>
                            </div>
                          </div>
                        </div>
                      @endforeach
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <div class="col-md-12 mt-3">
            <div class="card card-sm" style="overflow: hidden; border-radius:10px;">
              <div class="card-header">
                <b style="color:#3478f6">ORDEN Nro {{ $repairOrder->id }}</b>
              </div>

              <!-- Ajuste: Agregamos flex-column para móvil y flex-md-row para pantallas grandes -->
              <div class="card-body d-flex flex-column flex-md-row">
                <!-- Primera columna: Cliente y Teléfono -->
                <div class="flex-grow-1 pe-md-3">
                  <div class="mt-2">
                    <span><strong>Responsable:</strong> -- </span><br>
                  </div>

                  <div class="mt-2">
                    <span>
                      <span style="font-size: 1rem">
                        <i class="fas fa-calendar-alt" style="color: #3478F6;"></i>
                      </span>
                      <strong>Ingresado:</strong> {{ $repairOrder->created_at_formatted }}
                    </span><br>
                  </div>
                  <!-- Fecha prometida -->
                  <x-fields.editable-field label="Fecha prometida" name="expected_date"
                    value="{{ $repairOrder->expected_date }}"
                    text="{{ $repairOrder->expected_date_formatted ? $repairOrder->expected_date_formatted : '--' }}"
                    icon="fa-calendar-alt" min="{{ Carbon\Carbon::today()->format('Y-m-d') }}" type="date"
                    inputWidth="130px" />


                  <!-- Configurar Garantía -->
                  <div class="mt-2">
                    <span>
                      <span style="font-size: 1rem">
                        <i class="fas fa-shield" style="color: #3478F6;"></i>
                      </span>
                      <strong>Garantía:</strong>
                      <span id="warranty_text">
                        {{ $repairOrder->warranty_duration }}
                      </span>
                      @canmanageorder
                      {{-- Botones de editar --}}
                      <x-buttons.edit-field-buttons field="warranty" />

                      {{-- Inputs con valores originales (ocultos) --}}
                      <input hidden id="has_warranty_original" value="{{ $repairOrder->has_warranty ? 1 : 0 }}">
                      <input hidden id="duration_months_original"
                        value="{{ $repairOrder->has_warranty ? $repairOrder->warranty_months : null }}">
                      <input hidden id="duration_days_original"
                        value="{{ $repairOrder->has_warranty ? $repairOrder->warranty_days : null }}">
                      @endcanmanageorder
                    </span><br>
                  </div>

                  <!-- Contenedor de edición de garantía (inicialmente oculto) -->
                  <div id="editWarrantyContainer" class="d-none">

                    {{-- switch activar o desactivar garantia --}}
                    <div class="mb-2 mt-2">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="has_warranty">
                        <label class="form-check-label" for="has_warranty">
                          ¿Incluir garantía?
                        </label>
                      </div>
                    </div>

                    <!-- Sección de Duracion Garantía -->
                    <div class="warranty-duration-section collapsed" id="warranty-section">

                      <div>
                        <label class="form-label fw-bold">Duración de la garantía:</label>
                        <div class="mt-2">
                          <div class="warranty-duration-input">
                            <select class="form-select" id="duration_months">
                              <option value="0">0 meses</option>
                              <option value="1">1 mes</option>
                              <option value="2" selected>2 meses</option>
                              <option value="3">3 meses</option>
                              <option value="6">6 meses</option>
                              <option value="12">12 meses</option>
                            </select>
                          </div>
                          <span class="warranty-duration-separator">y</span>
                          <div class="warranty-duration-input">
                            <select class="form-select" id="duration_days">
                              <option value="0">0 días</option>
                              <option value="1">1 día</option>
                              <option value="5">5 días</option>
                              <option value="7">7 días</option>
                              <option value="10">10 días</option>
                              <option value="15">15 días</option>
                              <option value="20">20 días</option>
                              <option value="30">30 días</option>
                            </select>
                          </div>
                        </div>

                      </div>


                    </div>
                  </div>


                </div>

                <!-- Separador Vertical (Solo en pantallas grandes) -->
                <div class="d-none d-md-block" style="width: 1px; background-color: #dee2e6; margin: 0 10px;"></div>

                <!-- Separador Horizontal (Solo en móviles) -->
                <div class="d-md-none my-3" style="height: 1px; background-color: #dee2e6;"></div>

                <!-- Segunda columna: Información Financiera -->
                <div class="flex-grow-1 ps-md-3">
                  <!-- Adelantado -->
                  <x-fields.editable-field label="Adelanto" name="advance_amount"
                    value="{{ $repairOrder->advance_amount }}" prefix="$" />

                  <!-- Presupuesto en contado -->
                  <x-fields.editable-field label="Presupuesto en contado" name="cash_budget"
                    value="{{ $repairOrder->cash_budget }}" prefix="$" />

                  <!-- Presupuesto financiado -->
                  <x-fields.editable-field label="Presupuesto financiado" name="financed_budget"
                    value="{{ $repairOrder->financed_budget }}" prefix="$" />

                </div>
              </div>

              <!-- Footer -->
              <div class="card-footer">
                <div class="d-flex align-items-center mt-2">
                  <span><strong>Desperfecto:</strong> </span>
                  <span class="ms-2 text-truncate d-inline-block" id="defect_text"
                    style="max-width: 500px; cursor: pointer;" data-bs-toggle="collapse"
                    data-bs-target="#defect_container">
                    {{ $repairOrder->caseInformation->defect }}
                  </span>
                  @if ($repairOrder->caseInformation->defect != null)
                    <button class="btn btn-sm btn-outline-primary ms-2" id="defect_show_button"
                      data-bs-toggle="collapse" data-bs-target="#defect_container"
                      title="Ver detalles completos del desperfecto">
                      <i class="fas fa-eye"></i>
                    </button>
                  @endif
                  @canmanageorder
                  <!-- Textarea -->
                  <textarea id="defect_textarea" maxlength="500" class="form-control d-none action-input ms-2" rows="3"
                    style="width: 100%;">{{ $repairOrder->caseInformation->defect }}</textarea>
                  {{-- Botones de editar --}}
                  <x-buttons.edit-field-buttons field="defect" />
                  @endcanmanageorder
                </div>
                <!-- Texto Expandido (Bootstrap Collapse) -->
                <div class="collapse mt-2" id="defect_container">
                  <span id="full_defect_text_span">{{ $repairOrder->caseInformation->defect }}</span>
                </div>
                {{--  --}}
              </div>

              @if ($repairOrder->counteroffer)
                <div class="card-footer">
                  <div class="d-flex align-items-center mt-2">

                    <span><i class="text-blue fas fa-arrow-circle-right"></i> <strong>Contraoferta:</strong> </span>
                    <span class="ms-2 text-truncate d-inline-block" id="counteroffer_text"
                      style="max-width: 500px; cursor: pointer;" data-bs-toggle="collapse"
                      data-bs-target="#counteroffer_container">
                      {{ $repairOrder->counteroffer }}
                    </span>
                    <button class="btn btn-sm btn-outline-primary ms-2" id="counteroffer_show_button"
                      data-bs-toggle="collapse" data-bs-target="#counteroffer_container"
                      title="Ver detalles completos de la contraoferta">
                      <i class="fas fa-eye"></i>
                    </button>
                  </div>
                  <!-- Texto Expandido (Bootstrap Collapse) -->
                  <div class="collapse mt-2" id="counteroffer_container">
                    <span id="full_counteroffer_text_span">{{ $repairOrder->counteroffer }}</span>
                  </div>
                  {{--  --}}
                </div>
              @endif
            </div>
          </div>
        </div>

        <div class="mt-3 mb-4 px-2">
          <div class="btn-group-custom">
            <button type="button" class="btn btn-primary btn-left" title="Área">
              {{ $repairOrder->status->area->name }}
            </button>
            <button type="button" class="btn btn-success btn-right" title="Estado">
              {{ $repairOrder->status->name }}
            </button>
          </div>
        </div>

        {{-- Card productos y servicios --}}

        <div class="mt-3 px-2">
          <div class="card card-sm" style="overflow: hidden; border-radius:10px;">
            <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
              <b style="color:#3478f6">PRODUCTOS Y SERVICIOS</b>
              <div>
                @canmanageorder
                <x-buttons.button-action icon="fas fa-plus" text="Producto" data-bs-toggle="modal"
                  data-bs-target="#modal-products" />
                <x-buttons.button-action icon="fas fa-plus" text="Servicio" data-bs-toggle="modal"
                  data-bs-target="#modal-services" />
                <x-buttons.button-action icon="fas fa-plus" text="Adicional" data-bs-toggle="modal"
                  data-bs-target="#modal-additionals" />
                @endcanmanageorder
              </div>
            </div>

            <div class="card-body">

              <div class="p-3 table-responsive">
                {{-- Alert Message --}}
                <div id="custom-alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
                  <h4 id="custom-alert-title"class="alert-heading"></h4>
                  <span id="custom-alert-message"></span>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <table class="table" id="repair-orders-content-table" style="width: 100%">
                  <!-- La tabla se llenará dinámicamente con DataTables -->
                </table>
              </div>

              <div class="row">
                <div class="col-md-9">
                  <div class="card-body d-flex ">
                    <table class="table dataTables_wrapper" style="width:100%">
                      <thead>
                      </thead>
                      <tbody>
                        <tr>
                          <td> <b>Neto s/IVA</b> <span id="neto-value"> --</span> </td>
                          <td> <b>Desc. Gral.</b> $?? </td>
                          <td> <b>IVA</b> <span id="iva-value"> --</span> </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="card-body d-flex">
                    <table class="table dataTables_wrapper" style="width:100%">
                      <thead>
                      </thead>
                      <tbody>
                        <tr>
                          <td> <b>Subtotal c/IVA</b> </td>
                          <td class="text-end"> <span id="subtotal-amount">$00,0</span> </td>
                        </tr>
                        <tr>
                          <td> <b>Adelanto</b> </td>
                          <td class="text-end"> -<span id="advance-amount">$00,0</span></td>
                        </tr>
                        <tr>
                          <td> <b>Total</b> </td>
                          <td class="text-end"> <span id="total-amount">$00,0</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                  </div>
                </div>
              </div>
            </div>
            <style>

            </style>

            {{-- Acciones de [aceptar/rechazar/contraofertar] que solo vera el tecnico externo --}}
            @if ($showQuoteActions)
              <div id="action-buttons-container"
                class="position-fixed bottom-0 start-0 end-0 d-flex justify-content-center p-2" style="z-index: 1030;">
                <div class="card card-sm shadow-lg" style="border-radius:10px; overflow: hidden">
                  <div class="card-footer-action-buttons bg-white p-3 d-inline-flex gap-2">
                    <x-buttons.button-action class="btn-success" icon="fas fa-check" text="Aceptar"
                      onclick="confirmQuote()" />
                    <x-buttons.button-action class="btn-danger" icon="fas fa-close" text="Rechazar"
                      onclick="rejectQuote()" />
                    <x-buttons.button-action class="btn-primary" icon="fas fa-arrow-circle-right" text="Contraofertar"
                      data-bs-toggle="modal" data-bs-target="#modal-counteroffer" />
                  </div>
                </div>
              </div>
            @endif

            {{-- Acciones de [aceptar/rechazar] contraoferta en modalque solo vera el supervisor/responsable --}}
            @if ($showConunterofferPendingActions)
              {{-- Boton para ver detalles --}}
              <div id="counteroffer-pending-buttons-container"
                class="position-fixed bottom-0 start-0 end-0 d-flex justify-content-center p-2" style="z-index: 1030;">
                <div class="card card-sm shadow-lg" style="border-radius:10px; overflow: hidden">
                  <div class="card-footer-action-buttons bg-white p-3 d-inline-flex gap-2">
                    <x-buttons.button-action class="btn-primary" icon="fas fa-arrow-circle-right"
                      text="Ver Contraoferta" data-bs-toggle="modal" data-bs-target="#modal-counteroffer" />
                  </div>
                </div>
              </div>

              {{-- Modal con los Detalles de la contraoferta y botones para acepar/rechazar --}}
              <div class="modal fade" id="modal-counteroffer" tabindex="-1"
                aria-labelledby="modal-counteroffer-label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="modal-counteroffer-label">Detalles de la Contraoferta</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <p>{{ $repairOrder->counteroffer }}</p>
                      <div class="d-flex gap-2 justify-content-end">
                        <x-buttons.button-action class="btn-success" icon="fas fa-check" text="Aceptar"
                          onclick="acceptCounteroffer()" />
                        <x-buttons.button-action class="btn-danger" icon="fas fa-close" text="Rechazar"
                          onclick="rejectCounteroffer()" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endif


            {{-- Cartel que indica que la cotizacion fue aceptada --}}
            <div id="confirmed-quote-message-contianer"
              class="card-footer-action-buttons sticky-footer bg-success text-white {{ $showConfirmedQuoteMessage ? '' : 'd-none' }}">
              <div class="d-flex justify-content-center justify-content-md-start">
                <b>Aceptado</b>
              </div>
            </div>

            {{-- Cartel que indica que la cotizacion fue rechazada --}}
            <div id="rejected-quote-message-contianer"
              class="card-footer-action-buttons sticky-footer bg-danger text-white {{ $showRejectedQuoteMessage ? '' : 'd-none' }}">
              <div class="d-flex justify-content-center justify-content-md-start">
                <b>Rechazado</b>
              </div>
            </div>

          </div>
        </div>

      </div>



    </div>

  </div>
  @include('repair_order.modal-services')
  @include('repair_order.modal-products')
  @include('repair_order.modal-additionals')
  @include('repair_order.modal-counteroffer')
@endsection
@push('jsstack')
  <script src="{{ asset('js/pattern.js') }}"></script>
  <script>
    const repairOrderId = {{ $repairOrder->id }};

    // Construir la URL del endpoint
    const url = "{{ route('repair-orders.get-content', ':repairOrderId') }}".replace(':repairOrderId',
      repairOrderId);

    $(document).ready(function() {
      // DataTable
      repairOrderContentTable = $('#repair-orders-content-table').DataTable({
        processing: true,
        serverSide: true,
        ordering: false, // Deshabilita ordenado por columna
        paging: false, // Deshabilita la paginación
        // Ocultar elementos innecesarios
        dom: "t", // Solo muestra la tabla sin controles
        drawCallback: function(settings) {
          // Ejecuta la lógica global primero
          if ($.fn.dataTable.defaults.drawCallback) {
            $.fn.dataTable.defaults.drawCallback(settings);
          }

          // Inicializar tooltips de Bootstrap después de cada render
          $('[data-bs-toggle="tooltip"]')?.tooltip();

          // Agregar clase personalizada al tooltip
          $('.out-of-stock-row').on('inserted.bs.tooltip', function() {
            // Buscar el tooltip generado y agregarle una clase
            $('.tooltip').addClass('alert-tooltip-style');
            // console.log("hereAAAA")
          });
        },
        ajax: {
          url: url,
          data: function(d) {
            d.repair_order_id = {{ $repairOrder->id }};
          },
          complete: function(d) {
            // console.log('Respuesta del servidor:', d);
            const payload = d.responseJSON.total_payload
            let netPrice = payload.net_price;
            let iva = payload.iva;

            let subtotal = payload.subtotal;
            let advance = payload.advance_amount;
            let totalPrice = payload.total_price;

            $('#neto-value').text(netPrice);
            $('#iva-value').text(iva);
            $('#subtotal-amount').text(subtotal);
            $('#advance-amount').text(advance);
            $('#total-amount').text(totalPrice);

            // console.log(d.responseJSON.alert_message)
            const alert_message = d.responseJSON.alert_message;
            if (alert_message) {
              showBootstrapAlert({
                title: alert_message.title,
                message: alert_message.message
              });
            } else {
              hideBootstrapAlert();
            }
          },
          error: function(xhr, status, error) {
            console.log('Error en la solicitud AJAX:', error);
          }
        },
        columns: [{
            title: "Tipo",
            data: "type"
          },
          {
            data: "description",
            name: "description",
            title: "Descripción"
          },
          {
            data: "price",
            name: "price",
            title: "P. Unitario",
            className: "text-end"
          },
          {
            data: "quantity",
            title: "Cantidad",
            width: '10%'
          },
          {
            data: "discount",
            title: "Descuento(%)",
            width: '10%'
          },
          {
            data: "iva",
            title: "IVA(%)",
            className: "text-end"
          },
          {
            data: "subtotal",
            name: "subtotal",
            title: "Subtotal",
            className: "text-end"
          },
          {
            data: "action",
            name: "action",
            title: "",
            orderable: false,
            searchable: false
          }
        ],
      });
    });

    function removeContent(contentId) {
      const repairOrderId = {{ $repairOrder->id }};

      showConfirmAlert({
        // title: "Are you sure?",
        confirmCallback: function() {
          // Construir la URL del endpoint
          const url = "{{ route('repair-orders.detach-content', ':repairOrderId') }}".replace(':repairOrderId',
            repairOrderId);

          $.ajax({
            url: url,
            type: "POST",
            data: {
              content_id: contentId,
              _token: "{{ csrf_token() }}" // Incluir token CSRF en la petición
            },
            dataType: "json",
            success: function(result) {
              if (result.success) {
                showSuccessNotification("Contenido eliminado con éxito");

                repairOrderContentTable.ajax.reload(); // Recargar la tabla después de eliminar
                // console.log("Orden de reparación actualizada:", result.repair_order);
              } else {
                showErrorNotification('Hubo un problema al eliminar el contenido.')
              }
            },
            error: function(xhr, status, error) {
              console.error("Error en la solicitud:", error);
              showErrorNotification('Hubo un problema al eliminar el contenido.')
            },
          });
        }
      });

    }



    function changeEditButton(that, field) {
      var cancelButton = $(".cancel-btn[data-field='" + field + "']");
      cancelButton.removeClass("d-none"); // Mostrar botón cancelar

      // Cambiar el texto del botón a "Guardar" y deshabilitarlo
      $(that).html('<i class="fas fa-check"></i>')
        .removeClass("btn-outline-primary edit-btn")
        .addClass("btn-success save-btn disabled")
        // .data("original-value", originalValue) // Guardamos el valor original
        .attr("data-field", field)
        .attr('title', 'Guardar');
    }

    function handleWarrantyDataChange() {
      // verificar si has warrany has change
      var hasWarrrantyCurrentValue = $(`#has_warranty`).is(':checked') ? 1 : 0;
      var originalHasWarrantyValue = $(`#has_warranty_original`).val();

      if (hasWarrrantyCurrentValue != originalHasWarrantyValue) {
        $(".save-btn[data-field='warranty']").removeClass("disabled");
        return;
      }

      if (originalHasWarrantyValue != 0) {
        // si no verificar si duration_months o duration_days has change
        var durationMonthsCurrentValue = $(`#duration_months`).val();
        var durationDaysCurrentValue = $(`#duration_days`).val();
        var originalDurationMonthsValue = $(`#duration_months_original`).val();
        var originalDurationDaysValue = $(`#duration_days_original`).val();

        if (durationMonthsCurrentValue != originalDurationMonthsValue ||
          durationDaysCurrentValue != originalDurationDaysValue) {
          $(".save-btn[data-field='warranty']").removeClass("disabled");
          return;
        }

      }

      // si no se ha cambiado nada, deshabilitar el botón de guardar
      $(".save-btn[data-field='warranty']").addClass("disabled");

    }

    function initializeWarrantyData() {
      // Rehidratando los datos de la garantía
      var hasWarranty = $(`#has_warranty_original`).val();
      var durationMonths = $(`#duration_months_original`).val() || 2;
      var durationDays = $(`#duration_days_original`).val() || 0;

      $(`#has_warranty`).prop("checked", hasWarranty == 1);
      $(`#duration_months`).val(durationMonths);
      $(`#duration_days`).val(durationDays);

      if (hasWarranty == false) {
        $(`#warranty-section`).addClass('collapsed');
      } else {
        $(`#warranty-section`).removeClass('collapsed');
      }
    }

    $(document).on("click", ".edit-btn", function(event) {
      var field = $(this).data("field");

      if (field == "warranty") {
        initializeWarrantyData();
        changeEditButton(this, field);

        $('#editWarrantyContainer').removeClass("d-none");

        internalFields = ["has_warranty", "duration_months", "duration_days"];

        internalFields.forEach(internalField => {
          var inputElement = $(`#${internalField}`);
          inputElement.on("change", function() {
            handleWarrantyDataChange();
          });
        });

        return;
      }

      var textElement = $("#" + field + "_text");
      var inputElement = $("#" + field + "_input, #" + field + "_textarea"); // Detecta ambos tipos de campos

      var cancelButton = $(".cancel-btn[data-field='" + field + "']");

      // Mostrar input/textarea y ocultar el texto
      textElement.addClass("d-none");
      inputElement.removeClass("d-none").focus();
      cancelButton.removeClass("d-none"); // Mostrar botón cancelar

      // Cambiar el botón a "Guardar" pero inicialmente desactivado
      $(this).html('<i class="fas fa-check"></i>')
        .removeClass("btn-outline-primary edit-btn")
        .addClass("btn-success save-btn disabled")
        .data("original-value", inputElement.val()) // Guardamos el valor original
        .attr("data-field", field)
        .attr('title', 'Guardar');

      // Detectar cambios en el input o textarea
      inputElement.on("input", function() {
        var newValue = inputElement.val().trim();
        var originalValue = $(".save-btn[data-field='" + field + "']").data("original-value").trim();

        // Habilitar solo si el valor cambió
        if (newValue !== originalValue) {
          $(".save-btn[data-field='" + field + "']").removeClass("disabled");
        } else {
          $(".save-btn[data-field='" + field + "']").addClass("disabled");
        }
      });
    });

    // Evento para cancelar la edición y restaurar el texto original
    $(document).on("click", ".cancel-btn", function(event) {
      var field = $(this).data("field");
      var textElement = $("#" + field + "_text");
      var inputElement = $("#" + field + "_input, #" + field + "_textarea");
      var saveButton = $(".save-btn[data-field='" + field + "']");
      var cancelButton = $(".cancel-btn[data-field='" + field + "']");

      if (field == "warranty") {
        $('#editWarrantyContainer').addClass("d-none");
      }

      // Ocultar el input y mostrar el texto nuevamente
      inputElement.addClass("d-none");
      textElement.removeClass("d-none");

      // Restaurar el botón de edición
      saveButton.html('<i class="fas fa-edit"></i>')
        .removeClass("btn-success save-btn disabled")
        .addClass("btn-outline-primary edit-btn")
        .attr('title', 'Editar');

      // Ocultar el botón de cancelar
      cancelButton.addClass("d-none");
    });

    $(document).on("click", ".save-btn:not(.disabled)", function(event) {
      updateRepairOrder($(this).data("field"));
    });

    $(document).on("change", "#warranty-checkbox", function(event) {
      updateRepairOrder("has_warranty");
    });


    // Mostrar/ocultar sección de garantía
    $('#has_warranty').change(function() {
      const isActive = $(this).is(':checked');
      const section = $('#warranty-section');

      if (isActive) {
        section.removeClass('collapsed');
      } else {
        section.addClass('collapsed');
      }
    });

    // Manejar peticion ajax para actualizar los datos de la garantia
    function updateRepairOrderWarrantyData() {
      var hasWarranty = $(`#has_warranty`).is(':checked') ? 1 : 0;
      var durationMonths = $(`#duration_months`).val();
      var durationDays = $(`#duration_days`).val();
      var textElement = $("#warranty_text");

      if (hasWarranty == 1 && (durationMonths == '0' && durationDays == '0')) {
        alert("La duración en meses y la duración en días no pueden ser cero al mismo tiempo");
        return false;
      }

      var button = $(".save-btn[data-field='warranty']");

      var cancelButton = $(".cancel-btn[data-field='warranty']");

      // Deshabilitar botones y cambiar a spinner
      button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
        .addClass("disabled");
      cancelButton.addClass("disabled");

      // Obtener el ID de la orden de reparación
      const repairOrderId = {{ $repairOrder->id }};
      const url = "{{ route('repair-orders.update-warranty-info', ':repairOrderId') }}".replace(':repairOrderId',
        repairOrderId);

      $.ajax({
        url: url,
        method: "PUT",
        data: {
          _token: "{{ csrf_token() }}",
          has_warranty: hasWarranty,
          warranty_months: durationMonths,
          warranty_days: durationDays
        },
        success: function(response) {

          if (response.success) {

            textElement.text(response.new_value);

            // Restaurar botón de edición
            button.html('<i class="fas fa-edit"></i>')
              .removeClass("btn-success save-btn disabled")
              .addClass("btn-outline-primary edit-btn")
              .attr('title', 'Editar');

            // Ocultar el botón de cancelar
            cancelButton.addClass("d-none");
            cancelButton.removeClass("disabled");

            // Actualizar original values
            $(`#has_warranty_original`).val(hasWarranty);
            $(`#duration_months_original`).val(durationMonths);
            $(`#duration_days_original`).val(durationDays);

            // ocultar campos garantia
            $('#editWarrantyContainer').addClass("d-none");

            showSuccessNotification("Orden de reparación actualizada con éxito");
          }
        },
        error: function(xhr, status, error) {
          // console.log("Error en la solicitud AJAX:", xhr.responseText);
          button.html('<i class="fas fa-check"></i>')
            .removeClass("disabled");
          cancelButton.removeClass("disabled");

          showErrorNotification("Error al actualizar la orden de reparación");
        },
      });
    }

    function updateRepairOrder(field) {
      if (field === "warranty") {
        // Si el campo es "warranty", no hacer nada aquí, ya que se maneja en la función de edición

        updateRepairOrderWarrantyData();
        return;
      }

      var inputElement = $("#" + field + "_input, #" + field + "_textarea");
      var textElement = $("#" + field + "_text");
      var button = $(".save-btn[data-field='" + field + "']");
      var cancelButton = $(".cancel-btn[data-field='" + field + "']");

      // Obtener el ID de la orden de reparación
      const repairOrderId = {{ $repairOrder->id }};
      const url = "{{ route('repair-orders.update', ':repairOrderId') }}".replace(':repairOrderId', repairOrderId);

      // Determinar el nuevo valor
      var newValue;
      newValue = inputElement.val().trim();
      // Deshabilitar botones y cambiar a spinner
      button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
        .addClass("disabled");
      cancelButton.addClass("disabled");

      $.ajax({
        url: url,
        method: "PUT",
        data: {
          _token: "{{ csrf_token() }}",
          field: field,
          value: newValue
        },
        success: function(response) {
          // console.log("Respuesta del servidor:", response);

          if (response.success) {
            // Si es "Desperfecto", actualizar también el contenido del colapsable
            if (field === "defect") {
              $('#full_defect_text_span').text(response.new_value);
            }

            textElement.text(response.new_value);
            inputElement.addClass("d-none");
            textElement.removeClass("d-none");

            // Restaurar botón de edición
            button.html('<i class="fas fa-edit"></i>')
              .removeClass("btn-success save-btn disabled")
              .addClass("btn-outline-primary edit-btn")
              .attr('title', 'Editar');

            // Ocultar el botón de cancelar
            cancelButton.addClass("d-none");
            cancelButton.removeClass("disabled");

            if (field == 'advance_amount') {
              repairOrderContentTable.ajax.reload(); // Recargar la tabla
            }

            showSuccessNotification("Orden de reparación actualizada con éxito");
          } else {
            alert("Error al actualizar el valor.");
          }
        },
        error: function(xhr, status, error) {
          // console.log("Error en la solicitud AJAX:", xhr.responseText);
          showErrorNotification("Error al actualizar la orden de reparación");
        },
        complete: function() {
          if (!textElement.hasClass("d-none")) {
            button.html('<i class="fas fa-edit"></i>')
              .removeClass("btn-success save-btn disabled")
              .addClass("btn-outline-primary edit-btn")
              .attr('title', 'Editar');
            cancelButton.addClass("d-none");
            cancelButton.removeClass("disabled");
          } else {
            button.html('<i class="fas fa-check"></i>')
              .removeClass("disabled");
            cancelButton.removeClass("disabled");
          }
        }
      });
    }


    // Permitir guardar con Enter (input normal) y Ctrl + Enter (textarea)
    $(document).on("keydown", "input[type='number'], textarea", function(e) {
      if ((e.which === 13 && $(this).is("input")) || (e.ctrlKey && e.which === 13 && $(this).is("textarea"))) {
        e.preventDefault();
        $(this).siblings(".save-btn:not(.disabled)").click();
      }
    });


    const deviceHasPattern = {{ $repairOrder->device->has_pattern }};
    let isInitialize = false;

    // Manejar mostrar patron
    const showMoreElements = ['password', 'counteroffer', 'defect'];
    showMoreElements.forEach(element => {
      const containerElement = $(`#${element}_container`);
      const iconElement = $(`#${element}_show_button i`);
      containerElement.on("show.bs.collapse", function() {
        iconElement.removeClass("fa-eye").addClass("fa-eye-slash");
        if (deviceHasPattern && !isInitialize) {
          isInitialize = true;
          setTimeout(() => {
            showPattern();
          }, 10); // Redibujar líneas después de que el DOM se actualice
        }
      });

      containerElement.on("hide.bs.collapse", function() {
        iconElement.removeClass("fa-eye-slash").addClass("fa-eye");
      });
    });



    $(document).ready(function() {
      $('#collapseOne').on('show.bs.collapse', function() {
        $('#toggleIcon').removeClass('fa-eye').addClass('fa-eye-slash');
      });

      $('#collapseOne').on('hide.bs.collapse', function() {
        $('#toggleIcon').removeClass('fa-eye-slash').addClass('fa-eye');
      });
    });
  </script>

  <script>
    // const repairOrderId = {{ $repairOrder->id }};

    function confirmQuote() {
      showConfirmAlert({
        title: "¿Está seguro de que desea aceptar la cotización?",
        confirmCallback: function() {
          // Construir la URL del endpoint
          const url = "{{ route('repair-orders.confirm-quote', ':repairOrderId') }}".replace(':repairOrderId',
            repairOrderId);

          $.ajax({
            url: url,
            type: "POST",
            data: {
              _token: "{{ csrf_token() }}" // Incluir token CSRF en la petición
            },
            dataType: "json",
            success: function(result) {
              if (result.success) {
                showSuccessNotification("Cotización aceptada con éxito");
                $("#action-buttons-container").remove(); // Eliminar botones de acción
                $("#confirmed-quote-message-contianer").removeClass(
                  'd-none'); // Mostrar mensaje de cotización aceptada
              } else {
                showErrorNotification('Hubo un problema al aceptar la cotización.')
              }
            },
            error: function(xhr, status, error) {
              // console.error("Error en la solicitud:", error);
              showErrorNotification('Hubo un problema al aceptar la cotización.')
            },
          });
        }
      });
    }

    function rejectQuote() {
      showConfirmAlert({
        title: "¿Está seguro de que desea rechazar la cotización?",
        confirmCallback: function() {
          // Construir la URL del endpoint
          const url = "{{ route('repair-orders.reject-quote', ':repairOrderId') }}".replace(':repairOrderId',
            repairOrderId);

          $.ajax({
            url: url,
            type: "POST",
            data: {
              _token: "{{ csrf_token() }}" // Incluir token CSRF en la petición
            },
            dataType: "json",
            success: function(result) {
              if (result.success) {
                showSuccessNotification("Cotización rechazada con éxito");
                $("#action-buttons-container").remove(); // Eliminar botones de acción
                $("#rejected-quote-message-contianer").removeClass(
                  'd-none'); // Mostrar mensaje de cotización rechazada

              } else {
                showErrorNotification('Hubo un problema al rechazar la cotización.')
              }
            },
            error: function(xhr, status, error) {
              // console.error("Error en la solicitud:", error);
              showErrorNotification('Hubo un problema al rechazar la cotización.')
            },
          });
        }
      });
    }

    function acceptCounteroffer() {

      showConfirmAlert({
        title: "¿Está seguro de que desea aceptar la contraoferta?",
        confirmCallback: function() {
          // Construir la URL del endpoint
          const url = "{{ route('repair-orders.accept-counteroffer', ':repairOrderId') }}".replace(
            ':repairOrderId',
            repairOrderId);

          $.ajax({
            url: url,
            type: "POST",
            data: {
              _token: "{{ csrf_token() }}" // Incluir token CSRF en la petición
            },
            dataType: "json",
            success: function(result) {
              showSuccessNotification("Contraoferta aceptada con éxito");
              $("#counteroffer-pending-buttons-container").remove(); // Eliminar botones de acción
              // cerrar modal
              $("#modal-counteroffer").modal("hide");

            },
            error: function(xhr, status, error) {
              // console.error("Error en la solicitud:", error);
              showErrorNotification('Hubo un problema al aceptar la cotización.')
            },
          });
        }
      });
    }

    function rejectCounteroffer() {
      showConfirmAlert({
        title: "¿Está seguro de que desea rechazar la contraoferta?",
        confirmCallback: function() {
          // Construir la URL del endpoint
          const url = "{{ route('repair-orders.reject-counteroffer', ':repairOrderId') }}".replace(
            ':repairOrderId',
            repairOrderId);

          $.ajax({
            url: url,
            type: "POST",
            data: {
              _token: "{{ csrf_token() }}" // Incluir token CSRF en la petición
            },
            dataType: "json",
            success: function(result) {
              showSuccessNotification("Contraoferta rechazada con éxito");
              $("#action-buttons-container").remove(); // Eliminar botones de acción
              $("#counteroffer-pending-buttons-container").remove(); // Eliminar botones de acción
              // cerrar modal
              $("#modal-counteroffer").modal("hide");

              // $("#rejected-quote-message-contianer").removeClass(
              //   'd-none'); // Mostrar mensaje de cotización aceptada
            },
            error: function(xhr, status, error) {
              // console.error("Error en la solicitud:", error);
              showErrorNotification('Hubo un problema al rechazar la contraoferta.')
            },
          });
        }
      });
    }
  </script>
@endpush