@extends('User.layout')

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

@section('content')

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

    /* HEADER */
    .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
    }

    /* ✅ THIN LINE */
    .order-divider {
        height: 1px;
        background: #e5e5e5;
        margin: 10px 0 14px;
    }

    /* TABLE */
    .table th {
        font-weight: 600;
        color: #333;
    }

    .table td {
        color: #666;
    }

    /* TOTAL ROW */
    .total-row th {
        font-weight: 700;
        border-top: 1px solid #e5e5e5;
        padding-top: 10px;
    }


    
    .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: 600px;
        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.jpg" 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>{{ $latestOrder->created_at->format('d/m/Y') }}</small>
        </div>

        <table class="table table-borderless border-top mt-2">
            <thead class="border-bottom">
                <tr>
                    <th>Woods</th>
                    <th>Size</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orderItems as $item)

                <tr>
                    <td>{{ $item->stock->wood_name }}</td>
                    <td>{{ $item->stock->rack_size }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>₹ {{ number_format($item->total_price, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="total-row">
                    <th>Total</th>
                    <th></th>
                    <th>{{ $totalQuantity }}</th>
                    <th>₹ {{ number_format($totalPrice, 2) }}</th>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- BUTTONS -->
    <div class="mt-4">
        <button class="btn-green" onclick="openPreview('billPreview')">
            Customer Bill
        </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 border-bottom  mb-2">
        <img src="{{ asset('/assets') }}/web/img/logo.svg" width="80">
        <h5 class="fw-bold">JD Woods</h5>
    </div>
    <div class="mx-3">
        <div class="d-flex justify-content-between  pb-2">
            <span>Estimated to</span>
            <strong>{{ $latestOrder->created_at->format('d/m/Y') }}</strong>
        </div>
        <div class="d-flex justify-content-between  pb-2">
            <h4 class="mt-3 ">{{ $latestOrder->customer_name }}</h4>
            <h6 class="mt-3 ">{{ $latestOrder->customer_number }}</h6>
        </div>
    </div>
    <div class="order-box mt-3">

        <div class="d-flex justify-content-between  pb-2">
            <span>Products</span>
            <small>{{ $latestOrder->created_at->format('d/m/Y') }}</small>
        </div>

        <table class="table table-borderless border-top mt-2">
            <thead class="border-bottom">
                <tr>
                    <th>Woods</th>
                    <th>Size</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>

            </thead>
            <tbody>
                @foreach($orderItems as $item)

                <tr>
                    <td>{{ $item->stock->wood_name }}</td>
                    <td>{{ $item->stock->rack_size }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>₹{{ number_format($item->total_price, 2) }}</td>
                </tr>
                @endforeach

            </tbody>
            <tfoot>
                <tr class="border-top">
                    <th>Total</th>
                    <th></th>
                    <th>{{ $totalQuantity }}</th>
                    <th>₹{{ number_format($totalPrice, 2) }}</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <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 border-bottom ">
        <img src="{{ asset('/assets') }}/web/img/logo.svg" width="80">
        <h5 class="fw-bold">JD Woods</h5>
    </div>
    <div class="mx-3">
        <div class="d-flex justify-content-between pb-2">
            <span>Estimated to</span>
            <strong>{{ $latestOrder->created_at->format('d/m/Y')}}</strong>
        </div>
        <div class="d-flex justify-content-between pb-2">
            <h4 class=" ml-4">{{ $latestOrder->customer_name }}</h4>
            <h6 class=" ml-4">{{ $latestOrder->customer_number }}</h6>
        </div>

    </div>
    <div class="order-box ">

        <table class="table table-borderless ">
            <thead>
                <tr class="border-bottom">
                    <th>S no</th>
                    <th>Size</th>
                    <th>Quantity</th>
                    <th>Rack</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orderItems as $index => $item)

                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $item->stock->rack_size }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>{{ $item->stock->rack_number }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <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