<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cancellation Invoice - <%= invoiceNo %></title>
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #f5f5f5;
      color: #1a1a1a;
      line-height: 1.3;
      padding: 6px;
      margin: 0;
      font-size: 11px;
    }

    .invoice-container {
      max-width: 480px;
      margin: 0 auto;
      background: white;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Header */
    .invoice-header {
      background: white;
      padding: 7px 12px;
      border-bottom: 1px solid #e5e5e5;
      width: 100%;
      overflow: hidden;
    }

    .header-left {
      float: left;
    }

    .company-logo {
      height: 26px;
      width: auto;
      float: left;
      margin-right: 8px;
    }

    .header-title {
      float: left;
      font-size: 12px;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 26px;
    }

    .header-right {
      float: right;
    }

    /* Sub Header */
    .sub-header {
      padding: 4px 12px;
      background: #fef2f2;
      font-size: 11px;
      overflow: hidden;
    }

    .sub-header-left {
      float: left;
    }

    .sub-header-right {
      float: right;
    }

    .total-label {
      color: #991b1b;
      margin-right: 5px;
      font-weight: 600;
    }

    .total-amount {
      font-weight: 600;
      color: #dc2626;
    }

    .trip-date {
      color: #666;
      white-space: nowrap;
    }

    /* Cancellation Notice */
    .cancellation-notice {
      text-align: center;
      background-image: url('<%= ADMIN_URL %>invoicebg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      min-height: 80px;
      width: 100%;
    }

    .cancellation-overlay {
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.15)
      );
      min-height: 80px;
      display: table;
      width: 100%;
    }

    .cancellation-content {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: 6px;
    }

    .cancellation-title {
      font-size: 13px;
      font-weight: 700;
      color: #dc2626;
      line-height: 1.2;
      max-width: 400px;
      margin: 0 auto;
    }

    .cancellation-subtitle {
      font-size: 10px;
      color: #991b1b;
      margin-top: 2px;
    }

    /* Total Display */
    .total-display {
      padding: 6px 12px;
      background: white;
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      overflow: hidden;
    }

    .total-text {
      float: left;
      font-size: 14px;
      font-weight: 700;
      color: #dc2626;
    }

    .total-value {
      float: right;
      font-size: 16px;
      font-weight: 700;
      color: #dc2626;
    }

    /* Fare Breakdown */
    .fare-breakdown {
      padding: 5px 12px;
      background: white;
    }

    .section-title {
      font-size: 11px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 3px;
    }

    .fare-item {
      padding: 3px 0;
      border-bottom: 1px solid #f5f5f5;
      overflow: hidden;
    }

    .fare-item:last-child {
      border-bottom: none;
    }

    .fare-label {
      float: left;
      font-size: 11px;
      color: #666;
    }

    .fare-value {
      float: right;
      font-size: 11px;
      font-weight: 500;
      color: #1a1a1a;
    }

    /* Driver Details */
    .driver-details {
      padding: 5px 12px;
      background: white;
      border-top: 3px solid #f5f5f5;
    }

    .driver-info {
      margin-top: 4px;
      overflow: hidden;
    }

    .driver-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f5f5f5;
      float: left;
      margin-right: 8px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }

    .driver-avatar img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }

    .driver-text {
      float: left;
      width: calc(100% - 40px);
    }

    .driver-name {
      font-size: 11px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 1px;
    }

    .driver-meta {
      font-size: 10px;
      color: #666;
    }

    .driver-phone {
      font-size: 10px;
      color: #3b82f6;
      margin-top: 1px;
    }

    /* Trip Details */
    .trip-details {
      padding: 5px 12px;
      background: white;
      border-top: 3px solid #f5f5f5;
    }

    .detail-row {
      padding: 3px 0;
      border-bottom: 1px solid #f5f5f5;
      overflow: hidden;
    }

    .detail-row:last-child {
      border-bottom: none;
    }

    .detail-label {
      float: left;
      font-size: 11px;
      color: #666;
      font-weight: 500;
      width: 90px;
    }

    .detail-value {
      float: right;
      font-size: 11px;
      color: #1a1a1a;
      text-align: right;
      width: calc(100% - 98px);
      word-wrap: break-word;
      line-height: 1.2;
    }

    .detail-value.cancelled {
      color: #dc2626;
      font-weight: 600;
    }

    /* Clear floats */
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }

    /* Print Styles */
    @media print {
      body {
        background: white;
        padding: 0;
        margin: 0;
      }

      .invoice-container {
        max-width: 100%;
        box-shadow: none;
        page-break-inside: avoid;
      }

      @page {
        size: A4;
        margin: 6mm;
      }

      .fare-breakdown,
      .driver-details,
      .trip-details {
        padding: 3px 10px;
      }

      .section-title { margin-bottom: 2px; }
      .fare-item, .detail-row { padding: 2px 0; }
    }

    /* Responsive */
    @media (min-width: 768px) {
      .invoice-container {
        max-width: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="invoice-container" id="invoiceContent">
    <!-- Header -->
    <div class="invoice-header clearfix">
      <div class="header-left">
        <img src="<%= ADMIN_URL %>logo.png" alt="<%= ADMIN_NAME || 'Company' %> Logo" class="company-logo" onerror="this.style.display='none'">
      </div>
      <div class="header-right">
      </div>
    </div>

    <!-- Sub Header -->
    <div class="sub-header clearfix">
      <div class="sub-header-left">
        <span class="total-label">Cancellation Fee</span>
        <span class="total-amount"><%= invoice?.trip_currency || '$' %><%= invoice?.trip_pay_amount || '0.00' %></span>
      </div>
      <div class="sub-header-right">
        <span class="trip-date">
          <% 
            const tzOffsetMs = (typeof tzOffset !== 'undefined' ? parseFloat(tzOffset) : 0) * 3600000;
            const tripDateRaw = new Date(invoice.trip_date);
            const tripDateLocal = new Date(tripDateRaw.getTime() + tzOffsetMs);
            const dateOptions = { weekday: 'short', day: '2-digit', month: 'short', year: 'numeric' };
            const formattedDate = tripDateLocal.toLocaleDateString('en-US', dateOptions);
          %>
          <%= formattedDate %>
          <% 
            let hrs = tripDateLocal.getHours();
            const mins = String(tripDateLocal.getMinutes()).padStart(2, '0');
            const ampm = hrs >= 12 ? 'PM' : 'AM';
            hrs = hrs % 12 || 12;
          %>
          <%= hrs %>:<%= mins %> <%= ampm %>
        </span>
      </div>
    </div>

    <!-- Cancellation Notice -->
    <div class="cancellation-notice">
      <div class="cancellation-overlay">
        <div class="cancellation-content">
          <h1 class="cancellation-title">
            Trip Cancelled by 
            <% if (invoice?.cancelled_by === 'Driver' || invoice?.cancelled_by === 'driver') { %>
              <%= invoice?.driver?.d_name || 'Driver' %>
            <% } else if (invoice?.cancelled_by === 'Rider' || invoice?.cancelled_by === 'rider' || invoice?.cancelled_by === 'user') { %>
              <%= invoice?.user?.u_name || invoice?.user?.u_fname || 'Rider' %>
            <% } else { %>
              <%= invoice?.cancelled_by || 'Driver' %>
            <% } %>
          </h1>
          <p class="cancellation-subtitle">Cancellation charges apply</p>
        </div>
      </div>
    </div>

    <!-- Total Display -->
    <div class="total-display clearfix">
      <div class="total-text">Cancellation Fee</div>
      <div class="total-value"><%= invoice?.trip_currency || '$' %><%= invoice?.trip_pay_amount || '0.00' %></div>
    </div>

    <!-- Fare Breakdown -->
    <div class="fare-breakdown">
      <div class="section-title">Cancellation Charges</div>

      <%
        const _cancelledBy = invoice?.cancelled_by || '';
        const _isDriverCancel = ['Driver','driver'].includes(_cancelledBy);
        const _cancellerLabel = _isDriverCancel ? 'Driver' : 'Rider';
        const _currency = invoice?.trip_currency || '$';
        const _baseFee = typeof baseCancelFee !== 'undefined' ? baseCancelFee : 0;
        const _feeType = typeof baseCancelFeeType !== 'undefined' ? baseCancelFeeType : 'F';
        const _feeLabel = typeof baseCancelFeeLabel !== 'undefined' ? baseCancelFeeLabel : 'Fixed';
      %>

      <div class="fare-item clearfix">
        <div class="fare-label">Cancelled By</div>
        <div class="fare-value"><%= _cancellerLabel %></div>
      </div>

      <div class="fare-item clearfix">
        <div class="fare-label">Base Cancel Fee (<%= _feeLabel %>)</div>
        <div class="fare-value">
          <% if (_feeType === 'P') { %>
            <%= _baseFee %>%
          <% } else { %>
            <%= _currency %><%= Number(_baseFee).toFixed(2) %>
          <% } %>
        </div>
      </div>

      <% if (_feeType === 'P') { %>
      <div class="fare-item clearfix">
        <div class="fare-label">Computed Fee (<%= _baseFee %>% of base fare)</div>
        <div class="fare-value"><%= _currency %><%= Number(cancellationFee).toFixed(2) %></div>
      </div>
      <% } %>

      <div class="fare-item clearfix">
        <div class="fare-label">Tax</div>
        <div class="fare-value"><%= _currency %><%= invoice?.tax_amt || '0.00' %></div>
      </div>

      <div class="fare-item clearfix">
        <div class="fare-label">Total Cancellation Fee</div>
        <div class="fare-value"><%= _currency %><%= invoice?.trip_pay_amount || '0.00' %></div>
      </div>
    </div>

    <!-- Driver Details -->
    <div class="driver-details">
      <div class="section-title">Driver Details</div>
      <div class="driver-info clearfix">
        <div class="driver-avatar">
          <% if (invoice?.driver?.d_photo) { %>
            <img src="<%= invoice.driver.d_photo %>" alt="Driver">
          <% } else { %>
            <%= (invoice?.driver?.d_name || 'D').charAt(0) %>
          <% } %>
        </div>
        <div class="driver-text">
          <div class="driver-name"><%= invoice?.driver?.d_name || 'N/A' %></div>
          <div class="driver-meta"><%= invoice?.cat_name || 'N/A' %> • <%= invoice?.driver?.car?.car_reg_no || 'N/A' %></div>
          <div class="driver-phone"><% if (invoice?.driver?.c_code) { %>+<%= invoice.driver.c_code %> <% } %><%= invoice?.driver?.d_phone || '' %></div>
        </div>
      </div>
    </div>

    <!-- Trip Details -->
    <div class="trip-details">
      <div class="section-title">Trip Details</div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Trip Date</div>
        <div class="detail-value">
          <%
            const _tzMs = (typeof tzOffset !== 'undefined' ? parseFloat(tzOffset) : 0) * 3600000;
            const _raw = new Date(invoice.trip_date);
            const _local = new Date(_raw.getTime() + _tzMs);
            const _opts = { day: '2-digit', month: 'short', year: 'numeric' };
            let _h = _local.getHours();
            const _m = String(_local.getMinutes()).padStart(2, '0');
            const _ap = _h >= 12 ? 'PM' : 'AM';
            _h = _h % 12 || 12;
          %>
          <%= _local.toLocaleDateString('en-US', _opts) %> <%= _h %>:<%= _m %> <%= _ap %>
        </div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Status</div>
        <div class="detail-value cancelled">CANCELLED</div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Cancelled By</div>
        <div class="detail-value">
          <% if (invoice?.cancelled_by === 'Driver' || invoice?.cancelled_by === 'driver') { %>
            <%= invoice?.driver?.d_name || 'Driver' %>
          <% } else if (invoice?.cancelled_by === 'Rider' || invoice?.cancelled_by === 'rider' || invoice?.cancelled_by === 'user') { %>
            <%= invoice?.user?.u_name || invoice?.user?.u_fname || 'Rider' %>
          <% } else { %>
            <%= invoice?.cancelled_by || 'N/A' %>
          <% } %>
        </div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Pickup</div>
        <div class="detail-value"><%= invoice?.trip_from_loc || invoice?.actual_from_loc || 'N/A' %></div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Drop-off</div>
        <div class="detail-value"><%= invoice?.trip_to_loc || invoice?.actual_to_loc || 'N/A' %></div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Driver</div>
        <div class="detail-value"><%= invoice?.driver?.d_name || 'N/A' %></div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Vehicle</div>
        <div class="detail-value"><%= invoice?.cat_name || 'N/A' %> (<%= invoice?.driver?.car?.car_reg_no || 'N/A' %>)</div>
      </div>
      
      <div class="detail-row clearfix">
        <div class="detail-label">Invoice No</div>
        <div class="detail-value"><%= invoiceNo || 'N/A' %></div>
      </div>
    </div>
  </div>
</body>
</html>
