@extends('layouts.app', ['activePage' => 'deposito', 'menuParent' => 'consultas', 'titlePage' => __('Deposito')])

@section('content')
@include('includes.tailwind')

<div class="content">
  <div class="container-fluid mt-4">
    <input type="hidden" id="nomEmpresa" value="{{ $empresa->nombreorganizacion }}">
    <input type="hidden" id="buscaCliente" value="{{ $data->cliente->razon_social }}">
    <input type="hidden" id="idPagoRealizado" value="{{ $data->id }}">

    @php
      if (isset($data->factura)) {
        $f1 = explode(' ', $data->factura->fecha_emision);
        $fecexplo = explode('-', $f1[0]);

        $rutaPdfComple = Storage::disk('public')->url('app/public/cfdis/' . $base . '_xmls/' . $fecexplo[0] . '/' . $fecexplo[1] . '/' . $data->factura->serie . $data->factura->folio . '_' . $data->factura->rfc_receptor . '.pdf');
        $rutaXmlComple = Storage::disk('public')->url('app/public/cfdis/' . $base . '_xmls/' . $fecexplo[0] . '/' . $fecexplo[1] . '/' . $data->factura->serie . $data->factura->folio . '_' . $data->factura->rfc_receptor . '.xml');

        $arraStr = explode('storage', $rutaPdfComple);
        $rutaPdfComple = $arraStr[0] . $base . '/storage' . $arraStr[1];
        $arraStr = explode('storage', $rutaXmlComple);
        $rutaXmlComple = $arraStr[0] . $base . '/storage' . $arraStr[1];
      } else {
        $rutaPdfComple = '';
        $rutaXmlComple = '';
      }

      $estatusActivo = (int) $data->estatus === 1;
      $estatusTimbrado = $estatusActivo && (int) $data->facturado === 1;
      $estatusSinTimbrar = $estatusActivo && !$estatusTimbrado;
    @endphp

    <div class="row gy-3 align-items-start">
      <div class="col-md-9 h-100">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-3 h-100">
          <div class="flex flex-wrap items-start justify-between gap-2 mb-3">
            <div>
              <h6 class="text-lg font-semibold text-slate-900 mb-1">Depósito {{ $data->id }}</h6>
              <p class="text-sm text-slate-500 mb-0">Detalle del depósito con información precargada para seguimiento y timbrado.</p>
            </div>
          </div>

          <section class="bg-gray-25 rounded-lg border border-gray-200 p-3 mb-3" id="tourDepositoFiltros">
            <div class="flex items-center gap-3 mb-3">
              <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">
                <i class="material-icons text-sm">payments</i>
              </span>
              <div>
                <h6 class="text-sm font-semibold text-slate-900 mb-0">DATOS DEL DEPÓSITO</h6>
                <p class="text-sm text-slate-700 mb-0">Información registrada del cliente, pago, moneda y estatus del depósito.</p>
              </div>
            </div>

            <div class="row gx-3 gy-2">
              <div class="col-md-4" id="content_cliente">
                <label class="block text-sm text-slate-700 mb-1">Cliente:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-slate-700" value="{{ $data->cliente->razon_social }}" readonly>
              </div>

              <div class="col-md-4">
                <label class="block text-sm text-slate-700 mb-1">Forma de pago:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-slate-700" value="{{ $data->formaPago->claveSat . ' - ' . $data->formaPago->nombre }}" readonly>
              </div>

              <div class="col-md-4">
                <label class="block text-sm text-slate-700 mb-1">Fecha:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-slate-700" value="{{ $data->fecha }}" readonly>
              </div>
            </div>

            <div class="row gx-3 gy-2 mt-2">
              <div class="col-md-3">
                <label class="block text-sm text-slate-700 mb-1">Usuario:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-slate-700" value="{{ $data->usuario->nombres }}" readonly>
              </div>

              <div class="col-md-3" id="estatusBadge">
                <label class="block text-sm text-slate-700 mb-1">Estatus:</label>
                @if ($estatusActivo)
                  <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-emerald-700 text-sm font-semibold text-center">Activo</div>
                @else
                  <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-red-700 text-sm font-semibold text-center">Cancelado</div>
                @endif
              </div>

              <div class="col-md-3">
                <label class="block text-sm text-slate-700 mb-1">Moneda:</label>
                <select id="moneda" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-slate-700" >
                  @foreach ($monedas as $u)
                    <option value="{{ $u->id }}" @if ($data->id_moneda == $u->id) selected @endif>{{ $u->nombre }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-3">
                <label class="block text-sm text-slate-700 mb-1">Tipo de cambio:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="tipo_cambioPago" value="{{ $data->tipo_cambio }}" readonly/>
              </div>
            </div>
          </section>

          <div class="mb-2">
            <div class="overflow-x-auto rounded-lg border border-gray-200 shadow-sm" style="height: 40vh;overflow: auto;border-bottom: 0px solid gray;">
              <table class="w-full text-sm table-hover" cellspacing="0" id="gridFacturas">
                <thead class="sticky-top" style="font-size: 12px;">
                  <tr class="bg-gradient-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200">
                    <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide" width="15%">ID</th>
                    <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide" width="15%">Factura</th>
                    <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide" width="15%">UUID</th>
                    <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide" width="15%">Monto</th>
                    <th class="px-4 py-2 text-left font-semibold text-gray-700 uppercase tracking-wide" width="15%">Acciones</th>
                  </tr>
                </thead>

                <tbody>
                  @foreach ($data->facturas as $f)
                  <tr>
                    <td class="px-4 py-2 ">{{ $f->id }}</td>
                    <td class="px-4 py-2 ">{{ $f->factura->serie . '-' . $f->factura->folio }}</td>
                    <td class="px-4 py-2 ">{{ $f->factura->uuid }}</td>
                    <td class="px-4 py-2 ">${{ number_format($f->monto, 2) }}</td>
                    <td class="px-4 py-2 ">