@extends('operations.layout.mainlayout')
@php $show_pay_all=0;$pay_all=0;$show_collect_all=0;$show_discount_all=0; @endphp
@section('content')
    @if($order->VENDOR->PROFILE_ID != session('profile_id'))
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif

    @if(session('role') == 15 || session('role') == 17)
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif

        <style>

            .select2-selection{
                display:none !important;
            }
            .btn-app {
                color: white;
                box-shadow: none;
                border-radius: 3px;
                position: relative;
                padding: 10px 15px;
                margin: 0;
                min-width: 60px;
                max-width: 80px;
                text-align: center;
                border: 1px solid #ddd;
                background-color: #f4f4f4 !important;
                font-size: 12px;
                transition: all .2s;
                background-color: steelblue !important;
            }

            .btn-app > .fa, .btn-app > .glyphicon, .btn-app > .ion {
                font-size: 30px;
                display: block;
            }

            .btn-app:hover {
                border-color: #aaa;
                transform: scale(1.1);
            }

            button.dt-button, div.dt-button, a.dt-button {
                background-image:none;
                color:white;
            }
        </style>
    @if((session('role') == 14 && session('profile_id') != $order->VENDOR->PROFILE_ID))
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif

    <style>
        table.dataTable tr.dtrg-group td {
            background-color: white;
            border-bottom: 1px solid #e7e7e7 !important;
        }
        .fancy {
            line-height: 0.3;
            text-align: center;
        }
        .fancy span {
            display: inline-block;
            position: relative;
        }
        .fancy span:before,
        .fancy span:after {
            content: "";
            position: absolute;
            height: 5px;
            border-bottom: 1px solid #e35a80;
            top: 0;
            width: 70%;
        }
        .fancy span:before {
            right: 100%;
            margin-right: 15px;
        }
        .fancy span:after {
            left: 100%;
            margin-left: 15px;
        }
    </style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->

    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <input type="hidden" id="order-id" value="{{$order->ID}}">
                    <h1 class="m-0 text-dark" style="color: #e35a80!important;">P.O # <b>{{$order->ID}}</b> - <span class="right badge {{$order->STATUSDETAILS->BADGE}}">{{$order->STATUSDETAILS->NAME}}</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- /.card -->

                    <div class="card">

                        <!-- /.card-header -->
                        <div class="card-body">
                        <div class="row">
                            <div class="col-md-7">
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0">
                                </div>
                                <div class="card-body pt-0">
                                    <div class="row">
                                        <div class="col-md-7">

                                            <h2 class="lead"><b>{{$order->VENDOR->NAME}}</b></h2>
                                            <p class="text-muted text-sm"><b>Legal Name: </b> {{ $order->VENDOR->LEGAL_NAME }} </p>
                                            <ul class="ml-4 mb-0 fa-ul text-muted">
                                                <li style="margin-bottom: 5px;font-size:12px;" class="small"><span class="fa-li"><i class="fas fa-lg fa-building"></i></span> Country : @if(!empty($order->VENDOR->ADDRESS_COUNTRY)){{$order->VENDOR->ADDRESS_COUNTRY}}@endif</li>
                                                <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-building"></i></span> City : @if(!empty($order->VENDOR->ADDRESS_CITY)){{$order->VENDOR->ADDRESS_CITY}} @endif</li>
                                                <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-phone"></i></span> Mobile #: {{$order->VENDOR->MOBILE}}</li>
                                                <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-calendar-day"></i></span> Lead Time (Days) : {{$order->VENDOR->LEAD_TIME}}</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-5 text-right">
                                            <img width="150px" src="/images/vendor.png" alt="" class="img-circle img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            </div>
                            <div class="col-md-5">
                                    <div class="card bg-gradient-light">
                                        <div class="card-header text-muted border-bottom-0">
                                        </div>
                                        <div class="card-body pt-0">
                                            <div class="row">
                                                <div class="col-md-7">
                                                    <h2 class="lead"><b>Order Information</b></h2>
                                                    <p class="text-muted text-sm"><b>Order Totals</b> </p>
                                                    <ul class="ml-4 mb-0 fa-ul text-muted">
                                                        <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-building"></i></span> Subtotal : {{$order->BASE_AMOUNT}} SAR</li>
                                                        <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-shopping-bag"></i></span> Total Items :  {{$order->order_items_count}} </li>
                                                        <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-percent"></i></span> Tax :  {{$order->TAX}} SAR</li>
                                                        <li style="margin-bottom: 5px" class="small"><span class="fa-li"><i class="fas fa-lg fa-globe-africa"></i></span> Net total : {{$order->TOTAL_AMOUNT}} SAR</li>
                                                    </ul>
                                                </div>
                                                <div class="col-md-5 text-right">
                                                    <img width="150px" src="/images/totals.png" alt="" class="img-circle img-fluid">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>

                            {{--<div class="row">
                                <div class="col" style="text-align: left;">
                                    Comments : <a href="#" class="notes" data-pk="{{$order->ID}}" data-title="Enter Comment">{{$order->NOTES}}</a>
                                    <br />
                                 </div>
                            </div>--}}
                            <div class="row">
                                <div class="col" style="text-align: left;">
                                    <div class="alert alert-danger" role="alert" style="@if(empty($error))display: none;@endif">@if(!empty($error)) {{$error}} @endif</div>
                                </div>
                            </div>
                            <div style="margin-top:20px" class="row">
                                <div class="col">

                                    <h3>Order Items List</h3>

                                    <table id="order-items-table" class="table table-bordered table-striped"></table>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<div class="modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Sample Collection</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
            <div class="modal-body">

                <label>Reason of testing ?</label>
                <select required id="outside-case" name="outside-case" class="form-control">
                    <option value="">Select Reason</option>
                    <option value="0">Diagnoses</option>
                    <option value="1">Travelling to Outside KSA</option>
                    <option value="2">Public Quarantine (Hotel) - حجر مؤسسي</option>
                    <option value="3">Home Quarantine - حجر في المنزل</option>
                </select>
                </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-info" onClick="this.form.submit();this.disabled=true;">Collect Sample</button>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

@endsection


@section('warehouse_scripts')
    <script>
        var order_id = $('#order-id').val();

        $("#order-items-table").DataTable({
            dom: 'Bfrtip',
            "buttons" : [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "responsive": true,
            "autoWidth": false,
            "order": [[ 0, "desc" ]],
            ajax: {url: '/operations/warehouse/purchasing/itemsTable/'+ order_id},
            columns: [
                {data:'ID', title: 'ID'},
                {data:'ITEM.NAME_EN', title: 'Name'},
                {
                    title: 'Description', "mRender": function (data, type, row) {
                        //return '<input type="text" class="form-control desc" id="desc-'+row.ID+'" onblur="myFunction('+row.ID+')" value="'+row.ITEM.DESC_EN+'"/>'
                        return  '<p title="' + row.ITEM.DESC_EN + '">'+row.ITEM.DESC_EN.slice(0, 40)+'...'+"</p>";
                    }
                },
                {data:'PRICE', title: 'Price'},
                {data:'QTY', title: 'Quantity'},
            ]
        });

        function myFunction(id) {
            console.log($('#desc-'+id).val());
        }
    </script>
@endsection