@extends("WarehouseDashboard.layouts.dashboard.app")

@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{__('Documents')}}</h1>
        </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="#"></a></li>
        </ul>
    </div>
@endsection
@section("content")
    @include("layouts.main-parts.page-message")

    <div class="row">
        <div class="col-md-12">
            <div class="tile">
              <div class="col-4">
                <form action="{{route("Document.index")}}">
                <div class="form-group">
                    <label for="exampleSelect1">{{__('Select document type')}}</label>
                    <select class="form-control" id="exampleSelect1" onchange="this.form.submit()" name="type">
                        <option value="">None</option>
                        <option {{Request()->type == 1 ?"selected":""}} value="1">{{__('Production document')}}</option>
                        <option {{Request()->type == 2 ?"selected":""}} value="2">{{__('Delivery document')}}</option>
                        <option {{Request()->type == 2 ?"selected":""}} value="2">{{__('Delivery document')}}</option>
                    </select>
                </div>
                </form>
              </div>

                <div class="tile-body">
                    <div class="tile">
                        <form action="{{Route("Document.create")}}" >

                       @if(!empty($orders) )
                           @if(Request()->type == 1)
                        <button class="btn btn-primary" type="submit">{{__("Create Production Document")}}</button>
                               <input type="hidden" value="{{request()->type}}" name="type">
                            @else
                                <button class="btn btn-primary" type="submit">{{__("Create Delivery Document")}}</button>
                                    <input type="hidden" value="{{request()->type}}" name="type">
                                @endif
                       @endif
                            <input type="hidden" name="order_ids" value="{{json_encode($order_ids)}}">
                        <div class="col-lg-12 p-4 text-right" id="export">
                        </div>
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-striped" id="table">
                                    <thead>
                                     <tr>
                                         <th></th>
                                         <th>{{__('Item Code')}}</th>
                                         <th>{{__('Item English Name')}}</th>
                                         <th>{{__('Item Arabic Name')}}</th>
                                         <th>{{__('Inventory Quantity')}}</th>
                                         <th>{{__('Quantity')}}</th>
                                         <th>{{__('production quantity')}}</th>
                                     </tr>
                                    </thead>
                                    <tbody id="tbody">
                                    @if(!empty($orders))
                                    @foreach($orders as $index => $order)
                                        <tr>
                                            <td><a class="btn btn-primary" data-toggle="collapse" href="#collapse{{$order->id}}" role="button" aria-expanded="false" aria-controls="collapse{{$order->id}}">+</a></td>
                                            <td>{{$order->item_code}}</td>
                                            <td>{{$order->name_en}}</td>
                                            <td>{{$order->name_ar}}</td>
                                            <td>{{$order->inventory_quantity}}</td>
                                            <td>{{$order->quantity}}</td>
                                            <input type="hidden" name="items[]"  value="{{$order->id}}"  >
                                            <td>
                                                <input class="form-control"  type="number" name="pq[]" step="0.01" min="1" value="{{abs($order->inventory_quantity-$order->quantity)}}">
                                            </td>
                                        <tr>
                                            <td colspan="8">
                                                <div class="collapse" id="collapse{{$order->id}}">
                                                    <div class="card card-body">
                                                        <div class="table-responsive">
                                                            <table class="table table-striped" id="table">
                                                                <thead>
                                                                <tr>
                                                                    <th></th>
                                                                    <th>{{__('Item Code')}}</th>
                                                                    <th>{{__('Item English Name')}}</th>
                                                                    <th>{{__('Item Arabic Name')}}</th>
                                                                    <th>{{__('Unit')}}</th>
                                                                    <th>{{__('Inventory Quantity')}}</th>
                                                                    <th>{{__('Quantity')}}</th>
                                                                    <th>{{__('production quantity')}}</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody id="tbody">
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tr>

                                    @endforeach
                                    @else
                                        <td colspan="8"><div class="text-center">{{__("No data yet")}}</div></td>
                                    @endif
                                    </tbody>
                                </table>

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


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



            @endsection
            @section("scripts")
                <!-- Data table plugin-->
                <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
                <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 src="https://cdn.datatables.net/buttons/2.3.4/js/dataTables.buttons.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
                <script src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.html5.min.js"></script>
                <script src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.print.min.js"></script>
                <script type="text/javascript">
                    // let table = $('#sampleTable').DataTable();
                    // $("#status-filter").on("change",function (){
                    //     table.column(3).search($(this).val()).draw();
                    // });

                </script>
                <!-- Google analytics script-->
                <script type="text/javascript">
                    if(document.location.hostname == 'pratikborsadiya.in') {
                        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                        ga('create', 'UA-72504830-1', 'auto');
                        ga('send', 'pageview');
                    }
                </script>
                <script type="text/javascript">
                    $(".download-excel").click(function (e){
                        e.preventDefault();
                        console.log("ss");
                        let status = $("#status-filter option:selected").data("value");
                        $(this).siblings("input[name='status']").val(status);
                        $("#form-excel").submit();

                    });

                </script>
                <script>
                    $("#Status").on("change", function (){
                        filter();
                    })
                    $("#branch").on("change", function (){
                        filter();
                    })
                    $("#start-date").on("change", function (){
                        filter();
                    })
                    $("#end-date").on("change", function (){
                        filter();
                    })

                    function filter()
                    {
                        let  url = $(this).data("url"),
                            status = $("#Status").val(),
                            startDate = $('#start-date').val(),
                            endDate = $('#end-date').val(),
                            branch = $('#branch').val()
                        let route = '{{route('filter', [':status', ':branch'])}}';

                        if(status){
                            route = route.replace(':status', status)
                        }else{
                            route = route.replace(':status', 'all')
                        }
                        if(branch){
                            route = route.replace(':branch', branch)
                        }else{
                            route = route.replace(':branch', 'all')
                        }
                        if(startDate){
                            route = route + "/" + startDate
                        }

                        if(endDate){
                            if(!startDate){
                                route = route + "/all"
                            }

                            route = route + "/" + endDate
                        }
                        window.location.href = route
                    }

                </script>








                <!--Internal  Datatable js -->
                <script>

{{--                    let reportTitle = "Day " + new Date().toLocaleDateString()--}}
{{--                    $(document).ready(function() {--}}
{{--                        $('#table').DataTable({--}}
{{--                            lengthChange: false,--}}
{{--                            paging:false,--}}
{{--                            columnDefs: [--}}
{{--                                { orderable: false, targets: [0,1,2,3,4,5] }--}}
{{--                            ],--}}
{{--                            // order: [[0, 'asc']],--}}
{{--                            buttons: [--}}
{{--                                {--}}
{{--                                    text: ` <i class="far fa-fw fa-lg  fa-file-excel text-left"></i> {{__('Export As Excel')}}`,--}}
{{--                                    extend: 'excelHtml5',--}}
{{--                                    messageTop: reportTitle,--}}
{{--                                    className: 'btn  btn-primary',--}}
{{--                                    title: "Document Number: {{$document->document_number}}"--}}
{{--                                }--}}
{{--                            ],--}}
{{--                            responsive: false,--}}
{{--                        }).buttons().container().appendTo( '#export' );--}}
{{--                    } );--}}
                </script>
@endsection