@extends('Branch.layout')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    /* ============ Pickmy Snacks — Bill Details theme ============ */
    :root{
        --pms-maroon:      #3D1B1B;
        --pms-maroon-dark: #2A1010;
        --pms-gold:        #F0B429;
        --pms-gold-soft:   #FBDD8E;
        --pms-cream:       #FFF9EE;

        --bg-page:      #F6F1E7;
        --bg-card:      #FFFFFF;
        --bg-subtle:    #FBF6EA;
        --bg-head:      linear-gradient(135deg, var(--pms-maroon) 0%, var(--pms-maroon-dark) 100%);
        --text-main:    #2A1B12;
        --text-muted:   #8A7666;
        --border-soft:  #EBE1CC;
        --accent:       var(--pms-gold);
        --accent-text:  #5C3D00;
        --success:      #2E7D4F;
        --shadow:       0 6px 24px rgba(61,27,27,0.08);
        --row-hover:    #FFF6E0;
        --thead-bg:     #FBEFD2;
        --thead-text:   #4A2E00;
        --scrollbar:    #E4D6B4;
    }

    [data-bs-theme="dark"]{
        --bg-page:      #17110C;
        --bg-card:      #221912;
        --bg-subtle:    #2A1F16;
        --bg-head:      linear-gradient(135deg, #4A2323 0%, #241010 100%);
        --text-main:    #F3E9D8;
        --text-muted:   #B6A48C;
        --border-soft:  #3A2D20;
        --accent:       #F0B429;
        --accent-text:  #FBDD8E;
        --success:      #6FCF97;
        --shadow:       0 6px 24px rgba(0,0,0,0.45);
        --row-hover:    #34281B;
        --thead-bg:     #3A2A12;
        --thead-text:   #F5D989;
        --scrollbar:    #4A3A26;
    }

    /* body{ background:var(--bg-page); } */

    .pms-wrap{ max-width:1100px; margin:0 auto; }

    .pms-card{
        background:var(--bg-card);
        border:1px solid var(--border-soft);
        border-radius:16px;
        box-shadow:var(--shadow);
        overflow:hidden;
        transition:background .25s ease, border-color .25s ease;
    }

    .pms-head{
        background:var(--bg-head);
        padding:22px 28px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        flex-wrap:wrap;
    }

    .pms-head-left{ display:flex; align-items:center; gap:14px; }

    .pms-crumb{
        width:40px; height:40px; border-radius:10px;
        background:var(--pms-gold);
        display:flex; align-items:center; justify-content:center;
        font-weight:800; color:var(--pms-maroon-dark); font-size:18px;
        flex-shrink:0;
    }

    .pms-head h5{
        margin:0; color:#FFF7E3; font-weight:700; letter-spacing:.2px;
        font-family: 'Segoe UI', system-ui, sans-serif;
    }
    .pms-head small{ color:var(--pms-gold-soft); display:block; font-weight:500; margin-top:2px; }

    .pms-btn-back{
        background:var(--pms-gold);
        color:var(--pms-maroon-dark) !important;
        border:none;
        font-weight:700;
        padding:9px 18px;
        border-radius:999px;
        text-decoration:none;
        display:inline-flex; align-items:center; gap:6px;
        transition:transform .15s ease, box-shadow .15s ease;
        box-shadow:0 3px 10px rgba(0,0,0,.15);
    }
    .pms-btn-back:hover{ transform:translateY(-1px); color:var(--pms-maroon-dark); box-shadow:0 6px 16px rgba(0,0,0,.2); }

 
    .pms-body{ padding:26px 28px 30px; }

    .pms-info-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
        gap:16px;
        margin-bottom:26px;
    }
    .pms-info-item{
        background:var(--bg-subtle);
        border:1px solid var(--border-soft);
        border-radius:12px;
        padding:14px 16px;
    }
    .pms-info-item .lbl{
        text-transform:uppercase;
        font-size:11px;
        letter-spacing:.6px;
        color:var(--text-muted);
        font-weight:700;
        display:block;
        margin-bottom:4px;
    }
    .pms-info-item .val{
        font-size:15px;
        font-weight:600;
        color:var(--text-main);
    }
    .pms-badge-pay{
        display:inline-block;
        padding:3px 12px;
        border-radius:999px;
        background:var(--accent);
        color:var(--pms-maroon-dark);
        font-weight:700;
        font-size:13px;
    }

    .pms-table-wrap{
        border:1px solid var(--border-soft);
        border-radius:12px;
        overflow:hidden;
    }

    table#billTable{
        margin:0 !important;
        color:var(--text-main);
        width:100% !important;
    }
    table#billTable thead th{
        background:var(--thead-bg);
        color:var(--thead-text);
        border-bottom:none !important;
        font-size:12.5px;
        text-transform:uppercase;
        letter-spacing:.4px;
        font-weight:700;
        padding:13px 12px;
        white-space:nowrap;
    }
    table#billTable tbody td{
        padding:12px;
        border-color:var(--border-soft) !important;
        background:var(--bg-card);
        vertical-align:middle;
        font-size:14px;
    }
    table#billTable tbody tr:hover td{ background:var(--row-hover) !important; }

    /* DataTables chrome */
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select{
        background:var(--bg-card);
        color:var(--text-main);
        border:1px solid var(--border-soft);
        border-radius:8px;
        padding:5px 10px;
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter{
        color:var(--text-muted);
        padding:12px 4px 4px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button{
        color:var(--text-main) !important;
        border-radius:8px !important;
        border:1px solid transparent !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current{
        background:var(--accent) !important;
        color:var(--pms-maroon-dark) !important;
        border-color:var(--accent) !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
        background:var(--row-hover) !important;
        color:var(--text-main) !important;
    }
    .dataTables_processing{
        background:var(--bg-card) !important;
        color:var(--text-main) !important;
        border:1px solid var(--border-soft) !important;
        border-radius:10px;
    }

    .pms-total-bar{
        margin-top:22px;
        display:flex;
        justify-content:flex-end;
    }
    .pms-total-card{
        background:var(--bg-head);
        border-radius:14px;
        padding:16px 26px;
        display:flex;
        align-items:center;
        gap:16px;
        box-shadow:var(--shadow);
    }
    .pms-total-card .lbl{
        color:var(--pms-gold-soft);
        font-weight:600;
        font-size:13px;
        text-transform:uppercase;
        letter-spacing:.5px;
    }
    .pms-total-card .amt{
        color:#FFF7E3;
        font-size:26px;
        font-weight:800;
    }
    .pms-total-card .amt span{ color:var(--pms-gold); }

    @media (max-width:576px){
        .pms-head{ padding:18px; }
        .pms-body{ padding:18px; }
        .pms-total-card{ width:100%; justify-content:space-between; }
    }
    .dt-length label
    {
        display: none;
    }
</style>

<div class="container-fluid mt-3 pms-wrap">

    <div class="pms-card">

        <div class="pms-head">
            <div class="pms-head-left">
                <div class="pms-crumb">₹</div>
                <div>
                    <h5>Bill Details</h5>
                    <small>Order #{{ $order->order_id }}</small>
                </div>
            </div>

            <div class="d-flex align-items-center gap-2">
               
                <a href="{{ route('branch.sales_bill') }}" class="pms-btn-back">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
        </div>

        <div class="pms-body">

            <div class="pms-info-grid">

                <div class="pms-info-item">
                    <span class="lbl">Order ID</span>
                    <span class="val">{{ $order->order_id }}</span>
                </div>

                <div class="pms-info-item">
                    <span class="lbl">Customer</span>
                    <span class="val">{{ $order->customer_name ?? '-' }}</span>
                </div>

                <div class="pms-info-item">
                    <span class="lbl">Phone</span>
                    <span class="val">{{ $order->customer_phone ?? '-' }}</span>
                </div>

                <div class="pms-info-item">
                    <span class="lbl">Payment</span>
                    <span class="pms-badge-pay">{{ ucfirst($order->payment_mode) }}</span>
                </div>

            </div>

            <div class="pms-table-wrap table-responsive">

                <table class="table table-hover" id="billTable">

                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Code</th>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Qty</th>
                            <th>Tax</th>
                            <th>Total</th>
                        </tr>
                    </thead>

                </table>

            </div>

            <div class="pms-total-bar">
                <div class="pms-total-card">
                    <span class="lbl">Grand Total</span>
                    <span class="amt"><span>₹</span> {{ number_format($order->total,2) }}</span>
                </div>
            </div>

        </div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(function(){

    $('#billTable').DataTable({
        processing: true,
        serverSide: true,
        // responsive: true,

        ajax: "{{ route('branch.sales_bill_products',$order->id) }}",

        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false },
            { data: 'product_code', name: 'product_code' },
            { data: 'product_name', name: 'product_name' },
            { data: 'price', name: 'price' },
            { data: 'qty_with_unit', name: 'quantity', orderable: false, searchable: false },
            { data: 'tax', name: 'tax' },
            { data: 'row_total', name: 'row_total' }
        ]
    });

  

});
</script>

@endsection