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

@section('title', __('messages.estimate_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">ESTIMADO DE COMPRA</li>
                </ol>
            </nav>
            <h1 class="m-0">ESTIMADO DE COMPRA</h1>
        </div>
    </div>
@endsection
 
@section('content') 
            @if($estimate->status == 'DRAFT')
                <div class="alert alert-soft-dark d-flex align-items-center" role="alert">
                    <i class="material-icons mr-3">access_time</i>
                    <div class="text-body"><strong>Estatus : </strong> {{ $estimate->estatus }}</div>
                </div>
                 
            @elseif($estimate->status == 'ACCEPTED')
                <div class="alert alert-soft-success d-flex align-items-center" role="alert">
                    <i class="material-icons mr-3">done</i>
                    <div class="text-body"><strong>Estatus : </strong> {{ $estimate->estatus }}</div>
                </div>
                 @elseif($estimate->status == 'SENT')
                <div class="alert alert-soft-dark d-flex align-items-center" role="alert">
                    <i class="material-icons mr-3">access_time</i>
                    <div class="text-body"><strong>Estatus : </strong> {{ $estimate->estatus }}</div>
                </div>
            @elseif($estimate->status == 'REJECTED')
                <div class="alert alert-soft-danger d-flex align-items-center" role="alert">
                    <i class="material-icons mr-3">cancel</i>
                    <div class="text-body"><strong>Estatus : </strong> {{ $estimate->estatus }}</div>
                </div>
                   @elseif($estimate->status == 'PRIMER RECORDATORIO')
                <div class="alert alert-soft-warning d-flex align-items-center" role="alert">
                    <i class="material-icons mr-3">schedule</i>
                    <div class="text-body"><strong>Estatus : </strong> {{ $estimate->status }} {{ $estimate->record_uno }}</div>
                </div>
                    @elseif($estimate->status == 'SEGUNDO RECORDATORIO')
                <div class="alert alert-soft-danger d-flex align-items-center" role="alert">
                    <i class="material-icons mr-3">schedule</i>
                    <div class="text-body"><strong>Estatus : </strong> {{ $estimate->status }} {{ $estimate->record_dos }}</div>
                </div>
            @endif
 
    <div class="row">
        
        <div class="col-12 col-md">
            <p class="h2 pb-4">
                #COT{{ $estimate->id }} - {{ $estimate->sucursal2 }}
            </p>
             
       
        </div></div>
<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.estimate', $estimate->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>
    .estimate-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;
    }

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

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

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

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

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

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

    .estimate-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;
        
    }

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

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

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

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

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

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

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

            <tr>
                <td>Productos:</td><td class="estimate-content"><span style="color:#112b4a;">{{$estimate->productos}}</span>
                </td>
            </tr>
            <tr>
                <td>Link de Producto:</td><td class="estimate-content"><span style="color:#112b4a;">{{$estimate->links}}</span>
                </td>
            </tr>
            <tr>
                <td>Detalles:</td><td class="estimate-content"><span style="color:#112b4a;">{{$estimate->detalles}}</span>
                </td>
            </tr>
        </tbody>
    </table>
                                    @if(($estimate->estatus) ==="COTIZADO" && ($estimate->customer->email))

    <h1 style="text-align: center;"><span style="font-family: &quot;Open Sans&quot;, monospace; font-size: 32px;">¿CONFIRMA EL PEDIDO?</span></h1>

            <p style="text-align: center;"><a href="https://dashboard.boxshoplogistics.com/pagos/cot/{{ $estimate->uid }}" target="_blank"><img alt="" src="https://dashboard.boxshoplogistics.com/brand.png" style="width: 207px; height: 56px;" /></a></p>
@endif
</div>

        <br>    
        <br>
@endsection