<!DOCTYPE html>
<html lang="en">
<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;800&display=swap');

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

body{

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

    background:#eceff1;

    color:#333;

}

/*=====================================================
                    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);

}

/*=====================================================
                  WATERMARK
=====================================================*/

.invoice::before{

    content:"";

    position:absolute;

    inset:0;

    background:url('{{ asset("logo.png") }}') center center no-repeat;

    background-size:320px;

    opacity:.04;

    pointer-events:none;

}

/*=====================================================
                    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;

}

/*=====================================================
                GREEN INVOICE BOX
=====================================================*/

.invoice-box{
background:linear-gradient(135deg,#0B1F59,#1A3A8A);
    

    color:white;

    padding:20px;

    border-radius:10px;

}

.invoice-box table{

    color:white;

}

/*=====================================================
                 INFORMATION CARDS
=====================================================*/

.info-card{

    border:none;

    border-left:5px solid #0B1F59;

    border-radius:8px;

    background:#fafafa;

    padding:20px;

    height:100%;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.info-title{

    color:#0B1F59;

    font-weight:700;

    margin-bottom:15px;

}

/*=====================================================
                    TABLE
=====================================================*/

.table{

    position:relative;

    z-index:10;

}

.table thead{

    background:#198754;

    color:white;

}

.table th{

    padding:12px;

    vertical-align:middle;

}

.table td{

    padding:10px;

}

.table tbody tr:nth-child(even){

    background:#fafafa;

}

.table-bordered{

    border:1px solid #ddd;

}

/*=====================================================
                  TOTAL BOX
=====================================================*/

.table-success{

    background:#0B1F59 !important;

    color:white;

}

.table-danger{

    background:#fff2f2 !important;

    color:#c1121f;

}

.table-danger th{

    font-size:18px;

}

.table-success th{

    font-size:18px;

}

/*=====================================================
                  CARD
=====================================================*/

.card{

    border:none;

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

}

.card-header{

    font-weight:600;

}

/*=====================================================
                  SIGNATURE
=====================================================*/

.signature{

    margin-top:70px;

}

.signature hr{

    border-top:2px solid #000;

}

/*=====================================================
                  FOOTER
=====================================================*/

.footer{

    margin-top:60px;

    text-align:center;

    color:#666;

}

.footer h4{

    color:#0B1F59;

}

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

.no-print{

    margin-top:30px;

}

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

@page{

    size:A4;

    margin:10mm;

}

@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;

    }

    .table{

        page-break-inside:auto;

    }

    tr{

        page-break-inside:avoid;

    }

    thead{

        display:table-header-group;

    }

    tfoot{

        display:table-footer-group;

    }

}

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

.badge{

    font-size:13px;

    padding:7px 14px;

    border-radius:20px;

}

/*=====================================================
                QR CODE
=====================================================*/

.qr{

    text-align:center;

}

.qr img{

    width:90px;

}

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

.grand-total{

    background:#198754;

    color:white;

    font-size:22px;

    font-weight:700;

}

.balance{

    color:#dc3545;

    font-size:20px;

    font-weight:700;

}
```
.totals-table{
    width:350px !important;
    float:right;
    margin-top:15px;
}

.totals-table th:first-child{
    width:60%;
}

.totals-table td,
.totals-table th:last-child{
    width:40%;
    text-align:right;
}

@media print{

    .totals-table{
        width:350px !important;
        float:right !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }

}

.invoice-info{
    font-size:15px;
}

.invoice-info th,
.invoice-info td{
    padding:6px 10px !important;
    vertical-align:middle;
}

.invoice-info th{
    width:120px;
    background:#f8f9fa;
    font-weight:600;
}

.invoice-info strong{
    font-size:14px;
}

@media print{

    .invoice-info{
        font-size:12px;
    }

    .invoice-info th,
    .invoice-info td{
        padding:4px 8px !important;
    }

}


.invoice-table{
    font-size:15px;
}

.invoice-table thead th{
    padding:7px 8px !important;
    font-size:13px;
    font-weight:600;
    text-align:center;
}

.invoice-table tbody td{
    padding:6px 8px !important;
    vertical-align:middle;
}

.invoice-table tbody tr{
    height:32px;
}

.invoice-table td:nth-child(4),
.invoice-table td:nth-child(5){
    text-align:right;
}

.invoice-table td:nth-child(3){
    text-align:center;
}

@media print{

    .invoice-table{
        font-size:12px;
    }

    .invoice-table thead th{
        padding:5px 6px !important;
    }

    .invoice-table tbody td{
        padding:4px 6px !important;
    }

    .invoice-table tbody tr{
        height:26px;
    }

}

.summary-table{
    font-size:13px;
    width:85%;
}

.summary-table th,
.summary-table td{
    padding:6px 10px !important;
    vertical-align:middle;
}

.summary-table th:first-child{
    width:65%;
}

.summary-table td:last-child{
    width:35%;
    text-align:right;
    font-weight:500;
}

.summary-table .table-success th{
    background:#0B1F59 !important;
    color:#fff !important;
}

.summary-table .table-danger th,
.summary-table .table-danger td{
    background:#fff5f5;
}

@media print{

    .summary-table{
        width:85% !important;
        font-size:12px;
    }

    .summary-table th,
    .summary-table td{
        padding:5px 8px !important;
    }

}

.invoice-header{
    background:#0B1F59;
    color:#fff;
}

.invoice-header th{
    background:#0B1F59 !important;
    color:#fff !important;
    border-color:#0B1F59;
}


</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">
                   Gulzar Ahmed&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|  Abbas 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 table-sm mb-0 invoice-info">

            <tr class="table-light">

                <td colspan="2">
                    <strong>Customer & Delivery Information</strong>
                </td>

                <th width="18%">Invoice #</th>
                <td>{{ $order->id }}</td>

            </tr>

            <tr>

                <th>Delivery Date</th>
                <td>{{ date('d-M-Y', strtotime($order->order_date)) }}</td>

                <th>Delivery Time</th>
                <td>{{ date('h:i A', strtotime($order->order_date)) }}</td>

            </tr>

            <tr>

                <th>Customer</th>
                <td>{{ $order->Customer->name }} </td>

                <th>Mobile</th>
                <td>{{ $order->Customer->phone }}</td>

            </tr>

            <tr>

                <th>Mobile 2</th>
                <td>{{ $order->Customer->phone2 ?? '-' }}</td>

                <th>Status</th>
                <td>{{ $order->payment_status }}</td>

            </tr>

            <tr>

                <th>Address</th>

                <td colspan="3">
                    {{ $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>

                <th width="45" class="text-center">#</th>

                <th>Description</th>

                <th width="70" class="text-center">Qty</th>

                <th width="110" class="text-end">Rate</th>

                <th width="110" class="text-end">Desc</th>

                <th width="120" class="text-end">Amount</th>

            </tr>

        </thead>

        <tbody>

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

                <tr>

                    <td class="text-center">
                        {{ $loop->iteration }}
                    </td>

                    <td>
                        {{ $item->Product->name }}
                        @if($item->product->category==2)
                           @if($item->days>=2)
                           <small>({{$item->days}}days)</small>
                           @else
                           <small>({{$item->days}}day)</small>
                           @endif
                        @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-3">

    <!-- 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">
                    Charges
                </th>
            </tr>

            <tr>
                <th>Subtotal</th>
                <td class="text-end">
                    {{ number_format($order->subtotal,2) }}
                </td>
            </tr>

            <tr>
                <th>Carriage</th>
                <td class="text-end">
                    {{ number_format($order->carriage,2) }}
                </td>
            </tr>

        </table>
        @if(optional($order->Deleveryboy)->name)
        <br>
        <div class="text-muted" style="font-size:14px;">
                <strong>Deleverd By:</strong>@lang('Mr.'){{optional($order->Deleveryboy)->name}}
        </div>
        @endif


    </div>

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

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

            <tr class="table-success">
                <th colspan="2" class="text-center text-white">
                    Payment Summary
                </th>
            </tr>

            <tr>
                <th>Grand Total</th>
                <td class="text-end fw-bold">
                    {{ number_format($order->grand_total,2) }}
                </td>
            </tr>

            <tr>
                <th>Paid Amount</th>
                <td class="text-end text-primary">
                    {{ number_format($order->paid_amount,2) }}
                </td>
            </tr>

            <tr class="table-danger">
                <th>Balance Due</th>
                <td class="text-end fw-bold text-danger">
                    {{ number_format($order->grand_total - $order->paid_amount,2) }}
                </td>
            </tr>

        </table>

    </div>

</div>


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





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

<div class="text-center mt-5">

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

        Thank You!

    </h4>

    <p>

        We appreciate your business and look forward to serving you again.

    </p>

</div>

<!-- 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>


