{{-- @extends('layout')

@section('header')
    @include('components.header-inner', ['title' => 'Checkout'])
@endsection

@section('content')
    <style>
        .order-box {
            background: #fff;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .btn-green {
            width: 100%;
            background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%);
            border-radius: 12px;
            color: #fff;
            padding: 14px;
            font-weight: 600;
            font-size: 18px;
            border: none;
        }

        .btn-green small {
            font-size: 12px;
            display: block;
            margin-top: -3px;
        }

        .modal-box {
            background: #fff;
            padding: 25px;
            border-radius: 15px;
            width: 90%;
            margin: auto;
        }

        .modal-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: none;
            align-items: center;
            justify-content: center;
        }
    </style>

    <div class="container mt-4 mb-5">

        <!-- IMAGE -->
        <div class="text-center">
            <img src="{{ asset('/assets') }}/web/img/order-ready.png" class="img-fluid" style="max-width: 180px;">
            <h5 class="mt-3 fw-bold">Your order will be ready soon.</h5>
        </div>

        <!-- ORDER SUMMARY BOX -->
        <div class="order-box mt-4">
            <div class="d-flex justify-content-between">
                <strong>Products</strong>
                <small>21/10/2024</small>
            </div>

            <table class="table table-borderless mt-2">
                <thead>
                    <tr>
                        <th>Woods</th>
                        <th>Size</th>
                        <th>Qty</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Rose Wood</td>
                        <td>0.7 × 0.5 × 0.6</td>
                        <td>12</td>
                        <td>₹ 100</td>
                    </tr>
                    <tr>
                        <td>Sandalwood</td>
                        <td>0.7 × 0.5 × 0.6</td>
                        <td>11</td>
                        <td>₹ 100</td>
                    </tr>
                    <tr>
                        <td>Teak Wood</td>
                        <td>0.7 × 0.5 × 0.6</td>
                        <td>32</td>
                        <td>₹ 100</td>
                    </tr>
                    <tr>
                        <td>Mahogany</td>
                        <td>0.7 × 0.5 × 0.6</td>
                        <td>43</td>
                        <td>₹ 100</td>
                    </tr>
                    <tr>
                        <td>Maple Wood</td>
                        <td>0.7 × 0.5 × 0.6</td>
                        <td>32</td>
                        <td>₹ 100</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th>Total</th>
                        <th></th>
                        <th>130</th>
                        <th>₹ 500</th>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- BUTTONS -->
        <div class="mt-4">
            <button class="btn-green" onclick="openPreview('billPreview')">
                Customer Bill
                <small>Preview</small>
            </button>

            <button class="btn-green mt-3" onclick="openPreview('receiptPreview')">
                Order Receipt
                <small>Preview</small>
            </button>
        </div>
    </div>

    <!-- -------------------- MODAL PREVIEW -------------------- -->
    <div class="modal-bg" id="modalBg">
        <div class="modal-box" id="modalContent">
            <!-- Dynamic preview html placed here -->
        </div>
    </div>

    <!-- -------------------- BILL PREVIEW HTML -------------------- -->
    <div id="billPreview" style="display:none;">
        <div class="text-center mb-2">
            <img src="{{ asset('/assets') }}/web/img/logo.svg" width="80">
            <h5 class="fw-bold">JD Woods</h5>
        </div>

        <div class="d-flex justify-content-between border-bottom pb-2">
            <span>Estimated to</span>
            <strong>21/02/2025</strong>
        </div>

        <h6 class="mt-3">Jane Cooper</h6>

        <table class="table table-borderless mt-2">
            <thead>
                <tr>
                    <th>Woods</th>
                    <th>Size</th>
                    <th>Qty</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Rose Wood</td>
                    <td>0.7 × 0.5 × 0.6</td>
                    <td>12</td>
                    <td>₹100</td>
                </tr>
                <tr>
                    <td>Sandalwood</td>
                    <td>0.7 × 0.5 × 0.6</td>
                    <td>11</td>
                    <td>₹100</td>
                </tr>
                <tr>
                    <td>Teak Wood</td>
                    <td>0.7 × 0.5 × 0.6</td>
                    <td>32</td>
                    <td>₹100</td>
                </tr>
                <tr>
                    <td>Mahogany</td>
                    <td>0.7 × 0.5 × 0.6</td>
                    <td>43</td>
                    <td>₹100</td>
                </tr>
                <tr>
                    <td>Maple Wood</td>
                    <td>0.7 × 0.5 × 0.6</td>
                    <td>32</td>
                    <td>₹100</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Total</th>
                    <th></th>
                    <th>130</th>
                    <th>₹500</th>
                </tr>
            </tfoot>
        </table>

        <button class="btn-green mt-3" onclick="printDiv('billPreview')">Print</button>
    </div>

    <!-- -------------------- RECEIPT PREVIEW HTML -------------------- -->
    <div id="receiptPreview" style="display:none;">
        <div class="text-center mb-2">
            <img src="{{ asset('/assets') }}/web/img/logo.svg" width="80">
            <h5 class="fw-bold">JD Woods</h5>
        </div>

        <div class="d-flex justify-content-between border-bottom pb-2">
            <span>Estimated to</span>
            <strong>21/02/2025</strong>
        </div>

        <h6 class="mt-3">Jane Cooper</h6>

        <table class="table table-borderless mt-3">
            <thead>
                <tr>
                    <th>S no</th>
                    <th>Size</th>
                    <th>Qty</th>
                    <th>Rack</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>6 × 2 × 7</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>7 × 5 × 9</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>1.1 × 3.9 × 2.8</td>
                    <td>6</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>7 × 5 × 9</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>

        <button class="btn-green mt-3" onclick="printDiv('receiptPreview')">Print</button>
    </div>

    <!-- -------------------- JAVASCRIPT -------------------- -->
    <script>
        function openPreview(id) {
            document.getElementById("modalBg").style.display = "flex";
            document.getElementById("modalContent").innerHTML =
                document.getElementById(id).innerHTML;
        }

        document.getElementById("modalBg").onclick = function(e) {
            if (e.target.id === "modalBg") {
                document.getElementById("modalBg").style.display = "none";
            }
        }

        function printDiv(id) {
            var content = document.getElementById(id).innerHTML;
            var frame = window.open("", "", "width=600,height=800");
            frame.document.write(content);
            frame.document.close();
            frame.print();
        }
    </script>
@endsection --}}


@extends('layout')

@section('header')
    @include('components.header-inner', ['title' => 'Checkout'])
@endsection

@section('content')

<style>
    .order-box {
        background: #fff;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .btn-green {
        width: 100%;
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%);
        border-radius: 12px;
        color: #fff;
        padding: 14px;
        font-weight: 600;
        font-size: 18px;
        border: none;
    }

    .btn-green small {
        font-size: 12px;
        display: block;
        margin-top: -3px;
    }

    /* MODAL */
    .modal-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        z-index: 9999;
    }

    .modal-box {
        background: #fff;
        border-radius: 15px;
        width: 95%;
        max-width: 450px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-content-scroll {
        overflow-y: auto;
        padding: 20px;
        max-height: calc(90vh - 80px);
    }

    .modal-footer-fixed {
        padding: 15px;
        border-top: 1px solid #eee;
        background: #fff;
        text-align: center;
    }
</style>

<div class="container mt-4 mb-5">

    <!-- IMAGE -->
    <div class="text-center">
        <img src="{{ asset('/assets') }}/web/img/order-ready.png" class="img-fluid" style="max-width: 180px;">
        <h5 class="mt-3 fw-bold">Your order will be ready soon.</h5>
    </div>

    <!-- ORDER SUMMARY BOX -->
    <div class="order-box mt-4">
        <div class="d-flex justify-content-between">
            <strong>Products</strong>
            <small>21/10/2024</small>
        </div>

        <table class="table table-borderless mt-2">
            <thead>
                <tr>
                    <th>Woods</th>
                    <th>Size</th>
                    <th>Qty</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>Rose Wood</td><td>0.7 × 0.5 × 0.6</td><td>12</td><td>₹ 100</td></tr>
                <tr><td>Sandalwood</td><td>0.7 × 0.5 × 0.6</td><td>11</td><td>₹ 100</td></tr>
                <tr><td>Teak Wood</td><td>0.7 × 0.5 × 0.6</td><td>32</td><td>₹ 100</td></tr>
                <tr><td>Mahogany</td><td>0.7 × 0.5 × 0.6</td><td>43</td><td>₹ 100</td></tr>
                <tr><td>Maple Wood</td><td>0.7 × 0.5 × 0.6</td><td>32</td><td>₹ 100</td></tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Total</th>
                    <th></th>
                    <th>130</th>
                    <th>₹ 500</th>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- BUTTONS -->
    <div class="mt-4">
        <button class="btn-green" onclick="openPreview('billPreview')">
            Customer Bill
            <small>Preview</small>
        </button>

        <button class="btn-green mt-3" onclick="openPreview('receiptPreview')">
            Order Receipt
            <small>Preview</small>
        </button>
    </div>
</div>

<!-- -------------------- MODAL PREVIEW -------------------- -->
<div class="modal-bg" id="modalBg">
    <div class="modal-box">

        <div class="modal-content-scroll" id="modalContent">
            <!-- Dynamic content -->
        </div>

        <div class="modal-footer-fixed" id="modalFooter">
            <!-- Print button -->
        </div>

    </div>
</div>

<!-- -------------------- HIDDEN BILL PREVIEW -------------------- -->
<div id="billPreview" style="display:none;">
    <div class="text-center mb-2">
        <img src="{{ asset('/assets') }}/web/img/logo.svg" width="80">
        <h5 class="fw-bold">JD Woods</h5>
    </div>

    <div class="d-flex justify-content-between border-bottom pb-2">
        <span>Estimated to</span>
        <strong>21/02/2025</strong>
    </div>

    <h6 class="mt-3">Jane Cooper</h6>

    <table class="table table-borderless mt-2">
        <thead>
            <tr>
                <th>Woods</th>
                <th>Size</th>
                <th>Qty</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Rose Wood</td><td>0.7 × 0.5 × 0.6</td><td>12</td><td>₹100</td></tr>
            <tr><td>Sandalwood</td><td>0.7 × 0.5 × 0.6</td><td>11</td><td>₹100</td></tr>
            <tr><td>Teak Wood</td><td>0.7 × 0.5 × 0.6</td><td>32</td><td>₹100</td></tr>
            <tr><td>Mahogany</td><td>0.7 × 0.5 × 0.6</td><td>43</td><td>₹100</td></tr>
            <tr><td>Maple Wood</td><td>0.7 × 0.5 × 0.6</td><td>32</td><td>₹100</td></tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total</th>
                <th></th>
                <th>130</th>
                <th>₹500</th>
            </tr>
        </tfoot>
    </table>

    <button class="btn-green mt-3 print-btn" onclick="printDiv('billPreview')">Print</button>
</div>

<!-- -------------------- HIDDEN RECEIPT PREVIEW -------------------- -->
<div id="receiptPreview" style="display:none;">
    <div class="text-center mb-2">
        <img src="{{ asset('/assets') }}/web/img/logo.svg" width="80">
        <h5 class="fw-bold">JD Woods</h5>
    </div>

    <div class="d-flex justify-content-between border-bottom pb-2">
        <span>Estimated to</span>
        <strong>21/02/2025</strong>
    </div>

    <h6 class="mt-3">Jane Cooper</h6>

    <table class="table table-borderless mt-3">
        <thead>
            <tr>
                <th>S no</th>
                <th>Size</th>
                <th>Qty</th>
                <th>Rack</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>6 × 2 × 7</td><td>4</td><td>5</td></tr>
            <tr><td>2</td><td>7 × 5 × 9</td><td>2</td><td>2</td></tr>
            <tr><td>3</td><td>1.1 × 3.9 × 2.8</td><td>6</td><td>9</td></tr>
            <tr><td>4</td><td>7 × 5 × 9</td><td>2</td><td>2</td></tr>
        </tbody>
    </table>

    <button class="btn-green mt-3 print-btn" onclick="printDiv('receiptPreview')">Print</button>
</div>

<!-- -------------------- JAVASCRIPT -------------------- -->
<script>
    function openPreview(id) {

        let previewHTML = document.getElementById(id).innerHTML;

        // Separate print button
        let tempDiv = document.createElement("div");
        tempDiv.innerHTML = previewHTML;

        let printBtn = tempDiv.querySelector(".print-btn");
        let contentOnly = tempDiv.innerHTML.replace(printBtn.outerHTML, "");

        // Insert content
        document.getElementById("modalContent").innerHTML = contentOnly;

        // Insert print button
        document.getElementById("modalFooter").innerHTML = printBtn.outerHTML;

        // Show modal
        document.getElementById("modalBg").style.display = "flex";
    }

    // Close modal when clicking outside
    document.getElementById("modalBg").onclick = function(e) {
        if (e.target.id === "modalBg") {
            document.getElementById("modalBg").style.display = "none";
        }
    }

    function printDiv(id) {
        var content = document.getElementById(id).innerHTML;
        var frame = window.open("", "", "width=600,height=800");
        frame.document.write(content);
        frame.document.close();
        frame.print();
    }
</script>

@endsection