@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>{{__("Sales Orders History")}} </h1>
            <p>{{__("all-sales-orders-history")}}</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="#">{{__("sales-orders")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
    @include("includes.dialog")

{{--    <div class="row" id="dataTable">--}}
{{--        <div class="col-md-12">--}}
{{--            <div class="tile">--}}
{{--                <div class="tile-body">--}}
{{--                    <div class="table-responsive">--}}
{{--                        <ul id="myUL">--}}
{{--                            <li><span class="caret">Beverages</span>--}}
{{--                                <ul class="nested">--}}
{{--                                    <li>Water</li>--}}
{{--                                    <li>Coffee</li>--}}
{{--                                    <li><span class="caret">Tea</span>--}}
{{--                                        <ul class="nested">--}}
{{--                                            <li>Black Tea</li>--}}
{{--                                            <li>White Tea</li>--}}
{{--                                            <li><span class="caret">Green Tea</span>--}}
{{--                                                <ul class="nested">--}}
{{--                                                    <li>Sencha</li>--}}
{{--                                                    <li>Gyokuro</li>--}}
{{--                                                    <li>Matcha</li>--}}
{{--                                                    <li>Pi Lo Chun</li>--}}
{{--                                                </ul>--}}
{{--                                            </li>--}}
{{--                                        </ul>--}}
{{--                                    </li>--}}
{{--                                </ul>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--<input onclick="window.print()" value="Print">--}}

    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 5px 5px 5px 5px">
                <div class="tile-body">
                    <h4 style="margin: 5%;color: var(--primary-second)">{{__("Total Adjustments " . ": ". $count)}}</h4>
                    @php
                        $adjustment_number =0;
                    @endphp
                    @foreach($vouchers_history as $key => $voucher)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="tile" style="padding: 5px 5px 5px 5px; margin: 3%" >
                                <h3>{{ ++$adjustment_number ."- ". "Date of Update" .": ". $voucher->created_at}}</h3>
                                    <br>
                                    <h6 class="mb-3">{{__("Voucher Info:")}}</h6>
                                    <div class="row">
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("number") . ":" }} </span> {{$voucher["number"] }}</div>
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("date") . ":"}}</span>{{$voucher["date"] }}</div>
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("classification") . ":"}} </span> {{$voucher->classification->name }} </div>
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("client-name") . ":"}}</span> {{$voucher->client->{\Illuminate\Support\Facades\App::getLocale()."_name"} }}</div>
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("representative-name") . ":"}}</span>{{$voucher->representative->name }}</div>
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("purchase-order-number") . ":"}}</span>{{$voucher["purchase_order_number"] }} </div>
                                        <div class="col-lg-4"><span style="font-weight: bold;color: var(--primary-second)">{{__("store") . ":"}} </span>{{$voucher->store->name }}</div>
                            </div>
                            <div class="table-responsive-sm">
                                <br>
                                <h6 class="mb-3">{{__("Voucher Details:")}}</h6>

                                <table class="table table-striped" id="mainTable">
                                    <thead>
                                        <tr>
                                            <th style="width: 1%">#</th>
                                            <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                                            <th style="width: 20%">{{__('item')}}<span class="required"></span></th>
                                            <th style="width: 3%">{{__('unit')}}</th>
                                            <th style="width: 2%">{{__('quantity')}}<span class="required"></span></th>
                                            <th style="width: 4%">{{__('unit-price')}}<span class="required"></span></th>
                                            <th style="width: 2%">{{__('total')}}</th>
                                            <th style="width: 12%">{{__('notes')}}</th>
                                            <th style="width: 1%">{{__('Sub Items')}}</th>
                                        </tr>


                                    </thead>
                                    <tbody>


                                @foreach($voucher->voucherDetailsHistory as $key => $details)
                                    <tr >
                                        <td>{{++$key}} </td>
                                        <td>{{$details->item->getItemCode()}}</td>
                                        <td>{{$details->item->name}}</td>
                                        <td>{{$details->item->unit->unit_name}}</td>
                                        <td>{{$details->quantity}}</td>
                                        <td>{{$details->price . " SAR"}}</td>
                                        <td>{{$details->price * $details->quantity}}</td>
                                        <td>{{$details->notes}}</td>
                                        <td>
                                            <input type="button" class="btn btn-primary" data-toggle="modal" data-type="new_item" data-target=".bd-example-modal-lg{{$details->id}}" value="{{__("Show")}}">
                                            <div class="modal fade bd-example-modal-lg{{$details->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="table-responsive-sm">
                                                            <table class="table table-striped">
                                                                <thead>
                                                                <tr>
                                                                    <th style="width: 1%">#</th>
{{--                                                                    <th style="width: 3%"></th>--}}
                                                                    <th style="width: 3%">{{__('code')}}<span class="required"></span></th>
                                                                    <th style="width: 8%">{{__('sub item')}}<span class="required"></span></th>
                                                                    <th style="width: 1%">{{__('quantity')}}<span class="required"></span></th>
                                                                    <th style="width: 3%">{{__('created_at')}}<span class="required"></span></th>
                                                                </tr>

                                                                </thead>
                                                                <tbody>

                                                                @php
                                                                $salesOrderSubItemsHistory =$details->salesOrderSubItemsHistory;
                                                                $total_quantity = $salesOrderSubItemsHistory->pluck("quantity")->sum();
                                                                @endphp
                                                                @foreach($details->salesOrderSubItemsHistory as $key => $subitem)

                                                                    <tr>
                                                                        <td>{{++$key}}</td>
                                                                        <td>{{$subitem->item->getItemCode()}}</td>
                                                                        <td>{{$subitem->item->name}}</td>
                                                                        <td>{{$subitem['quantity']}}</td>
                                                                        <td>{{$subitem['created_at']->diffForHumans()}}</td>
                                                                    </tr>
                                                                @endforeach
                                                                </tbody>
                                                            </table>

                                                            <div class="row">
                                                                <div class="col-lg-6 col-sm-5 ml-auto">
                                                                    <table class="table table-clear">
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="left">
                                                                                <strong>{{__("Total Quantity")}}</strong>
                                                                            </td>
                                                                            <td class="right" style="font-weight: bold;color: green">{{$total_quantity}}</td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>

                                                                </div>
                                                            </div>


                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                @endforeach


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    @endforeach
                </div>
            </div>
        </div>
    </div>


@endsection

@section("scripts")
    <!-- https://stackoverflow.com/questions/17832742/how-to-remove-pagination-in-datatable -->
    <!-- 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>
    <script type="text/javascript">$('#emptyTable').DataTable();</script>
    <script>
        var toggler = document.getElementsByClassName("caret");
        var i;

        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function() {
                this.parentElement.querySelector(".nested").classList.toggle("active");
                this.classList.toggle("caret-down");
            });
        }
    </script>
@endsection