@extends('layouts.customer_portal', ['page' => 'invoices'])

@section('title', __('messages.invoice_details'))
 
@section('page_header')
    <div class="page__heading d-flex align-items-center">
        <div class="flex">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#"><i class="material-icons icon-20pt">home</i></a></li>
                    <li class="breadcrumb-item" aria-current="page">{{ __('messages.portal') }}</li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('messages.invoice_details') }}</li>
                </ol>
            </nav>
            <h1 class="m-0">{{ __('messages.invoice_details') }}</h1>
            
        </div>
    </div>
@endsection
 
@section('content') 
   <div class="alert alert-soft-success d-flex align-items-center" role="alert">
                    <div class="text-body"><strong>{{ __('Estatus') }} : </strong> {{ $invoice->estatus }}</div>
                </div>
    <div class="row">
       
  

        <div class="col-12 col-md-4">
            <p class="h2 pb-4">
                BS{{ $invoice->id }}{{ $invoice->identificador }} - {{ $invoice->sucursal }}
            </p>
              
        </div>
        

        <div class="col-12 col-md-8 text-md-right mb-4">
           
            
        

          @if( ($invoice->customer->email))

            <p><a href="https://dashboard.boxshoplogistics.com/api/yappy/index.php?orden={{ $invoice->id }}&amp;cliente={{ $invoice->customer->email }}" target="_blank"><img alt="" src="https://dashboard.boxshoplogistics.com/brand.png" style="width: 207px; height: 56px;" /></a></p>
@endif
          
        </div>
           </div>

<br>

   <div id="pdf-container" style="position: relative; width: 100%; max-width: 1000px; margin: 0 auto;">

  <!-- 🌀 Preloader -->
  <div id="pdf-loader" style="
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #555;
  ">
    <div class="spinner" style="
      width: 40px;
      height: 40px;
      border: 4px solid #ccc;
      border-top-color: #007bff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    "></div>
    <span>Cargando documento...</span>
  </div>

  <!-- 📄 El visor PDF -->
  <embed
    id="pdf-embed"
    src="https://docs.google.com/gview?embedded=true&url={{ route('pdf.invoice', $invoice->uid) }}"
    style="width: 100%; height: 600px; border: none;"
  />
</div>

<!-- 💫 Animación + ocultar después de 5s -->
<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
<script>
  // Espera 5 segundos antes de ocultar el loader
  window.addEventListener('load', () => {
    setTimeout(() => {
      document.getElementById('pdf-loader').style.display = 'none';
    }, 1000);
  });
</script>
  <style>
    .invoice-card {
        font-family: "Inter", Arial, sans-serif;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 24px;
        max-width: 1100px;
        margin: 40px auto;
        color: #1e293b;
    }

    .invoice-card h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
        color: #112b4a;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 0.5rem;
    }

    .invoice-table {
        width: 100%;
        border-collapse: collapse;
    }

    .invoice-table td {
        padding: 12px 10px;
        vertical-align: top;
        border-bottom: 1px solid #f1f5f9;
    }

    .invoice-table td:first-child {
        width: 180px;
        font-weight: 600;
        color: #334155;
        background: #f9fafb;
        border-radius: 8px 0 0 8px;
    }

    .invoice-table td:last-child {
        background: #fff;
        border-radius: 0 8px 8px 0;
    }

    .invoice-table tr:last-child td {
        border-bottom: none;
    }

    .invoice-content {
        font-family: "Inter", Arial, sans-serif;
        font-size: 0.95rem;
        line-height: 1.6;
        color: #334155;
        white-space: pre-wrap;
        word-break: break-word;
        
    }

    .invoice-content hr {
        border: none;
        border-top: 1px dashed #cbd5e1;
        margin: 10px 0;
    }

    .invoice-content a {
        color: #0d6efd;
        text-decoration: none;
        word-break: break-all;
    }

    .invoice-content a:hover {
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        .invoice-table td {
            display: block;
            width: 100%;
        }

        .invoice-table td:first-child {
            background: transparent;
            border-radius: 0;
            padding-bottom: 4px;
        }

        .invoice-table td:last-child {
            padding-top: 0;
        }
    }
</style>

<div class="invoice-card">
    <h3>Detalles del Pedido</h3>
    <table class="invoice-table">
        <tbody>
            <tr>
                <td>Tienda:</td><td class="invoice-content">{{ $invoice->web }}
                </td>
            </tr>

            <tr>
                <td>Productos:</td><td class="invoice-content"><span style="color:#112b4a;">{{ $invoice->productos }}</span>
                </td>
            </tr>
            <tr>
                <td>Link de Producto:</td><td class="invoice-content"><span style="color:#112b4a;">{{ $invoice->links }}</span>
                </td>
            </tr>
            <tr>
                <td>Detalles:</td><td class="invoice-content"><span style="color:#112b4a;">{{ $invoice->detalles }}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

        <br>    
        <br>


           
   
@endsection