@php
    $logo_1 = ltrim($images->gatepass_logo1 ?? '', '/');
    $logo_2 = ltrim($images->gatepass_logo2 ?? '', '/');
@endphp

<!DOCTYPE html>
<html lang="gu">
<head>
    <meta charset="UTF-8">
    <title>વેચાણ ખત એન્ડ ડીલીવરી નોટ</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: 'Noto Sans Gujarati', sans-serif;
            display: flex;
            justify-content: center;
            padding: 20px;
            flex-direction: column;
            align-items: center;
        }

        .page {
            background: white;
            width: 794px; /* A4 width */
            min-height: 1123px; /* A4 height */
            padding: 40px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            box-sizing: border-box;
        }

        .kia-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .gp_logo {
            height: 60px;
        }

        .shivam-kia-heading {
            flex-grow: 1;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }

        .center-title {
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            margin: 20px 0;
        }

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

        td {
            padding: 6px;
            vertical-align: top;
            font-size: 16px;
        }

        .label {
            font-weight: bold;
            width: 200px;
        }

        .signature-section {
            margin-top: 40px;
        }

        .print-button {
            margin-top: -43px;
            padding: 7px 20px;
            font-size: 16px;
            background-color: #6f7b91;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
        }
        .print-button:hover {
            background-color: #0056b3;
        }

        @media print {
            body {
                background: none;
                padding: 0;
                display: block;
            }

            .page {
                box-shadow: none;
                margin: 0;
            }
            .print-button {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
  
        <div style="display: flex; flex-direction: column; align-items: center;">
            <img class="gp_logo" 
                 src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $logo_1) }}" 
                 alt="Left Logo" 
                 style="height: 80px; width: 170px;">
            <span style="font-size: 15px; font-weight: normal; margin-top: 5px;">
              Movement that inspires
            </span>
        </div>
          
        <div style="text-align: center;">
            <div style="font-weight: bold; font-size: 20px;text-decoration: underline;">SHIVAM KIA</div>
            <div style="font-weight: normal; font-size: 16px;">{{ $branch->name ?? '' }}</div>
        </div>
          
        <img class="gp_logo" 
               src="{{ asset('uploads/global_configuration/gatepass_logo_two/' . $logo_2) }}" 
               alt="Right Logo" 
               style="height: 100px; width: 150px;">
        </div>
        <p class="center-title" style="font-size: 14px;">
            {{ $branch->address ?? '' }}
        ___________________________________________________________________________________________
        </p>
        <div style="text-align: center; margin-top: 30px;">
          <h2 style="background-color: black; color: white; padding: 5px 10px; display: inline-block;">
            વેચાણ ખત એન્ડ ડીલીવરી નોટ
          </h2>
        </div>

        <p>વેચાણ લેનાર શ્રી : {{ $exchange_seller_data->customer_name ?? ''}} </p>
        <p>સરનામું : {{ $exchange_seller_data->address }}
        <p>ફોન નં :  {{ $exchange_seller_data->contact_no ?? '____________________' }}</p>
        <p>વેચાણ આપનાર શ્રી : {{ $branch->name ?? '____________________' }}</p>
        <p>સરનામું :  {{ $branch->address ?? '____________________' }} </p> 
        <p>વાહન નંબર: {{ $data->registration_number ?? '__________________' }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  મેઈક નંબર: _______________________________</p>
        <p>મોડલ : {{ $data->company_name }} - {{ $data->variant }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; વાહનની કિંમત : {{ $exchange_cash_data->amount ?? ''}}</p>
        <p>વાહનની કિંમત (શબ્દોમા) : {{ $data->amount_in_words ?? '' }} છે.</p>
        <p>સમય :  {{ $data->time }}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;તારીખ : {{ $data->date }}</p>
        <p>રીમાર્ક : {{ $exchange_seller_data->remark }}</p>
        <br>

        <div style="margin-top: 30px; font-size: 16px;">
            <p>
            આથી આજરોજ શ્રી વેચાણ લેનાર ને સદરહું વાહનની ડીલીવરી મારીને રાજીખુશીથી અને હોશહવસ અને સંપૂર્ણ સભાન અવસ્થામાં શ્રી વેચાણ લેનારને તમામ કાયદા તથા પોલીસ કેસ, આર. ટી. ઓ. વીમો (ઇનશ્યુરન્સ) ગુડ્સટેક્સ, એક્સિલેરીટેડ ટેક્ષ, એન.ઓ.સી., ડી.એ. કેસ તથા વાહન ઉપરના સરકારી કે અર્ધ સરકારી કેસ અંગેની તમામ જવાબદારીઓ તારીખ ______________________________ પહેલાની શ્રી વેચાણ આપનારની અને પછીની વેચાણ લેનારની તમામ જવાબદારી રહેશે..
            </p>
        </div>

        <div class="signature-section">
           સાક્ષીની સહી : <br><br>

            (૧)_____________________________ વેચાણ લેનાર____________________________<br><br>
            (૨)_____________________________ વેચાણ આપનાર__________________________
        </div>
    </div>
    <button class="print-button" onclick="window.print()">Print</button>
</body>
</html>
