@extends('admin.layouts.app')

@section('content')
<style>
    /* Hide the whole layout content for printing */
    @media print {
        body * {
            visibility: hidden;
        }
        
        /* Make the content visible for printing */
        .card-body, .card-body * {
            visibility: visible;
        }
        
        /* Make the card body fit for print (removes unnecessary margins) */
        .card-body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        
        /* Hide the print button during print */
        .btn-primary {
            display: none;
        }
    }
</style>
<div class="card">
    <div class="card-body">
        <!-- Bill Header Section -->
        <div style="text-align: center;">
            <h3>Mo Dawa</h3>
            <p><strong>Sale Bill</strong></p>
            <p><strong>Date:</strong> {{ $date }}</p>
        </div>

        <hr>

        <!-- Bill Information Table -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th colspan="2" class="text-center">Sale Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Product Name:</strong></td>
                    <td>{{ $product->purchase->product }}</td>
                </tr>
                <tr>
                    <td><strong>Quantity:</strong></td>
                    <td>{{ $quantity }}</td>
                </tr>
                <tr>
                    <td><strong>Total Price:</strong></td>
                    <td>{{ settings('app_currency', '₹') }} {{ $total_price }}</td>
                </tr>
                <tr>
                    <td><strong>Sale Date:</strong></td>
                    <td>{{ $date }}</td>
                </tr>
                <tr>
                    <td><strong>Purchased From:</strong></td>
                    <td>{{ $purchase->supplier_name }}</td>
                </tr>
            </tbody>
        </table>

        <!-- Optional: Add More Details -->
        <!-- You can add more rows here if you want to display customer name, address, etc. -->

        <hr>

        <!-- Print Button -->
        <div class="mt-3" style="text-align: center;">
            <button onclick="window.print()" class="btn btn-primary">Print Bill</button>
        </div>
    </div>
</div>
@endsection