@extends('admin.layout.master')
@push('css')
    <style>
        tr td:last-child {
            display: inline-flex !important;
        }
        .select2 {
            width: 250% !important;
        }
        .pointer {
            cursor: pointer;
        }
        #products_length {
            position: absolute;
            right: 60%;
            top: 17px;
        }

    </style>
@endpush
@section('content')
    <main id="app-main" class="app-main">

        <div class="wrap">
            <section class="app-content">
                <h3>@lang('admin.products')</h3>
            </section><!-- #dash-content -->
        </div><!-- .wrap -->

        <div class="col-md-12">
            <div class="widget">
                <header class="widget-header">
                    <h4 class="widget-title">@lang('admin.products')</h4>
                </header><!-- .widget-header -->
                <hr class="widget-separator">
                <div class="widget-body">
                    <div class="table-responsive">
                        <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                            <div class="row">
                                <form action="{{ route('orders_report_print') }}" method="get" id="print_form" target="_blank">
                                    @csrf
                                </form>

                                <div class="col-md-3" style="float: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                    <div class="form-group">
                                        <label for="id">@lang('admin.Id')</label>
                                        <input type="number" id="ProductId" name="ProductId" class="form-control" value="">
                                    </div>
                                </div>

                                <div class="col-md-3" style="float: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">

                                    <div class="form-group">
                                        <div class="input-group date" id="datetimepicker1">
                                            <label for="from_date">@lang('admin.from_date')</label>
                                            <input type="text" form="print_form" class="form-control" id="from_date"
                                                   name="from_date"
                                                   value="">
                                            <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button" style="margin-top: 25px;"><i
                                                            class="fa fa-calendar"></i></button>
                                                </span>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="col-md-3" style="float: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
            
                                    <div class="form-group">
                                        <div class="input-group date" id="datetimepicker2">
                                            <label for="to_date">@lang('admin.to_date')</label>
                                            <input type="text" form="print_form" class="form-control" id="to_date" name="to_date"
                                                   value="">
                                            <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button" style="margin-top: 25px;"><i
                                                            class="fa fa-calendar"></i></button>
                                                </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3" style="float: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                    <div class="form-group">
                                        <button type="button" id="btnFiterSubmitSearch"
                                                class="btn btn-info"
                                                style="margin-top: 0px; float: {{ app()->getLocale() == 'ar' ? 'left' : '' }}">@lang('admin.filter')</button>
                                    </div>
                                </div>

                            </div>

                            <br>
                           

                     
                            <div class="row">
                                <div class="col-md-12">
                                            <div class="widget">

                                                <div class="widget-body">
                                                    <table id="products" class="table table-striped table-bordered" style="width:100%">
                                                    </table>
                                                </div>
                                            </div><!-- .widget-body -->
                                        </div><!-- .widget -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="note" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">ملاحظات</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{route('change-note')}}" method="post" id="form-fr">
                        @csrf
                        @method('post')
                        <input type="hidden" name="id" id="noteId" value="">

                    <div class="modal-body">
                        <p id="datanote">

                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('admin.close')</button>
                                                            <button type="submit" class="btn btn-primary">@lang('admin.edit')</button>
                    </div>


                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection
@push('js')
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.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/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

$('#datetimepicker1').datetimepicker();
        $('#datetimepicker2').datetimepicker();


        $('#btnFiterSubmitSearch').click(function () {
            $('#products').DataTable().draw(true);
        });

        $(document).ready(function() {


            var table = $('#products').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                bStateSave: true,
                stateSave: true,
                bFilter: false,


                sPaginationType: "full_numbers",

                ajax: {
                    url: "{{ route('finished-task',request()->id)}}",
                    type: 'GET',
                    data: function (d) {
                        d.ProductId = $('#ProductId').val();
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();


                    }
                },
                dom: 'Blfrtip',
                buttons: [
                    'copy', 'excel', 'print'
                ],
                lengthMenu: [
                    [10, 25, 50, -1], [10, 25, 50, "All"]

                ],
                // select: true,
                columns: [



                    {data: 'id', name: 'id' ,title:'id'},
                    {data: 'code', name: 'code' ,title:'code'},
                      @if (auth()->user()->hasRole('super_admin') == 'true' )
                    {data: 'user_created', name: 'user_created',title: "@lang('admin.user_created')" },
                    @endif

                    {data: 'image', name: 'image',title: "@lang('admin.image')" },
                    {data: 'name', name: 'product.name',title: "@lang('admin.name')" },
                    {data: 'mainprice', name: 'mainprice',title: "@lang('admin.price')" },
                    {data: 'priceafterdisc', name: 'priceafterdisc',title: "@lang('admin.priceafterdisc')" },
                    {data: 'precentdiscount', name: 'precentdiscount',title: "@lang('admin.discount')" },
                        @if (auth()->user()->hasRole('super_admin') == 'true' )
                          {data: 'updated_at', name: 'updated_at',title: "@lang('admin.updated_at')" },
                          @endif
                    {data: 'status', name: 'status',title: "@lang('admin.status')" },
                    {data: 'action', name: 'action',title:'action' ,searchable: 'false'},


                    // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
                ]
                // footerCallback: function (tfoot, data, start, end, display) {
                //     var api = this.api();
                //     // var api = this.api(), data;
                //     //
                //     // // Remove the formatting to get integer data for summation
                //     // var intVal = function ( i ) {
                //     //     return typeof i === 'string' ?
                //     //         i.replace(/[\$,]/g, '')*1 :
                //     //         typeof i === 'number' ?
                //     //             i : 0;
                //     // };
                //     // total = api
                //     //     .column( 10 )
                //     //     .data()
                //     //     .reduce( function (a, b) {
                //     //         return intVal(a) + intVal(b);
                //     //     }, 0 );
                //     // $('#total').html(total);
                //
                //     this.api().columns(10).every(function () {
                //         var column = this;
                //
                //         var sum = column
                //             .data()
                //             .reduce(function (a, b) {
                //                 var x = parseFloat(a) || 0;
                //                 var y = parseFloat(b) || 0;
                //                 return x + y;
                //             }, 0);
                //         $('#total').html(sum);
                //     });
                // }
            });

            $('body').on('submit','#delform',function (e) {
                e.preventDefault();
                var url = $(this).attr('action');

                $.ajax({
                    url: url,
                    method: "post",
                    data: new FormData(this),

                    dataType: 'json',

                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (response) {

                        if (response.status == 'true'){
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "تم الحذف بنجاح",
                                timeout: 2000,
                                killer: true
                            }).show();
                            table.ajax.reload(null, false);
                        }
                        // console.log(response);
                        // window.location.reload();
                    }
                });
            });

            $('body').on('click','#showNote',function (e){
                e.preventDefault();
                var note = $(this).data('note');
                var id = $(this).data('id');

                $('#datanote').empty();
                $('#noteId').val(id);
                $('#datanote').append(`
                    <textarea name="note" class="form-control">${note}</textarea>
                `);

            });

            $('body').on('submit','#form-fr',function (e){
                e.preventDefault();
                var url = $(this).attr('action');

                $.ajax({
                    url: url,
                    method: "post",
                    data: new FormData(this),
                    dataType: 'json',

                    cache: false,
                    contentType: false,
                    processData: false,

                    success: function (response) {
                        if (response.status == "true"){
                            swal("تم التعديل بنجاح", {
                                buttons: false,
                                icon: "success",
                                timer: 1500,
                            });

                            table.ajax.reload(null, false);

                        }
                        // window.location.reload();
                    },

                });


            });
        });


    </script>
@endpush