/home/awneajlw/www/safeeyesjewelers.com/resources/views/admin/subAdmin/show.blade.php
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">

<head>
    <title>Invoice</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    @if ($sale->direction == 'horizontal')
    <style>
        .page {
            background: rgb(235, 234, 234);
            width: 1123px;
            height: 900px;
            margin: 0 auto;
            position: relative;
            border: 1px solid #000;
            font-family: 'DejaVu Sans', sans-serif;
        }
    </style>
    @else
    <style>
        .page {
            background: rgb(235, 234, 234);
            width: 794px;
            height: 1123px;
            margin: 0 auto;
            position: relative;
            border: 1px solid #000;
            font-family: 'DejaVu Sans', sans-serif;
        }
    </style>
    @endif

    <style>
        * {
            margin: 0;
            padding: 0;
            color: #000;
        }

        .header-left {
            position: absolute;
            top: 20px;
            left: 20px;
            text-align: left;
        }

        .header-right {
            position: absolute;
            top: 20px;
            right: 20px;
            text-align: right;
        }

        .logo {
            position: absolute;
            top: 10px;
            left: 43%;
            width: 100px;
            height: 100px;
        }

        .divider {
            position: absolute;
            top: 145px;
            left: 0;
            right: 0;
            border-bottom: 0.5px solid #b2b2b2;
        }

        .invoice-id {
            position: absolute;
            top: 122px;
            left: 48%;
            color: gray;
        }

        .invoice-title {
            position: absolute;
            top: 155px;
            left: 40%;
            color: gray;
        }

        .qr-code {
            position: absolute;
            top: 170px;
            left: 40px;
            width: 90px;
        }

        .details-left {
            position: absolute;
            top: 230px;
            left: 150px;
        }

        .details-right {
            position: absolute;
            top: 230px;
            right: 20px;
        }

        .draft-info {
            position: absolute;
            top: 300px;
            width: 100%;
            text-align: center;
        }

        .table-main {
            position: absolute;
            top: 335px;
            left: 30px;
            right: 30px;
            width: 94%;
            border: 2px solid black;
        }

        .table-main th, .table-main td {
            border: 1px solid #ddd;
            padding: 5px;
            text-align: center;
        }

        .table-main th {
            background-color: #a1a1a1;
            color: white;
        }

        .table-summary {
            position: absolute;
            bottom: 120px;
            left: 30px;
            width: 300px;
            border: 2px solid black;
        }

        .table-summary-english {
            position: absolute;
            bottom: 120px;
            right: 30px;
            width: 300px;
            border: 2px solid black;
            direction: rtl; /* Arabic / Right-to-Left */
        }

        .table-summary td, .table-summary th,
        .table-summary-english td, .table-summary-english th {
            border: 1px solid #ddd;
            padding: 5px;
        }

        .payment-ref {
            position: absolute;
            bottom: 105px;
            right: 20px;
        }

        .payment-ref-eng {
            position: absolute;
            bottom: 105px;
            left: 20px;
        }

        .footer-line {
            position: relative;
            height: 5px;
            background-color: #000;
            margin-top: 20px;
        }

        .translate {
            font-family: 'Amiri', serif !important;
            direction: rtl !important;
            text-align: right !important;
        }

        .details-line {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .arabic-text {
            direction: rtl;
            text-align: right;
            font-family: "Amiri", "Scheherazade", sans-serif;
        }

        .english-text {
            direction: ltr;
            text-align: left;
            font-family: Arial, sans-serif;
        }

        .text-center {
            text-align: center;
        }

        /* Footer Styles */
        .invoice-footer {
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 20px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 5px;
        }

        .invoice-footer p {
            margin: 5px 0;
        }
        .iban-text,.footer-text{
          color:#ffffff;  
        }
    </style>
</head>

<body bgcolor="white">
<div class="page">

    <!-- Header Left -->
    <div class="header-left">
        <h4 style="color: black;">Branch</h4>
        <h1 style="color: black; font-size: 22px;"><b>{{ @$userDetail->brand_name }}</b></h1>
        <h4 style="color: black;">{{ @$userDetail->brand_detail }}</h4>
    </div>

    <!-- Logo -->
    <div class="logo">
        <img src="{{ asset(@$userDetail->brand_logo) }}" alt="Not Found" height="100%">
    </div>

    <!-- Header Right -->
    <div class="header-right">
        <h4 style="color: black;" class="translate">Branch</h4>
        <h1 style="color: black; font-size: 22px;" class="translate"><b>{{ @$userDetail->brand_name }}</b></h1>
        <h4 style="color: black;" class="translate">{{ @$userDetail->brand_detail }}</h4>
    </div>

    <div class="divider"></div>

    <h4 class="invoice-id" style="color:black"><b>{{@$sale->id . @$sale->branch_id}}</b></h4>

    @if ($sale->language == 'arabic')
        <h4 class="invoice-title" style="color: black;">CASH INVOICE&nbsp;&nbsp;&nbsp;فاتورة نقدية</h4>
    @else
        <h4 class="invoice-title" style="color: black;">CASH INVOICE</h4>
    @endif

    <div class="qr-code">
        @if($sale->qr_ksa)
            <img src="{{ asset($sale->qr_ksa) }}" alt="KSA E-Invoice QR Code" width="100%">
        @else
            <img src="{{asset('@$sale->qr_ksa')}}" alt="Not Found" width="100%">
        @endif
    </div>

    <!-- Details Left -->
    <div class="details-left">
        @if ($sale->language == 'arabic')
            <p class="ft13 arabic-text">{{@$sale->id}} :الرقم</p>
            <p class="ft13 arabic-text">{{@$sale->created_at}} :تاريخ</p>
            <p class="ft13 arabic-text">
                <span class="label">البائع :</span>
                <span class="value">{{ @$sale->user->name }}</span>
            </p>
        @else
            <p class="ft13 arabic-text">Date: {{@$sale->created_at}}</p>
            <p class="ft13 arabic-text">The seller: {{@$sale->user->name}}</p>
        @endif
    </div>

    <!-- Details Right -->
    <div class="details-right">
        @if ($sale->language == 'arabic')
            <p class="ft13 arabic-text">{{@$sale->buyer_name}} :اسـم العميل</p>
            <p class="ft13 arabic-text">{{@$sale->id . @$sale->branch_id}}:رقم العميل</p>
        @else
            <p class="ft13 arabic-text">Customer name: {{@$sale->buyer_name}}</p>
            <p class="ft13 arabic-text">Customer number: {{@$sale->id . @$sale->branch_id}}</p>
        @endif
    </div>

    <p style="position: absolute; top:175px; right:20px;" class="ft13">{{ @$userDetail->company_ltd }}</p>

    @if ($sale->language == 'arabic')
        <p style="position: absolute; top:190px; right:20px;" class="ft13">VAT Number: {{ @$sale->vat_no }}</p>
    @else
        <p style="position: absolute; top:190px; right:20px;" class="ft13">{{ @$sale->vat_no }}:رقم ضريبة القيمة المضافة</p>
    @endif

    <!-- Draft Info -->
    <div class="draft-info">
        @if ($sale->language == 'arabic')
            <p class="ft25" style="position: absolute; left:40px;">مشروع الفاتورة</p>
            <p class="ft25" style="position: absolute; right:20px;">فاتورة مسودة</p>
        @else
            <p class="ft25" style="position: absolute; left:40px;">Draft Invoice</p>
            <p class="ft25" style="position: absolute; right:20px;">Draft invoice</p>
        @endif
        <p class="ft25" style="position: absolute; left:45%;"><b>INV/2024/{{@$sale->id }}</b></p>
    </div>

    <!-- Main Table -->
    @if ($sale->language == 'arabic')
        <table class="table-main">
            <tr>
                <th>السعر الاجمالي</th>
                <th>اسم</th>
                <th>قيمة الضريبة</th>
                <th>العدد</th>
                <th>ؤصف الصنف</th>
                <th>رقم الصنف</th>
                <th>م</th>
            </tr>
            @foreach ($sale->saleItems as $item)
                <tr>
                    <td>{{ @$item->price }}</td>
                    <td>{{ @$item->inventory->name }}</td>
                    <td>{{ $item->vat }}</td>
                    <td>{{ @$item->inventory->price }}</td>
                    <td>{{ @$item->quantity_sold }}</td>
                    <td>{{ @$item->inventory->description }}</td>
                    <td class="translate text-center">{{ $loop->iteration }}</td>
                </tr>
            @endforeach
        </table>
    @else
        <table class="table-main">
            <tr>
                <th>S.No</th>
                <th>DESCRIPTION</th>
                <th>TOTAL PRICE</th>
                <th>Name</th>
                <th>VAT AMOUNT</th>
                <th>UNIT PRICE</th>
                <th>QUANTITY</th>
            </tr>
            @foreach ($sale->saleItems as $item)
                <tr>
                    <td class="translate text-center">{{ $loop->iteration }}</td>
                    <td>{{ @$item->inventory->description }}</td>
                    <td>{{ @$item->price }}</td>
                    <td>{{ @$item->inventory->name }}</td>
                    <td>{{ $item->vat }}</td>
                    <td>{{ @$item->inventory->price }}</td>
                    <td>{{ @$item->quantity_sold }}</td>
                </tr>
            @endforeach
        </table>
    @endif

    @php
        $subtotal   = $sale->price; 
        $gst        = $subtotal * 0.15; 
        $grandTotal = $subtotal + $gst; 
        $balance    = $grandTotal - $sale->total_price;
    @endphp

    <!-- Summary Tables -->
    @if ($sale->language == 'arabic')
        <table class="table-summary" style="text-align: right;">
            <tr>
                <td>{{ number_format($subtotal, 2) }}</td>
                <th>الإجمالي الفرعي</th>
            </tr>
            <tr>
                <td>{{ number_format($gst, 2) }}</td>
                <th>ضريبة القيمة المضافة (15%)</th>
            </tr>
            <tr>
                <td>{{ number_format($grandTotal, 2) }}</td>
                <th>المجموع الكلي</th>
            </tr>
            <tr>
                <td>{{ number_format($balance, 2) }}</td>
                <th>الرصيد</th>
            </tr>
        </table>
    @else
        <table class="table-summary-english" style="text-align: left;">
            <tr>
                <td>{{ number_format($subtotal, 2) }}</td>
                <th>Subtotal</th>
            </tr>
            <tr>
                <td>{{ number_format($gst, 2) }}</td>
                <th>VAT (15%)</th>
            </tr>
            <tr>
                <td>{{ number_format($grandTotal, 2) }}</td>
                <th>Total</th>
            </tr>
            <tr>
                <td>{{ number_format($balance, 2) }}</td>
                <th>Balance</th>
            </tr>
        </table>
    @endif

    <!-- Payment Reference -->
    @if ($sale->language == 'arabic')
        <p class="payment-ref ft12 arabic-line">
            <span class="value">{{ @$userDetail->payment_reference }}</span>
            <span class="label">: رقم إشارة الدفعة</span>
        </p>
    @else
        <p class="payment-ref-eng ft12">Payment Reference : {{ @$userDetail->payment_reference }}INV</p>
    @endif

    <!-- Footer Section -->
    <div class="invoice-footer">
        <p class="footer-text ft15">{{ @$userDetail->footer_no_email }}</p>

        @if ($sale->language == 'arabic')
            <p class="iban-text ft15">{{ @$userDetail->footer_iban }} رقم الحساب المصرفي الدولي لبنك الرياض:</p>
        @else
            <p class="iban-text ft15">Riyadh Bank IBAN: {{ @$userDetail->footer_iban }}</p>
        @endif
    </div>
</div>

<script>
$(".translate").each(function () {
  let el = $(this);
  let text = el.text();

  $.ajax({
    url: "https://api.mymemory.translated.net/get",
    data: { q: text, langpair: "en|ar" },
    success: function (res) {
      el.text(res.responseData.translatedText);
    }
  });
});
</script>

</body>
</html>