@extends('dashboard.layouts.default')
<!-- breadcrumb -->

<!-- breadcrumb -->
@section('content')
    <!-- row -->
    <!-- row opened -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">{{t_('financial settlements')}}</h4>
            </div>
        </div>
    </div>
    <div class="row row-sm">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">

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

                        <div class="col-md-2">
                            <label for="from">{{t_('Date From:')}}</label>
                            <input type="datetime-local" name="from" id="from" class="form-control">
                        </div>
                        <div class="col-md-2">
                            <label for="to">{{t_('Date to:')}}</label>
                            <input type="datetime-local" name="to" id="to" class="form-control">
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-primary-gradient col-md-12 submit">{{t_('search')}}</button>
                        </div>
                        <form class="col-md-2" method="post"
                              action="{{route('dashboard.settlement',['id'=>$store->id])}}" id="ids">
                            @csrf
                            <div id="inputs"></div>
                            <input type="hidden" name="total" id="total">
                            <button type="submit"
                                    class="btn btn-success-gradient col-md-12">{{t_('settlement')}}</button>
                        </form>
                        <div class="col-md-1 text-center d-flex align-items-center">
                            <label for="check-all" class="mt-3">{{t_('check all')}}</label>
                            <input type="checkbox" id="check-all" class="col-md-3 check-all mt-2">
                        </div>
                    </div>
                    <div class="tablepre card col-md-12 mt-5">

                    </div>
                    <div class="col-md-2">
                        {{--                        <span class="badge badge-secondary m-2 px-4 py-2 fs-5 total"><b>{{t_('total')}}: </b></span>--}}
                        <p class="invoice-info-row total"><b>{{t_('total').': '}} </b> 0</p>
                    </div>

                </div><!-- bd -->
            </div><!-- bd -->
        </div>
    </div>
    <!-- row closed -->

    <!-- Container closed -->

    <!-- main-content closed -->
@endsection
@push('scripts')

    <script>

        $(document).on('click', '.submit', function () {

            let from = $('#from').val();
            let to = $('#to').val();

            $.ajax({
                url: '{{route('dashboard.settlement', $store->id)}}',
                type: 'get',
                data: {
                    from: from,
                    to: to,
                },
                success: function (data) {
                    $('.tablepre').html(data.html)
                }
            });

        })
        {{--$(document).on('click', '.settle', function () {--}}


        {{--    --}}{{--$.ajax({--}}
        {{--    --}}{{--    url: '{{route('dashboard.settlement', $store->id)}}',--}}
        {{--    --}}{{--    type: 'get',--}}
        {{--    --}}{{--    data: {--}}
        {{--    --}}{{--        from: from,--}}
        {{--    --}}{{--        to: to,--}}
        {{--    --}}{{--    },--}}
        {{--    --}}{{--    success: function (data) {--}}
        {{--    --}}{{--        $('.tablepre').html(data.html)--}}
        {{--    --}}{{--    }--}}
        {{--    --}}{{--});--}}

        {{--})--}}

        function calcTotal(boxes) {
            let prices = [];
            boxes.each(function (e) {
                if ($(this).prop('checked') === true) {
                    let price = $(this).data('price')
                    prices.push(price)
                }
            })
            let total = prices.reduce((a, b) => a + b, 0)
            $('#total').val('')
            $('#total').val(total)
            $('.total').empty().append('<b>{{t_("total")}}: </b> <span>' + total + ' {{t_('R.S')}}</span>')
        }

        function checkViewAll(boxes) {
            if (boxes.length > 0) {
                $("#check-all").prop('checked', false)
            } else {
                $("#check-all").prop('checked', true)
            }
        }

        $(document).on('change', '.change-settle', function () {
            let id = $(this).data('id');
            if ($(this).is(":checked")) {
                $('#inputs').append(`<input id="order-${id}" type="hidden" name="ids[]" value="${id}">`)
            } else {
                $('#order-' + id).remove()
            }
            let boxes = $('.waiting');
            calcTotal(boxes)
            let matches = $("input.waiting:checkbox:not(:checked)");
            checkViewAll(matches)
        });
        $("#check-all").click(function () {
            $('#inputs').empty()
            let boxes = $('.waiting');
            boxes.prop('checked', this.checked);
            boxes.each(function () {
                let id = $(this).data('id');
                if ($(this).is(":checked")) {
                    $('#inputs').append(`<input id="order-${id}" type="hidden" name="ids[]" value="${id}">`)
                } else {
                    $('#order-' + id).remove()
                }
            });
            calcTotal(boxes)
        });
    </script>
    <!-- Internal Data tables -->
    <script src="{{ asset('dashboard/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/dataTables.dataTables.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/responsive.dataTables.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/jszip.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/datatable/js/responsive.bootstrap4.min.js') }}"></script>
    <!--Internal  Datatable js -->
    <script src="{{ asset('dashboard/js/table-data.js') }}"></script>
    <!--Internal  Notify js -->
    <script src="{{ asset('dashboard/plugins/notify/js/notifIt.js') }}"></script>
    <script src="{{ asset('/plugins/notify/js/notifit-custom.js') }}"></script>

@endpush