@extends('admin.layout.master')
@section('title','ORDER')
@section('content')
<style>
    .table th,
    .table td {
        padding: 0rem;
        font-size: 12px;
        /* padding-left: 0.35rem;
        padding-right: 0.35rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem; */
    }

    /* .table th {
        background: #ab3535;
        padding: 5px !important;
        color: white !important;
    } */
    .custom-td {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .border-bottom-dashed {
        border-bottom: 1px dashed #aaa;
    }

    tbody td {
        padding: 3px 0;
    }

    .table tbody th,
    .table tbody td {
        padding-bottom: 2px;
        padding-top: 2px;
    }
</style>
<div class="card sina-card">
    <div class="card-header card-header-s d-flex flex-wrap align-items-center">
        <h4 class="col-6 pl-0">Order Details</h4>
        <div class="col-6 d-flex justify-content-end">
            <a href="{{ route('restaurant.order.new') }}" target="_blank" class="btn-sina-title-add d-flex align-items-center" type="button" name="button">
                <div class="col pl-0 pr-2">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <div class="text-nowrap"> Add New </div>
            </a>
        </div>
    </div>

    <div class="pull-right stickybutton rounded-lg" style="position: fixed;right:0;z-index:5000" id="btn_print">
        <button class="btn btn-sm btn-warning btn-hover" style="font-size: 15px" onclick="PrintDiv()" type="button"><b>Print</b> &nbsp;<svg aria-hidden="true" style="height: 15px" focusable="false" data-prefix="far" data-icon="print" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-print fa-w-16">
                <path fill="currentColor" d="M400 264c-13.25 0-24 10.74-24 24 0 13.25 10.75 24 24 24s24-10.75 24-24c0-13.26-10.75-24-24-24zm32-88V99.88c0-12.73-5.06-24.94-14.06-33.94l-51.88-51.88c-9-9-21.21-14.06-33.94-14.06H110.48C93.64 0 80 14.33 80 32v144c-44.18 0-80 35.82-80 80v128c0 8.84 7.16 16 16 16h64v96c0 8.84 7.16 16 16 16h320c8.84 0 16-7.16 16-16v-96h64c8.84 0 16-7.16 16-16V256c0-44.18-35.82-80-80-80zM128 48h192v48c0 8.84 7.16 16 16 16h48v64H128V48zm256 416H128v-64h256v64zm80-112H48v-96c0-17.64 14.36-32 32-32h352c17.64 0 32 14.36 32 32v96z" class=""></path>
            </svg>
        </button>
    </div>
    <div class="card-body">
        <div class="p-2 bg-white" id="divTableDataHolder">
            <style>
                @media print {
                    table {
                        width: 100%;
                    }
                    table, table th, table td{
                        border: 0 !important;
                        border-color: transparent; 
                    }
                    .table-borderless th,
                    .table-borderless td,
                    .table-borderless thead th,
                    .table-borderless tbody+tbody {
                        border: 0;
                        border-color: transparent;
                    }
                    .table th,
                    .table td {
                        padding: 0rem;
                        font-size: 12px; 
                    }
                    .custom-td {
                        white-space: pre-wrap;
                        word-wrap: break-word;
                    }
                    .border-bottom-dashed {
                        border-bottom: 1px dashed #aaa;
                    }
                    tbody td {
                        padding: 3px 0;
                    }
                    .table tbody th,
                    .table tbody td {
                        padding-bottom: 2px;
                        padding-top: 2px;
                    }
                }
            </style>
            <table class="table table-borderless" style='width:100%;'>
                <thead class="border-0">
                    <tr >
                        <th class="text-center" colspan="8">
                            <h5>Safa Hotel</h5>
                        </th>
                    </tr>
                    <tr>
                        <td class="text-center" colspan="8">Test Address <br>
                            Phone: 01812345678
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center" colspan="8">
                            22-02-2022 06:48:22 PM
                        </td>
                    </tr>
                    <tr class="border-bottom-dashed mb-2">
                        <td class="" colspan="8">
                            <div class="row py-2 mb-1">
                                <div class="col-6">
                                    Inv No.: Inv-091029384
                                </div>
                                <div class="col-6 text-right">
                                    Sales By.: Admin
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="border-bottom-dashed mb-2" style="border-top: 1px dashed #000;border-bottom: 1px dashed #000;">
                        <th style="width:10%;font-size: 12px; text-align: center;border-top: 1px dashed #000;border-bottom: 1px dashed #000;">Sl</th>
                        <th style="width:40%;font-size: 12px; text-align: center;border-top: 1px dashed #000;border-bottom: 1px dashed #000;">Item</th>
                        <th style="width:10%;font-size: 12px; text-align: center;border-top: 1px dashed #000;border-bottom: 1px dashed #000;">Qty</th>
                        <th style="width:20%;font-size: 12px; text-align: center;border-top: 1px dashed #000;border-bottom: 1px dashed #000;">Price</th>
                        <th style="width:20%;font-size: 12px; text-align: center;border-top: 1px dashed #000;border-bottom: 1px dashed #000;">Amount</th>
                        <!-- <th>Status</th> -->
                        <!-- <th>
                                <input type="checkbox" class="chq-input-all" />
                                <button onclick="handleMergeBillFromList()" class="btn btn-sm btn-danger">Merge Bill</button>
                            </th> -->
                    </tr>
                </thead>
                <tbody id="dataList" class="border-bottom-dashed mb-2">
                    <tr>
                        <td style="font-size:10px;text-align: center;">1</td>
                        <td style="font-size:10px;">Arabian Package 1</td>
                        <td style="font-size:12px;text-align: center;">2</td>
                        <td style="font-size:12px;text-align: center;">650</td>
                        <td style="font-size:12px;text-align: right;">1300</td>
                    </tr>
                    <tr>
                        <td style="font-size:10px;text-align: center;">1</td>
                        <td style="font-size:10px;">Arabian Package 1</td>
                        <td style="font-size:12px;text-align: center;">2</td>
                        <td style="font-size:12px;text-align: center;">650</td>
                        <td style="font-size:12px;text-align: right;">1300</td>
                    </tr>
                    <!-- @php($i = 1)
                            @foreach ($result as $item)
                                <tr>
                                    <td>{{ $i++ }}</td>
                                    <td>{{ $item->id }}</td>
                                    <td>{{ $item->customer? $item->customer->ledger_title:'Not Found' }}</td>
                                    <td>{{ $item->waiter ? $item->waiter->name:'Not Found' }}</td>
                                    <td>
                                    </td>
                                    <td>{{ date('d/M/Y', strtotime($item->created_at)) }}</td>
                                    <td>{{ $item->orderDetails->sum('price') * $item->orderDetails->sum('qty') }}</td>
                                    <td>
                                        @if ($item->status == 1)
                                            <p style="color:green">Active</p>
                                        @endif
                                    </td> -->
                                    <!-- <td>
                                        @if($item->bill_id == 0)
                                            <a href="{{url('restaurant/order/new/'.$item->id)}}" class="btn btn-primary btn-sm">Edit</a>
                                            <a href="{{url('restaurant/order/delete/'.$item->id)}}" onclick="return confirm('Are you sure ?')" class="btn btn-danger btn-sm">Delete</a>
                                            <input
                                                data-order='null'
                                                data-oid=""
                                                value=""
                                                type="checkbox" class="chq-input" />
                                        @endif

                                    </td> 
                                 </tr> -->
                    <!-- @endforeach -->
                </tbody>
                <tfoot style="border-top: 1px dashed #000;">
                    <tr>
                        <th colspan="2" style="border-top: 1px dashed #000;">
                            Total Qty: 6
                        </th>
                        <th class="pr-1" colspan="2" style="text-align: right;border-top: 1px dashed #000;">
                            Sub Total
                        </th>
                        <th style="text-align: right;border-top: 1px dashed #000;">
                            3900
                        </th>
                    </tr>
                    <tr>
                        <th class="pr-1" colspan="4" style="text-align: right;">
                            VAT(15.00%).
                        </th>
                        <th class="text-right" style="text-align: right;">
                            300
                        </th>
                    </tr>
                    <tr>
                        <th class="text-right pr-1" colspan="4">
                            Total
                        </th>
                        <th class="text-right">
                            777779999.00
                        </th>
                    </tr>
                    <tr class="border-bottom-dashed mb-3">
                        <td class="py-3" colspan="5"></td>
                    </tr>
                    <tr class="border-bottom-dashed">
                        <th class="text-center" colspan="5">
                            Thank You
                        </th>
                    </tr>

                </tfoot>
            </table>
        </div>
    </div>
</div>
@include("restaurant.modal.ModalBill")
@endsection
@section('script')
<script>
    $(document).ready(function() {
        select2('select_2');
        partySearch('party_live', 2);
    });

    function handleMergeBillFromList() {
        var list = [];
        var items = [];

        $(".chq-input").each(function() {
            if ($(this).is(":checked")) {
                var conv_json = [];
                var info = $(this).attr("data-order");
                var oid = $(this).attr("data-oid");
                var id = $(this).val();
                conv_json.push(info);
                list.push(id);
                var obj = {
                    id: id,
                    text: oid,
                    info: JSON.parse(conv_json),
                }
                items.push(obj);
            }
        });
        btnHandleModal();
        setBillFromOrders(items, list);
    }
</script>
<script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
<script src="{{ asset('/') }}restaurant/custom/js/cart.js"></script>
<script src="{{ asset('/') }}restaurant/custom/js/order.js"></script>
<script src="{{ asset('/') }}restaurant/custom/js/bill.js"></script>
@endsection