@extends('layouts.app')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        body {
            background: #f8f9fa;
            font-family: Arial, Helvetica, sans-serif;
        }

        .bill-container {
            max-width: 900px;
            margin: auto;
            background: #fff;
            padding: 25px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            border: 1px solid #ddd;
        }

        .bill-header {
            background: #0a1f44 !important;
            color: #ffd700 !important;
            padding: 18px 20px;
            border-radius: 10px 10px 0 0;
        }

        .bill-header img {
            width: 55px;
            height: 55px;
            object-fit: contain;
        }

        .company-name {
            /* font-size:28px; */
            /* font-weight:700; */
            text-align: center;
            flex: 1;
        }

        .bill-no {
            font-size: 16px;
            font-weight: 600;
            min-width: 140px;
            text-align: right;
        }

        .details-box {
            border: 1px solid #dee2e6;
            border-top: 0;
            padding: 20px;
        }

        .table thead th {
            background: #0a1f44 !important;
            color: #ffd700 !important;
            text-align: center;
        }

        .table td,
        .table th {
            vertical-align: middle;
            text-align: center;
        }

        .total-box {
            border: 2px solid #0a1f44;
            padding: 15px;
            border-radius: 8px;
            background: #f8f9fa;
        }

        .thank-you {
            font-family: 'Brush Script MT', cursive;
            /* font-size:40px; */
            /* color:#dc3545; */
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 0px;
        }

        @media(max-width:768px) {

            .bill-header {
                flex-wrap: wrap;
                gap: 10px;
                text-align: center;
            }

            .company-name {
                font-size: 20px;
                width: 100%;
                order: 2;
            }

            .bill-no {
                width: 100%;
                text-align: center;
                order: 3;
            }

            .bill-header img {
                margin: auto;
                order: 1;
            }
        }

        /* PRINT STYLE */
        @media print {

            html,
            body {
                width: 210mm;
                height: 297mm;
                background: #fff !important;
            }

            .container {
                width: 100%;
                max-width: 100%;
                padding: 0;
                margin: 0;
            }

            .bill-container {
                width: 100%;
                max-width: 100%;
                margin: 0;
                padding: 20px;
                box-shadow: none;
                border: 1px solid #000;
                border-radius: 0;
            }

            .bill-header {
                background: #0a1f44 !important;
                color: #ffd700 !important;
            }

            .table thead th {
                background: #0a1f44 !important;
                color: #ffd700 !important;
            }

            .btn-print {
                display: none !important;
            }

            @page {
                size: A4;
                margin: 8mm;
            }
        }
    </style>
@section('content')


    <div class="container py-4">

        <div class="bill-container">

            <!-- Header -->
            <div class="bill-header">

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

                    <!-- Logo -->
                    <div class="col-2 text-start">
                        <img src="{{ asset('assets/image/coin.png') }}" alt="logo" class="header-logo">
                    </div>

                    <!-- Center Company Details -->
                    <div class="col-8 text-center">

                        <h1 class="company-title mb-1">
                            OMIGA INTERNATIONAL
                        </h1>

                        <div class="tagline">
                            Gold Purchase | Gold Sales | Trusted Service
                        </div>

                        <div class="address-line">
                            No.12, Anna Salai, T. Nagar, Chennai - 600017
                        </div>

                        <div class="address-line">
                            Phone: +91 98765 43210 | Email: info@omiga.com
                        </div>

                    </div>

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

                        <div class="invoice-title">INVOICE</div>
                        <div class="bill-number">Bill No : 1001</div>

                    </div>

                </div>

            </div>

            <style>
                .bill-header {
                    background: #0a1f44 !important;
                    padding: 16px 20px;
                    border-radius: 10px 10px 0 0;
                    color: #fff;
                }

                .header-logo {
                    width: 60px;
                    height: 60px;
                    object-fit: contain;
                }

                .company-title {
                    color: #ffd700 !important;
                    font-size: 34px;
                    font-weight: 800;
                    margin: 0;
                    letter-spacing: 1px;
                    font-family: Georgia, serif;
                }

                .tagline {
                    font-size: 14px;
                    font-weight: 600;
                    color: #ffffff;
                    margin-bottom: 4px;
                }

                .address-line {
                    font-size: 11px;
                    color: #d8d8d8;
                    line-height: 1.4;
                }

                /*
.invoice-box{
    line-height:1.7;
} */
                /*
.invoice-title{
    font-size:18px;
    font-weight:700;
    color:#ffffff;
} */

                .bill-number {
                    font-size: 11px;
                    font-weight: 800;
                    color: #ffd700;
                }

                /*
.bill-date{
    font-size:14px;
    font-weight:600;
    color:#ffffff;
} */

                /* Mobile Responsive */
                @media(max-width:768px) {

                    .company-title {
                        font-size: 22px;
                    }

                    .tagline {
                        font-size: 11px;
                    }

                    .address-line {
                        font-size: 9px;
                    }

                    .invoice-title {
                        font-size: 14px;
                    }

                    .bill-number {
                        font-size: 15px;
                    }

                    .bill-date {
                        font-size: 11px;
                    }

                    .header-logo {
                        width: 45px;
                        height: 45px;
                    }
                }

                /* Print */
                @media print {

                    * {
                        -webkit-print-color-adjust: exact !important;
                        print-color-adjust: exact !important;
                    }

                    .bill-header {
                        background: #0a1f44 !important;
                    }

                    .company-title {
                        color: #ffd700 !important;
                    }

                    .bill-number {
                        color: #ffd700 !important;
                    }
                }
            </style>

            <!-- Body -->
            <div class="details-box">

                <div class="row mb-4">
                    <div class="col-md-6 mb-2">
                        <strong>Date :</strong> 19-04-2026
                    </div>

                    <div class="col-md-6 mb-2 text-md-end">
                        <strong>Loaded Date :</strong> 20-04-2026
                    </div>
                </div>

                <!-- Table -->
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Price</th>
                                <th>Making Charge</th>
                                <th>GST</th>
                                <th>Total Amount</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>₹ 50,000</td>
                                <td>₹ 2,000</td>
                                <td>₹ 936</td>
                                <td><strong>₹ 52,936</strong></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Total -->
                <div class="row justify-content-end mt-4">
                    <div class="col-md-5">
                        <div class="total-box">

                            <div class="d-flex justify-content-between mb-2">
                                <span>Subtotal :</span>
                                <strong>₹ 52,000</strong>
                            </div>

                            <div class="d-flex justify-content-between mb-2">
                                <span>GST :</span>
                                <strong>₹ 936</strong>
                            </div>

                            <hr>

                            <div class="d-flex justify-content-between fs-5">
                                <span>Total :</span>
                                <strong class="text-success">₹ 52,936</strong>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- Footer -->
                <div class="thank-you">
                    <hr class="m-0">
                    <p class="text-center fw-bold m-0" style="font-family: 'Brush Script MT', cursive;">
                        Thank You for Choosing Omiga International! Stay Golden!
                    </p>
                </div>

            </div>

        </div>

        <div class="text-center mt-4 btn-print">
            <button onclick="window.print()" class="btn btn-primary px-4">
                Print Bill
            </button>
        </div>

    </div>
@endsection