@extends('admin.layout.print')
    @section('content')
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 20px;
            margin: 0;
            padding: 0;
            color: #000; /* Ensure dark color */
        }
        .receipt {
            width: 80mm;
            padding: 0;
            box-sizing: border-box;
            margin: 0 auto; /* Center horizontally */
        }
        h5, p, .table, .center {
            text-align: center;
            margin: 0;
            padding: 0;
            color: #000;
            font-weight: bold;
        }
        h5 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        .table {
            width: 100%;
            border: 1px dashed #444242 !important;
            margin: 10px 0;
        }
        .table th {
            text-align: left;
            padding: 2px 0;
            font-size: 11px;
            color: #444242;
        }
        .table td {
            text-align: left;
            padding: 2px 0;
            font-size: 10px;
            color: #000;
        }
        .table th {
            border: 1px dashed #444242 !important;
        }

        .table td {
            border: 1px dashed #444242 !important;
        }

        .table tfoot tr td {
            border: none !important;
            text-align: right;
            font-size: 12px;
        }

        .total {
            font-weight: bold;
        }

        hr {
            border: none;
            border-top: 1px dashed #000;
            margin: 5px 0;
        }

        .center p {
            font-size: 14px;
        }

        img {
            max-width: 100%;
            height: 60px;
            object-fit: contain;
        }
    
        @media print {
            @page {
                size: 80mm auto;
                margin: 0;
            }
            body {
                margin: 0;
                padding: 0;
            }
            .receipt {
                width: 80mm;
                margin: 0; /* Remove any additional margins */
            }
            h5, p, .table, .center {
                color: #000; /* Ensure dark print */
            }
        }
    </style>
    <section class="content">
        <div class="receipt">
            <div class="row">
                <div class="col-md-12"> <!-- Changed to col-md-12 for full width -->
                    <div class="card p-1">
                        <div class="px-1 text-center">
                            <img src="{{$admin->avatar_url}}" class="w-100" style="height:80px;">
                            <h4 class="text-bold">{{ $admin->name }}</h4>
                            <div class="text-center">
                                <h6>Phone : {{ $admin->contact}}</h6>
                                <h6>{{ $admin->address}}</h6>
                            </div>
                        </div>
                        <h6 class="text-center"><b>Sale Invoice</b></h6>
                        <hr>
                        <div class="">
                            <div class="d-flex justify-content-between">
                                <h6>Date: </h6>
                                <h6>{{ $sale->date }}</h6>
                            </div>
                            <div class="d-flex justify-content-between">
                                <h6>Customer:</h6>
                                <h6>{{ $sale->customer?->name }}</h6>
                            </div>
                            <div class="d-flex justify-content-between">
                                <h6>Contact:</h6>
                                <h6>{{ $sale->customer?->contact }}</h6>
                            </div>
                            <div class="d-flex justify-content-between">
                                <h6>Address:</h6>
                                <h6>{{ $sale->customer?->address }}</h6>
                            </div>
                            <div class="d-flex justify-content-between">
                                <h6>Bill No: {{ $sale->id }}</h6>
                                <h6>MOP: {{ $sale->mop }}</h6>
                            </div>
                        </div>
                        @if ($sale && $sale->items->isNotEmpty())
                        <div>
                            <table class="table table-bordered border">
                                <thead>
                                    <tr>
                                        <th>Items</th>
                                        <th>P.Qty</th>
                                        <th>U.Qty</th>
                                        <th>P.Rate</th>
                                        <th>U.Rate</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sale->items as $item)
                                        <tr>
                                            <td>{{ $item->product?->name }}</td>

                                            @if($item->pack_quantity > 0)
                                                <td>{{ $item->pack_quantity }}</td>
                                                <td>{{ $item->unit_quantity }}</td>
                                                <td>{{ $item->pack_rate }}</td>
                                                <td>{{ $item->unit_rate }}</td>
                                            @else
                                                <td colspan="2">{{ $item->unit_quantity }}</td>
                                                <td colspan="2">{{ $item->unit_rate }}</td>
                                            @endif

                                            <td>{{ $item->subtotal }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="5"><b>Total:</b></td>
                                        <td><strong>{{ $sale->total }}</strong></td>
                                    </tr>
                                    @if($sale->discount > 0)
                                    <tr>
                                        <td colspan="5"><b>Discount:</b></td>
                                        <td><strong>{{ $sale->discount }}</strong></td>
                                    </tr>
                                    @endif
                                    <tr>
                                        <td colspan="5"><b>Paid:</b></td>
                                        <td><strong>{{ $sale->paid }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td colspan="5"><b>Balance:</b></td>
                                        <td><strong>{{ $sale->customer?->balance }}</strong></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        @endif
                        <div>
                            <h6 class="text-center">{{ $admin->invoice_note ?? ''}}.</h6>
                        </div>
                        <div class="col-md-12 text-center">
                            <span style="font-size: 15px;">Software by Tkbyte</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endsection