@extends('layouts.tabler')

@section('content')
@if(session('success'))
<div class="alert displaynone alert-success" style="width: 100%">
    {{session('success')}}
</div>
@endif
<div class="page-header d-print-none">
  <div class="container-xl mt-3 px-4 ">
    <div class="row mt-5 mx-1">
      <div class="card rounded-4" style="border-color: #3478f6;">
        <div class="card-body">

           <div class="d-flex mt-2 align-items-center" >
            <div class="m-2 h2">
              <a href="{{session()->get('home')}}"><i class="fa-solid fa-arrow-left fa-lg"></i></a>
            </div>
            <div class="ml-2 m-2">
              <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a class="nav-link @if (!isset($warrantyHistory) || $warrantyHistory === false) active @endif" aria-current="page" href="/history"><h2 class="d-flex justify-content-start">Historial</h2></a>
                </li>
                <li class="nav-item d-none d-md-block">
                  <a class="warranty-link nav-link @if (isset($warrantyHistory) && $warrantyHistory == true) active @endif" aria-current="page" href="#">
                    <h2 class="d-flex justify-content-start">Historial de Garantias</h2>
                  </a>
                </li>
                <li class="nav-item d-block d-md-none">
                  <a class="warranty-link nav-link @if (isset($warrantyHistory) && $warrantyHistory == true) active @endif" aria-current="page" href="#">
                    <h2 class="d-flex justify-content-start">Garantias</h2>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="d-flex">
          @if (!isset($warrantyHistory) || $warrantyHistory === false)
            <div class="p-2 d-flex flex-row d-flex align-items-center justify-content-between w-100 mb-4 d-none d-md-block">


                <table class="w-100 ">
                  <tr style="height:10px">
                    <th>ID Pedido</th>
                    <th>Fecha</th>
                    <th>Estado</th>
                    <th>Sucursal</th>
                    <th>Precio</th>
                    <th>Detalles</th>
                  </tr>
                  @foreach ($tickets as $ticket )
                  <tr class="border-spacing:0">
                    <td>
                      <div class="borderCell d-flex flex-row gap-2 align-items-center" style="width:100%">
                        <div><img src="{{asset('img/history.png')}}" width="25" height="25" alt="Carrito"></div>
                        <div>#rec-{{$ticket->id}}</div>
                      </div>
                    </td>
                    <td>
                      <div class="borderCell d-flex flex-row gap-2 align-items-center">
                        <div>
                          {{Carbon\Carbon::parse($ticket->date)->format('d-m-Y');}}
                        </div>
                      </div>
                    </td>
                    @php
                      $statusText = '';
                      if ($ticket->status == 0) {
                        $statusText = 'En Proceso';
                      } else if ($ticket->status == 1) {
                        $statusText = 'Orden Procesada';
                      } else if ($ticket->status == 2) {
                        $statusText = 'Entregado';
                      }
                      else if ($ticket->status == -1) {
                        $statusText = 'Cancelado';
                      }
                      if ($ticket->warranty) {
                        if ($ticket->warranty->was_opened == 0) {
                          $statusText = 'En devolucion';
                        } else if ($ticket->warranty->was_opened == 1) {
                          $statusText = 'En devolucion';
                        }
                      }
                    @endphp
                    <td>
                      <div class="borderCell d-flex flex-row gap-2 align-items-center">
                        <div>
                          <b>{{$statusText}}</b>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="borderCell d-flex flex-row gap-2 align-items-center">
                        <div>
                          {{$ticket->store->name ?? '--'}}
                        </div>
                      </div>
                      </td>
                    <td>
                      <div class="borderCell d-flex flex-row gap-2 align-items-center">
                        <div>
                          <!-- ${{$ticket->total}} -->
                        {{-- ${{round($ticket->pesos_total)}} --}}
                        ${{number_format($ticket->pesos_total, 0, ',', '.');}}

                        </div>
                      </div>
                    </td>
                    
                    @if ($ticket->status != -1)

                    <td>
                      <div class="borderCell d-flex flex-row gap-2 align-items-center">
                        @if($ticket->warranty == null)
                          <div>
                            <button class="btn btn-primary rounded-2" onclick="detallesPago({{$ticket}})">
                              Datos de pago/contacto
                            </button>
                          </div>
                          <div>
                            <button class="btn btn-primary rounded-2" onclick="detallesProductos({{$ticket}})">
                              Productos comprados
                            </button>
                          </div>
                          <div>
                            <button class="btn btn-success rounded-2" onclick="uploadBaucher({{$ticket}})">
                              Subir Pago
                            </button>
                          </div>
                        @endif
                        <div>
                          <button class="btn btn-success rounded-2" onclick="detallesComprobante({ticket: {{$ticket}}, tipo: 'comprobante'})">
                            Ver comprobante
                          </button>
                        </div>
                        <div>
                          <button class="btn btn-success rounded-2" onclick="detallesComprobante({ticket: {{$ticket}}, tipo: 'envio'})">
                            Ver comprobante Envío
                          </button>
                        </div>
                        @if ($ticket->warranty == null && $ticket->paid_status == 0)
                          <div class="p-1 g-col-12">
                            <button class="btn btn-danger rounded-2" onclick="cancelOrder({{$ticket}})">
                              Cancelar Orden
                            </button>
                          </div>
                        @endif
                      </div>
                    </td>
                    @endif
                  </tr>
                  @endforeach

                </table>

            </div>
            <div class="p-2 d-flex flex-row d-flex align-items-center justify-content-between w-100 mb-4 d-block d-md-none">


              <table class="w-100 ">
                @foreach ($tickets as $ticket )
                @php
                      $statusText = '';
                      if ($ticket->status == 0) {
                        $statusText = 'En Proceso';
                      } else if ($ticket->status == 1) {
                        $statusText = 'Orden Procesada';
                      } else if ($ticket->status == 2) {
                        $statusText = 'Entregado';
                      }
                      else if ($ticket->status == -1) {
                        $statusText = 'Cancelado';
                      }
                      if ($ticket->warranty) {
                        if ($ticket->warranty->was_opened == 0) {
                          $statusText = 'En devolucion';
                        } else if ($ticket->warranty->was_opened == 1) {
                          $statusText = 'En devolucion';
                        }
                      }
                    @endphp
                @if ($loop->first)
                  <tr class="border-spacing:0" style="height:40px;border-top-width: 2px;border-color:blue">
                      <td>
                        <b>ID Pedido</b>
                      </td>
                      <td>
                        <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                          <div><img src="{{asset('img/history.png')}}" width="25" height="25" alt="Carrito"></div>
                          <div>#rec-{{$ticket->id}}</div>
                        </div>
                      </td>
                  </tr>
                  <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                    <td>
                      <b>Fecha</b>
                    </td>
                    <td>
                      <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                        {{Carbon\Carbon::parse($ticket->date)->format('d-m-Y');}}
                      </div>
                    </td>
                  </tr>
                  <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                    <td>
                      <b>Estado</b>
                    </td>
                    <td>
                      <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                        <b>{{$statusText}}</b>
                      </div>
                    </td>
                  </tr>
                  <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                    <td>
                      <b>Sucursal</b>
                    </td>
                    <td>
                      <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                        <b>{{$ticket->store->name ?? '--'}}</b>
                      </div>
                    </td>
                  </tr>
                  <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;@if ($ticket->status == -1) border-bottom-width: 1px; border-color:blue; border-bottom-style: solid; @endif">
                    <td>
                      <b>Precio</b>
                    </td>
                    <td>
                      <div class="d-flex flex-row gap-2 align-items-center" style="width:100% @if ($ticket->status == -1) ;border-bottom-width: 1px; border-color:blue @endif">
                        ${{$ticket->pesos_total}}
                      </div>
                    </td>
                  </tr>
                  @else
                  <tr class="border-spacing:0" style="height:40px;">
                    <td>
                      <b>ID Pedido</b>
                    </td>
                    <td>
                      <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                        <div><img src="{{asset('img/history.png')}}" width="25" height="25" alt="Carrito"></div>
                        <div>#rec-{{$ticket->id}}</div>
                      </div>
                    </td>
                </tr>
                <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                  <td>
                    <b>Fecha</b>
                  </td>
                  <td>
                    <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                      {{Carbon\Carbon::parse($ticket->date)->format('d-m-Y');}}
                    </div>
                  </td>
                </tr>
                <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                  <td>
                    <b>Estado</b>
                  </td>
                  <td>
                    <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                      <b>{{$statusText}}</b>
                    </div>
                  </td>
                </tr>
                <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                    <td>
                      <b>Sucursal</b>
                    </td>
                    <td>
                      <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                        <b>{{$ticket->store->name ?? '--'}}</b>
                      </div>
                    </td>
                  </tr>
                <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;@if ($ticket->status == -1) border-bottom-width: 1px; border-color:blue; border-bottom-style: solid; @endif">
                  <td>
                    <b>Precio</b>
                  </td>
                  <td>
                    <div class="d-flex flex-row gap-2 align-items-center" style="width:100%;">
                      ${{round($ticket->total)}}
                    </div>
                  </td>
                </tr>
                @endif
                @if ($ticket->status != -1)
                <tr class="border-spacing:0" style="height:40px;border-bottom-width: 1px; border-color:blue">
                  <td colspan="2">
                    <div class="accordion" id="accordionExample{{$ticket->id}}">
                      <div class="accordion-item" style="border-color: transparent !important; border: 0px solid transparent !important">
                          <button style="border-color: transparent; height: 15px; margin: 0; padding: 0; border: none" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$ticket->id}}" aria-expanded="false" aria-controls="collapse{{$ticket->id}}">
                          <strong>Detalles {{-- Opciones del Ticket #{ {$ticket->id}}--}}</strong>
                          </button>
                        <div id="collapse{{$ticket->id}}" class="accordion-collapse collapse" data-bs-parent="#accordionExample{{$ticket->id}}">
                          <div class="accordion-body m-0 p-0">
                            <div class="grid mt-2 mb-2 gap-0 row-gap-3">
                              @if($ticket->warranty == null)
                                <div class="p-1 g-col-6">
                                  <button class="btn btn-primary rounded-2 w-100" style=" white-space: normal;" onclick="detallesPago({{$ticket}})">
                                    Datos de pago/contacto
                                  </button>
                                </div>
                                <div class="p-1 g-col-6">
                                  <button class="btn btn-primary rounded-2 w-100" style=" white-space: normal;" onclick="detallesProductos({{$ticket}})">
                                    Productos comprados
                                  </button>
                                </div>
                                <div class="p-1 g-col-6">
                                  <button class="btn btn-success rounded-2 w-100" style=" white-space: normal;" onclick="uploadBaucher({{$ticket}})">
                                    Subir Pago
                                  </button>
                                </div>
                              @endif
                              <div class="p-1 g-col-6">
                                <button class="btn btn-success rounded-2 w-100" style=" white-space: normal;" onclick="detallesComprobante({ticket: {{$ticket}}, tipo: 'comprobante'})">
                                  Ver comprobante
                                </button>
                              </div>
                              <div class="p-1 g-col-6">
                                <button class="btn btn-success rounded-2 w-100" style=" white-space: normal;" onclick="detallesComprobante({ticket: {{$ticket}}, tipo: 'envio'})">
                                  Ver comprobante Envío
                                </button>
                              </div>
                              @if ($ticket->warranty == null && $ticket->paid_status == 0)
                                <div class="p-1 g-col-6">
                                  <button class="btn btn-danger rounded-2 w-100" style=" white-space: normal;" onclick="cancelOrder({{$ticket}})">
                                    Cancelar Orden
                                  </button>
                                </div>
                              @endif
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
                @endif
                @endforeach
              </table>
              @endif
            </div>
            @if (isset($warrantyHistory) && $warrantyHistory == true)
              <div class="page-content p-2 d-flex flex-row d-flex align-items-center justify-content-between w-100 mb-4 d-none d-md-block">
                <div class="panel panel-boxed">
                  <div class="panel-body">
                    <div class="table-responsive">
                      <table class="table" id="table_stores">
                        <tr style="height:10px">
                          <th>Estado de Sucursal</th>
                          <th>ID del Producto</th>
                          <th>Nombre del Producto</th>
                          <th>¿Fue Pegado?</th>
                          <th>Precio</th>
                        </tr>
                        <tbody>
                          @foreach($data as $row)
                            <tr>
                              <td>
                                @if (!is_null($row->store_status))
                                  @switch($row->store_status)
                                    @case(0)
                                      <button class='btn btn-info form-control round'>Pendiente</button>
                                    @break
                                    @case(1)
                                      <button class='btn btn-success form-control round'>Aprobado</button>
                                    @break
                                    @case(2)
                                      <button class='btn btn-danger form-control round'>Rechazado</button>
                                    @break
                                  @endswitch
                                @else
                                  --
                                @endif
                              </td>
                              <td>{{ $row->productItem ? $row->productItem->name : '--' }}</td>
                              <td>{{ $row->productItem ? $row->productItem->part : '--' }}</td>
                              <td>{{ $row->was_opened ? 'Si' : 'No' }}</td>
                              <td> $ {{ number_format(round($row->unitary), 0, ',', '.') }}</td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="page-content p-2 d-flex flex-row d-flex align-items-center justify-content-between w-100 mb-4 d-block d-md-none">
                <table class="w-100 ">
                  @foreach($data as $row)
                    <tr class="border-spacing:0" style="height:40px;border-top-width: 2px;border-color:blue">
                      <td style="padding-top: 10px">
                        <b>Estado</b>
                      </td>
                      <td style="padding-top: 10px">
                      @if (!is_null($row->store_status))
                        @switch($row->store_status)
                          @case(0)
                            <button class='btn btn-info form-control round'>Pendiente</button>
                          @break
                          @case(1)
                            <button class='btn btn-success form-control round'>Aprobado</button>
                          @break
                          @case(2)
                            <button class='btn btn-danger form-control round'>Rechazado</button>
                          @break
                        @endswitch
                      @else
                        --
                      @endif
                      </td>
                    </tr>
                    <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                      <td>
                        <b>ID del Producto</b>
                      </td>
                      <td>
                        <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                          {{ $row->productItem ? $row->productItem->name : '--' }}
                        </div>
                      </td>
                    </tr>
                    <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                      <td>
                        <b>Producto</b>
                      </td>
                      <td>
                        <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                          {{ $row->productItem ? $row->productItem->part : '--' }}
                        </div>
                      </td>
                    </tr>
                    <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                      <td>
                        <b>¿Fue Pegado?</b>
                      </td>
                      <td>
                        <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                          {{ $row->was_opened ? 'Si' : 'No' }}
                        </div>
                      </td>
                    </tr>
                    <tr class="border-spacing:0" style="height:40px;border-top-width: 0px;">
                      <td>
                        <b>Precio</b>
                      </td>
                      <td>
                        <div class="d-flex flex-row gap-2 align-items-center" style="width:100%">
                          $ {{ $row->unitary }}
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </table>
              </div>
            @endif
          <!-- Resto del código de la vista permanece igual -->
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">
    <div class="col-10 offset-1">

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

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Tus Productos</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
@include('layouts.popUpDetailsOrder')
@include('layouts.popUpDetailsPago')
@include('layouts.popUpCancelOrder')
@include('layouts.popUploadPay')
@include('layouts.popUpDetailsVoucher')



@endsection

@section('css')
  <link rel="stylesheet" href="{{asset('plugins/steps/css/normalize.css')}}">
  {{-- <link rel="stylesheet" href="{{asset('plugins/steps/css/main.css')}}"> --}}
  <link rel="stylesheet" href="{{asset('plugins/steps/css/jquery.steps.css')}}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
  <style>
    /* Estilo para el modal */
  </style>
@stop

@section('js')
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script>

  // var myModalPay = document.getElementById('myModalUploadPay');

  function uploadBaucher(data) {
    console.log("DATA....", data);

    var fechaFormateada = moment(data.date).format('DD/MM/YYYY');

    $('#ticketBaucher').text(data.id);
    $('#ticket_date_baucher').text(fechaFormateada);
    $("#id_ticket_baucher").val(data.id);

    // Limpiar imágenes anteriores
    $("#receipt_image").empty();

    if (data.payment_images && data.payment_images.length > 0) {
        data.payment_images.forEach(function(paymentImage) {
            var nuevoBoton = $('<a>', {
                text: "Comprobante: " + paymentImage.image.split('/').pop(),
                href: paymentImage.image,
                class: 'miBoton', // Clase opcional para estilizar con CSS
                click: function(event) {
                    // Aquí puedes añadir la lógica que se ejecutará cuando se haga clic en el botón
                },
                target: '_blank'
            });

            // Agregar el botón al contenedor
            $('#receipt_image').append(nuevoBoton);
            $('#receipt_image').append('<br>'); // Agregar un salto de línea entre botones
        });
    } else {
        $("#receipt_image").text('');
    }

    $('#myModalUploadPay').modal('show');
}

  $('#guardarBaucher').click(function(e) {

    e.preventDefault();
    var formData = new FormData($('#formArchivo')[0]);

    $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: 'POST',
    url: "{{route('import.baucher')}}",
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: (data) => {
      $("#mensaje").text(data.mensaje);
      $("#mostrarmensaje").removeClass( "alert-warning" ).addClass( "alert-success" );
      $("#mostrarmensaje").fadeToggle(750);
      setTimeout(function() {
        $("#mostrarmensaje").fadeOut(750);
        resetValue()
        $('#myModalUploadPay').modal('hide');
        location.reload();
      },2000);
    },
    error: function(xhr, status, error) {
      console.error(xhr.responseText);
    }
    });


  })

  function detallesPago(data) {
    myModal = new bootstrap.Modal(document.getElementById('myModalDetailsPago'), {
        keyboard: false,
    });

    const paymentWaysToShowBankInfo = {
      transferencia: true,
      banco: true,
      banca: true,
      deposito: true,
    };
    // Hacer la solicitud AJAX para obtener todos los métodos de pago
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'GET',
        url: "{{route('detailsPay', 'store_id')}}".replace('store_id', JSON.stringify(data.store_id)),
        cache: false,
        contentType: false,
        processData: false,
        success: (response) => {
            $("#listPagosModal").html("");
            $("#buttonsContainer").html(""); // Contenedor para los botones

            // Crea seccion de Datos de contacto
            var button = `
                    <button class="btn btn-primary m-1" id="btnPayMethodContact">
                        Ver Informacion de contacto
                    </button>`;
            $("#buttonsContainer").append(button);
            
            $(`#btnPayMethodContact`).on("click", () => {
                    $('#methodPay').text('--');
                    $("#listPagosModal").html(""); 

                    const datosDeContacto = JSON.parse(response[0].data);
                    Object.keys(datosDeContacto).forEach((key) => {
                        const fila = `
                            <div class="d-flex flex-row align-items-center p-1">
                                <div class="w-25">
                                    <div class="col-md-12">
                                        <span><strong>${key}</strong></span>
                                    </div>
                                </div>
                                <div>
                                    <div class="text-blue col-md-12">
                                        <span><strong>${datosDeContacto[key]}</strong></span>
                                    </div>
                                </div>
                            </div>`;
                        $("#listPagosModal").append(fila);
                    });
            });
           


            // Crea seccion de datos de pago

            data.pay_method.forEach((item, index) => {
                // Crear botón para cada método de pago
                const button = `
                    <button class="btn btn-primary m-1" id="btnPayMethod${index}">
                        Ver ${item}
                    </button>`;
                $("#buttonsContainer").append(button);

                // Añadir evento click al botón
                $(`#btnPayMethod${index}`).on("click", () => {
                    $('#methodPay').text(item);
                    $("#listPagosModal").html(""); // Limpiar datos anteriores

                    if (!paymentWaysToShowBankInfo[item.toLowerCase()]) {
                      return;
                    }

                    const datosDePago = JSON.parse(response[1].data);
                    datosDePago.forEach((data) => {
                        const fila = `
                            <div class="d-flex flex-row align-items-center p-1">
                                <div class="w-25">
                                    <div class="col-md-12">
                                        <span><strong>${data.label}</strong></span>
                                    </div>
                                </div>
                                <div>
                                    <div class="text-blue col-md-12">
                                        <span><strong>${data.value}</strong></span>
                                    </div>
                                </div>
                            </div>`;
                        $("#listPagosModal").append(fila);
                    });
                });
            });

            myModal.toggle();
        },
        error: function(error) {
            console.log(error);
        }
    });
}

    $('.warranty-link').click(function() {
      event.preventDefault();
      const url = new URL(window.location.href);
      url.searchParams.set('warrantyHistory', 'true');
      warrantyHistory = true;
      window.location.href = url.toString();
    });
    function detallesProductos(data) {

      myModal = new bootstrap.Modal(document.getElementById('myModalDetailsOrder'), {
        keyboard: false,
      });

       var fechaFormateada = moment(data.date).format('DD/MM/YYYY');

      $('#ticket').text(data.id);
      $('#ticket_date').text(fechaFormateada);

      let totalCompra = 0;
      $("#listProductsModal").html("");
      if(data.articles.length > 0 ){
          data.articles.forEach((article, key) => {
              let imagen = '';

              let cantidad = article.quantity;
              
              let priceFormateado = (article.price/ cantidad).toLocaleString('es-ES', {
              // let priceFormateado = article.price.toLocaleString('es-ES', {
                  // minimumFractionDigits: 2,
                  // maximumFractionDigits: 2
              });


              // let total = (article.price * cantidad).toLocaleString('es-ES', {
              let total = (article.price).toLocaleString('es-ES', {
                  // minimumFractionDigits: 2,
                  // maximumFractionDigits: 2
              });

              // totalCompra += article.price * cantidad
              totalCompra += article.price

              if(article.product.image === null){
                  imagen = '<img src="{{asset("/img/images.png")}}" width="50" height="50" alt="Carrito">';
              }else{
                  imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+article.product.image+'" width="50" height="50" alt="Carrito">';
              }

              let fila = '<div class="d-flex flex-row justify-content-between align-items-center p-1" style="border-bottom: 1px solid #3478f6;border-top: 1px solid #3478f6;" > \
                <div> \
                    <div class="col-md-12" > \
                      <div class="d-flex flex-row gap-1 align-items-center">'+ imagen +'<div>'+ article.product.name +'\
                        </div>\
                      </div> \
                    </div> \
                </div> \
                <div> \
                    <div class="col-md-12"> \
                      <div class="d-flex flex-row gap-1 align-items-center flex-wrap">\
                          <div class="d-flex justify-content-center inner d-flex align-items-center">\
                              <div class="d-flex align-items-center" style="height:36px">\
                              <span class="p-2">$'+priceFormateado+'</span>\
                              </div>\
                          </div>\
                      </div> \
                    </div> \
                </div> \
                <div> \
                    <div class="col-md-12"> \
                      <div class="d-flex flex-row gap-1 align-items-center flex-wrap">\
                          <div class="d-flex justify-content-center inner d-flex align-items-center">\
                              <div class="d-flex align-items-center" style="height:36px">\
                              <span class="p-2">'+cantidad+'</span>\
                              </div>\
                          </div>\
                      </div> \
                    </div> \
                </div> \
                <div> \
                    <div class="col-md-12"> \
                      <div class="d-flex flex-row gap-1 align-items-center flex-wrap">\
                          <div class="d-flex justify-content-center inner d-flex align-items-center">\
                              <div class="d-flex align-items-center" style="height:36px">\
                              <span class="p-2">$'+ total +'</span>\
                              </div>\
                          </div>\
                      </div> \
                    </div> \
                </div> \
              </div>'



            $("#listProductsModal").append(fila);
          });
      }

      totalCompra = totalCompra.toLocaleString('es-ES', {
          // minimumFractionDigits: 2,
          // maximumFractionDigits: 2
      });

      $('#ticket_total').text(`$${totalCompra}`);


      myModal.toggle();
    }
    function detallesComprobante(data) {

      var fechaFormateada = moment(data.ticket.date).format('DD/MM/YYYY');

      $('#ticketComprobante').text(data.ticket.id);
      var warrantyUrl = {
            APP_URL: @json(config('app.warranty_url'))
        };
      //se usa esta ruta ya que el recibo de envio esta en el proyecto del back, y la ruta es la indicada en el warrantyUrl
      const receiptImagePath = `${warrantyUrl.APP_URL}images/receipts/${data.ticket.receipt_image}`;
      const validation = (
        data.ticket.payment_images[data.ticket.payment_images.length - 1]?.image ||
        data.ticket.receipt_image
      );
      var receiptImage = data.tipo === 'comprobante' ? data.ticket.payment_images[data.ticket.payment_images.length - 1]?.image : receiptImagePath;
      //para pruebas locales podrian probar con esta
      // var receiptImage = data.tipo === 'comprobante' ? data.ticket.payment_images[data.ticket.payment_images.length - 1].image : `/filesBaucher/${data.ticket.receipt_image}`;
      //pero lo recomendable es usar el warranty_url en la ruta local del back y asi relacionar ambos sistemas
      if (receiptImage && validation) {
        $('#voucher_image').html("");
        
        var fileExtension = receiptImage.split('.').pop().toLowerCase();
        
        if (fileExtension === 'pdf') {
          var embed = $(`<embed src="${receiptImage}" type="application/pdf" width="100%" height="600px"/>`);
          $('#voucher_image').html(embed);
        } else {
          var image = $(`<img src="${receiptImage}" alt="Comprobante" style="max-width: 100%;"/>`);
          $('#voucher_image').html(image);
        }
      } else {
        $("#voucher_image").text('No se ha cargado ningún comprobante');
      }
      var title = data.tipo === 'comprobante' ? 'Detalles del Comprobante' : 'Detalles del Comprobante de Envío';
      $('#modalTitle').text(title);
      var myModal = new bootstrap.Modal(document.getElementById('myModalDetailsVoucher'), {
        keyboard: false,
      });
      myModal.toggle();
    }

    function cancelOrder(data) {
      myModal = new bootstrap.Modal(document.getElementById('myModalCancelOrder'), {
        keyboard: false,
      });
      $('#ticketComprobante').text(data.id);

      var warrantyUrl = {
            APP_URL: @json(config('app.warranty_url'))
        };
        $('#cancelOrderButton').on('click', function() {

          const dataTicket = {
              user_type: "user",
              ticket_id: data.id
          };

          var formData = new FormData();

          for (var key in dataTicket) {
              formData.append(key, dataTicket[key]);
          }

          $("#loadingSpinner").show()

          $.ajax({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'POST',
            url: "{{route('deleteTicket')}}",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: (response) => {
              console.log("response", response)
              $("#loadingSpinner").hide()
              $("#mensaje").text('Se ha eliminado correctamente la Orden');
              $("#mostrarmensaje").removeClass( "alert-warning" ).addClass( "alert-success" );
              $("#mostrarmensaje").fadeToggle(750);
              setTimeout(function() {
                $("#mostrarmensaje").fadeOut(750);
                resetValue()
                $('#myModalUploadPay').modal('hide');
                location.reload();
              },2000);
            },
            error: function(xhr, status, error) {
              console.error(xhr.responseText);
            }
          });
        })
      myModal.toggle();
    }

    $(function() {
      $("#brand_id").val("");
      $("#brand_id").change(function(){
        if($("#brand_id").val() == ""){
          $("#model_id").html("<option value=''>Modelo</option>");
          return 0;
        }
        let options = JSON.parse($("#brand_id option:selected").attr("data-models"));
          console.log(options);
        $("#model_id").html("<option value=''>Modelo</option>");
          $.each(options, function(v,e){
          $("#model_id").append("<option value='"+e.id+"'>"+e.name+"</option>");
        });
      });
      $("#mas").click(function(){
        $("#contador").text(parseInt($("#contador").text())+1);
      });
      $("#menos").click(function(){
        $("#contador").text(parseInt($("#contador").text())-1);
      });
    });

    function mostrarNombreArchivo() {
        const input = document.getElementById('archivo_baucher');
        const nombreArchivo = document.getElementById('nombre-archivo');
        if (input.files.length > 0) {
            nombreArchivo.textContent = input.files[0].name;
        } else {
            nombreArchivo.textContent = '';
        }
        $('#guardarBaucher').show();
        $('#cancelBaucher').show();
    }

    $('.deleteFile').click(function(event){
        event.preventDefault();
        resetValue();
    });

    function resetValue(){
      const nombreArchivo = document.getElementById('nombre-archivo');
      nombreArchivo.textContent = "";
      $('#guardarBaucher').hide();
      $('#cancelBaucher').hide();
    }


  </script>
  
@stop