@extends("layouts.admin.app")
@section("page-title")
{{__("Dashboard")}}
@endSection
@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("UnBooking Order")}}</h1>
        <p>{{__("UnBooking Order Details")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("UnBooking Order Details")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
@include("includes.dialog")
<div class="row">
    <div class="col-md-12">
        <div class="tile" style="padding: 5px 5px 5px 5px">
            <div class="tile-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("number")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" name="number" id="number" value="{{$order['number']}}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("date")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="text" name="date" value="{{$order['date']}}" id="date" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 4px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label required"><b>{{__("store")}}</b></label>
                            <div class="col-sm-8">
                                <select name="store" id="store" class="form-control" disabled>
                                    <option></option>
                                    @foreach($stores as $store)
                                    <option value="{{$store->id}}" @if ($order['store_id']==$store->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$store->name}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("Booking Order Number")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 13px" type="text" name="number" id="number" value="{{$old_order['number']}}" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 2px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                            <div class="col-sm-8">
                                <select name="sales_order_id" id="sales_order_id" class="form-control" disabled>
                                    <option></option>
                                    @foreach($sales_orders as $salesOrder)
                                    <option value="{{$salesOrder->id}}" @if ($order['sales_order_id']==$salesOrder->id)
                                        {{'selected="selected"'}}
                                        @endif>{{$salesOrder->number}}
                                    </option>
                                    @endforeach
                                </select>
                                <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("customer-name")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="text" name="customer_name" value="{{$order->client->en_name}}" id="customer_name" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="tile">
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered text-center" id="sampleTable" style="padding: 3px;font-size: 13px">
                        <thead>
                            <tr>
                                <th style="width: 2%">#ID</th>
                                <th style="width: 18%">{{__("Unbooked Items")}}</th>
                                <th style="width: 18%">{{__("Unbooked Items Number")}}</th>
                                <th style="width: 18%">{{__("Unit")}}</th>
                                <th style="width: 18%">{{__("Type")}}</th>
                                <th style="width: 10%">{{__("Unbooked Qunatity")}}</th>
                                <th style="width: 10%">{{__("Order Qunatity")}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                            $count = 0;
                            @endphp
                            @foreach($orderItems as $order)
                            <tr>
                                <td>{{++$count}}</td>
                                <td>{{$order->item->name}}</td>
                                <td>{{$order->item->getItemCode()}}</td>
                                <td>{{$order->item->unit->unit_name}}</td>
                                <td>{{$order->item->type->type}}</td>
                                <td>{{$order->quantity}}</td>
                                <td>{{$main_quantity}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section("scripts")

<!-- Data table plugin-->
<script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
<script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
<script type="text/javascript">
    $('#sampleTable').DataTable({
        "bPaginate": false,
        "bInfo": false
    });
</script>
<!-- Google analytics script-->
<script type="text/javascript">
    $("#store").select2({
        placeholder: "{{__('select-store')}}",
        width: "100%",
    });
    $("#sales_order_id").select2({
        placeholder: "{{__('select-sales_order_number')}}",
        width: "100%",
    });
</script>
@endsection