@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'Checkout',
'backUrl' => route('user.custom_products'),
])
@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);
    }

    .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: 100%;
        max-width: 700px;
        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 ml-3">
            <strong><b>Products</b></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>Product Name</th>
                    <th>Material</th>
                    <th>Per Sq</th>
                    <th>Sq</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orderItems as $item)

                <tr>
                    <td>{{ $item->product->product_name }}</td>
                    <td>{{ $item->product->material}}</td>
                    <td>{{ $item->per_sq}}</td>
                    <td>{{ $item->sq}}</td>
                    <td>₹{{ $item->amount }}</td>
                </tr>
                @endforeach

            </tbody>
            <tfoot>
                <tr class="border-top">
                    <th>Total</th>
                    <th></th>
                    <th>₹{{ $totalPerSqRate }}</th>
                    <th>{{ $totalSq }}</th>
                    <th>₹{{ $totalPrice }}</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
        </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 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="mt-1">{{ $latestOrder->customer_name  }}</h4>
            <h6 class="mt-1">{{ $latestOrder->customer_number  }}</h6>

        </div>

    </div>
    <div class="order-box mt-2">
        <div class="d-flex justify-content-between ml-3">
            <strong><b>Products</b></strong>
            <small>{{ $latestOrder->created_at->format('d/m/Y') }}</small>
        </div>
        <div class="table-responsive">

            <table class="table table-borderless border-top mt-2">
                <thead class=" border-bottom">
                    <tr>
                        <th>Sno</th>
                        <th>ProductName</th>
                        <th>Material</th>
                        <th>PerSq</th>
                        <th>Sq</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($orderItems as $index => $item)

                    <tr>
                        <td>{{ $index+1 }}</td>
                        <td>{{ $item->product->product_name }}</td>
                        <td>{{ $item->product->material}}</td>
                        <td>{{ $item->per_sq}}</td>
                        <td>{{ $item->sq}}</td>
                        <td>₹{{ $item->amount }}</td>
                    </tr>
                    @endforeach

                </tbody>
                <tfoot>
                    <tr class="border-top">
                        <th>Total</th>
                        <th></th>
                        <th></th>
                        <th>₹{{ $totalPerSqRate }}</th>
                        <th>{{ $totalSq }}</th>
                        <th>₹{{ $totalPrice }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </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="mt-3">{{ $latestOrder->customer_name  }}</h4>
            <h6 class="mt-3">{{ $latestOrder->customer_number  }}</h6>
        </div>

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

        <table class="table table-borderless ">
            <thead>

                <tr class="border-bottom">
                    <th>Sno</th>
                    <th>ProductName</th>
                    <th>Material</th>
                    <th>Sq</th>
                </tr>

            </thead>
            <tbody>
                @foreach ($orderItems as $index => $item)
                <tr>
                    <td>{{ $index+1 }}</td>
                    <td>{{ $item->product->product_name}}</td>
                    <td>{{ $item->product->material}}</td>
                    <td>{{ $item-> sq}}</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