<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Invoice</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
```css
/*=====================================================
                GOOGLE FONT
=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;

    background:#eceff1;

    color:#333;

}

.urdu{

    font-family:'Noto Nastaliq Urdu', serif;

    direction:rtl;

    text-align:right;

    font-size:14px;

    line-height:1.8;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.invoice-table td{

    vertical-align:middle;

}

.invoice-table .urdu{

    font-size:14px;

    line-height:1.6;

}


.summary-table{

    width:100%;

    font-size:14px;

}

.summary-table th{

    width:60%;

    background:#f8f9fa;

    font-weight:600;

}

.summary-table td{

    width:40%;

    text-align:left;

    font-weight:bold;

}

.summary-table .urdu{

    font-family:'Noto Nastaliq Urdu', serif;

    font-size:14px;

    line-height:1.6;

}

.table-success th{

    background:#0B1F59 !important;

    color:white !important;

}

.table-danger th,
.table-danger td{

    background:#fff4f4 !important;

}

@media print{

.summary-table{

font-size:14px;

}

.summary-table .urdu{

font-size:14px;

}

}

.balance-row td{

    color:#d90429;

    font-size:14px;

    font-weight:bold;

}

.balance-row th{

    color:#d90429;

}

.invoice-info .urdu{

    font-size:14px;

    line-height:1.7;

}

/*=====================================================
                    A4 PAGE
=====================================================*/

.invoice{

    width:210mm;
    min-height:297mm;

    margin:20px auto;

    background:#fff;

    padding:30px;

    position:relative;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}


/*=====================================================
                    HEADER
=====================================================*/

.header{

    position:relative;

    z-index:10;

    border-bottom:3px solid #0B1F59;

    padding-bottom:20px;

    margin-bottom:25px;

}

.company-name{

    color:#0B1F59;

    font-size:34px;

    font-weight:700;

    letter-spacing:1px;

}

.company-tag{

    color:#666;

    font-size:15px;

}





/*=====================================================
                    PRINT
=====================================================*/

@page{

    size:A4;

    margin:10mm;

}

.no-print{

    margin-top:30px;

}

@media print{

    html,body{

        background:white;

    }

    .invoice{

        width:100%;

        min-height:auto;

        margin:0;

        padding:0;

        box-shadow:none;

        border:none;

    }

    .no-print{

        display:none !important;

    }

    .card{

        box-shadow:none;

    }

    .card{

    border:none;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

}

.card-header{

    font-weight:600;

}

    .table{

        page-break-inside:auto;

    }

    .table thead{

    background:#198754;

    color:white;

}

    tr{

        page-break-inside:avoid;

    }

    thead{

        display:table-header-group;

    }

    tfoot{

        display:table-footer-group;

    }

}

/*=====================================================
                STATUS BADGES
=====================================================*/

/*=====================================================
            GRAND TOTAL HIGHLIGHT
=====================================================*/




</style>

</head>

<body>

<div class="invoice">

<!-- ===================================
Header
=================================== -->

  <div class="border-bottom pb-3 mb-4">

    <div class="row align-items-center">

        <!-- Logo -->
        <div class="col-2">

            <img src="{{ asset('/storage/assets/images/logo.png') }}"
                 alt="Logo"
                 style="width:120px;">

        </div>

        <!-- Company -->
        <div class="col-6">

            <h2 class="mb-1 fw-bold" style="color:#0B1F59; font-size:28px;">
                ALI FOODS
            </h2>

            <div class="text-muted" style="font-size:14px;">
                Catering & Tent Service
                Electric Decoration
            </div>

            <small class="text-secondary">
                   Abbas Ahmed&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|  Gulzar Ahmed  <br>
                 📞 0300-9561002  |📞<i class="bi bi-whatsapp text-success"></i> 0308-1919190 <br>
                 📞 0322-8501395  |✉ info@alifoods.pk
                
                
            </small>
            

        </div>

        <div class="col-2">
             <img src="{{ asset('/storage/assets/images/dag.png') }}"
                 alt="Logo"
                 style="width:70px;">
        </div>

        <!-- Invoice -->
        <div class="col-2 text-end">

            <h4 class="fw-bold mb-1" style="color:#0B1F59;">
                INVOICE
            </h4>

            <small class="text-muted">
                {{ date('d M, Y') }}
            </small>

        </div>

    </div>

  </div>

<!-- ===================================
Customer + Event
=================================== -->

<div class="card border-0 mb-3">

<div class="card-body p-0">

<table class="table table-bordered invoice-info mb-0">

<tr class="table-light">

<td colspan="4" class="fw-bold urdu">

کسٹمر اور ڈیلیوری کی معلومات

</td>

</tr>

<tr>

<th class="urdu">

تاریخ

</th>

<td>

{{ date('d-M-Y',strtotime($order->order_date)) }}

</td>

<th class="urdu">

وقت

</th>

<td>

{{ date('h:i A',strtotime($order->order_date)) }}

</td>

</tr>

<tr>

<th class="urdu">

گاہک

</th>

<td class="urdu">

{{ $order->Customer->urdu_name ?: $order->Customer->name }}

</td>

<th class="urdu">

موبائل

</th>

<td>

{{ $order->Customer->phone }}

</td>

</tr>

<tr>

<th class="urdu">

دوسرا نمبر

</th>

<td>

{{ $order->Customer->phone2 ?? '-' }}

</td>

<th class="urdu">

ادائیگی

</th>

<td class="urdu">

{{ $order->payment_status }}

</td>

</tr>

<tr>

<th class="urdu">

پتہ

</th>

<td colspan="3" class="urdu">

{{ $order->Customer->urdu_address ?: $order->Customer->address }}

</td>

</tr>

</table>

</div>

</div>

<!-- ===================================
Items Table
=================================== -->

<div class="mt-3">

    <table class="table table-bordered table-sm invoice-table mb-0">

        <thead class="invoice-header">

           <tr class="table-success">
           
               <th width="50">نمبر</th>
           
               <th class="urdu">سامان کی تفصیل</th>
           
               <th width="70" class="text-center urdu">تعداد</th>
           
               
           
               <th width="110" class="text-end urdu">ریٹ</th>
           
               <th width="110" class="text-end urdu">رعایت</th>
           
               <th width="130" class="text-end urdu">کل رقم</th>
           
           </tr>
           
        </thead>

        <tbody>

            @foreach($order->details as $item)

                <tr>
                
                    <td class="text-center">
                
                        {{ $loop->iteration }}
                
                    </td>
                
                    <td class="urdu">
                
                        <strong>
                
                            {{ $item->Product->name_urdu ?? $item->Product->name }}
                                @if($item->product->category==2)
                                <small>({{$item->days}} یوم)</small>
                                @endif
                
                        </strong>
                
                        @if($item->description)
                
                            <br>
                
                            <small>
                
                                {{ $item->description }}
                
                            </small>
                
                        @endif
                
                    </td>
                
                    <td class="text-center">
                
                        {{ $item->qty }}
                
                    </td>
                
                    
                
                    <td class="text-end">
                
                        {{ number_format($item->price,2) }}
                
                    </td>
                
                    <td class="text-end">
                
                        @if($item->product->category==2)
                
                            {{ number_format(($item->discount/$item->days)/$item->qty,2) }}
                
                        @else
                
                            {{ number_format($item->discount/$item->qty,2) }}
                
                        @endif
                
                    </td>
                
                    <td class="text-end fw-bold">
                
                        {{ number_format($item->total,2) }}
                
                    </td>
                
                </tr>
                
            @endforeach

        </tbody>

    </table>

</div>

<!-- =========================
Summary Section
========================== -->
<div class="row mt-4">

    <!-- Charges -->
    <div class="col-6">

        <table class="table table-bordered table-sm summary-table mb-0">

            <tr class="table-light">

                <th colspan="2" class="text-center urdu">

                    اخراجات کی تفصیل

                </th>

            </tr>

            <tr>

                <th class="urdu">

                    ذیلی رقم

                </th>

                <td>

                    {{ number_format($order->subtotal,2) }}

                </td>

            </tr>

            <tr>

                <th class="urdu">

                    کرایہ آمدرفت

                </th>

                <td>

                    {{ number_format($order->carriage,2) }}

                </td>

            </tr>

        </table>

        @if(optional($order->Deleveryboy)->name)

            <div class="mt-3 urdu">

                <strong>

                    ڈیلیوری کرنے والا:

                </strong>

                {{ optional($order->Deleveryboy)->name }}

            </div>

        @endif

    </div>

    <!-- Payment -->
    <div class="col-6">

        <table class="table table-bordered table-sm summary-table mb-0">

            <tr class="table-success">

                <th colspan="2" class="text-center text-white urdu">

                    ادائیگی کی تفصیل

                </th>

            </tr>

            <tr>

                <th class="urdu">

                    کل رقم

                </th>

                <td>

                    {{ number_format($order->grand_total,2) }}

                </td>

            </tr>

            <tr>

                <th class="urdu">

                   ایڈوانس

                </th>

                <td class="text-primary">

                    {{ number_format($order->paid_amount,2) }}

                </td>

            </tr>

            <tr class="table-danger balance-row">

                <th class="urdu">

                    بقایا رقم

                </th>

                <td class="fw-bold text-danger">

                    {{ number_format($order->grand_total-$order->paid_amount,2) }}

                </td>

            </tr>

        </table>

    </div>

</div>


<!-- ===================================
Terms
=================================== -->





<!-- ===================================
Footer
=================================== -->



<!-- Print Button -->

<div class="text-center mt-4 no-print">

    <button onclick="window.print()"

            class="btn btn-success btn-lg">

        <i class="las la-print"></i>

        Print Invoice

    </button>

</div>

</div>

</body>

</html>


