@extends('admin/layouts/master')

@section('title')
    {{ config()->get('app.name') }} | {{ $bladeName }}
@endsection
@section('page_name')
    {{ $bladeName }}
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row w-100">
                        <div class="col-3">
                            <label for="vendorSelection"> {{ trns('search by vendor ') }}</label>
                            <select class="form-control" id="vendorSelection">
                                <option value="show_all">{{ trns('show_all') }}</option>
                                @foreach ($vendors as $vendor)
                                    <option value="{{$vendor}}">{{ $vendor }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <label for="ProcessSelection"> {{ trns('search by process ') }}</label>
                            <select class="form-control" id="ProcessSelection">
                                <option value="show_all">{{ trns('show_all') }}</option>
                                <option value="pending">pending</option>
                                <option value="complete">complete</option>
                            </select>
                        </div>
                        <div class="col-3">
                            <label for="clientCount">{{ trns('client Count') }}</label>
                            <input type="number" class="form-control  " id="clientCount" placeholder="{{ trns('client_Count') }}">
                        </div>
                        <div class="col-3">
                            <label for="totalPrice">{{ trns('total Price') }}</label>
                            <input type="number" class="form-control  " id="totalPrice" placeholder="{{ trns('total_Price') }}">
                        </div>
                    </div>
                    <h3 class="card-title"> </h3>
                   

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table table-bordered text-nowrap w-100" id="dataTable">
                            <thead>
                                <tr class="fw-bolder text-muted bg-light">
                                    <th class="min-w-25px">
                                        <input type="checkbox" id="select-all">
                                    </th>
                                    <th class="min-w-25px">#</th>
                                    <th class="min-w-25px">{{ trns('user_name') }}</th>
                                    <th class="min-w-25px">{{ trns('client_count') }}</th>
                                    <th class="min-w-25px">{{ trns('total_price') }}</th>
                                    <th class="min-w-25px">{{ trns('discount') }}</th>
                                    <th class="min-w-25px">{{ trns('total_price_after_vat') }}</th>
                                    <th class="min-w-25px">{{ trns('process') }}</th>
                                    <th class="min-w-25px">{{ trns('way_service_id') }}</th>
                                    <th class="min-w-25px">{{ trns('vendor_id') }}</th>
                                    <th class="min-w-25px">{{ trns('date') }}</th>
                                    {{--                                <th class="min-w-50px rounded-end">{{ trns('actions') }}</th> --}}
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!--Delete MODAL -->
        <div class="modal fade" id="delete_modal" 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">{{ trns('delete') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input id="delete_id" name="id" type="hidden">
                        <p>{{ trns('are_you_sure_you_want_to_delete_this_obj') }} <span id="title"
                                class="text-danger"></span>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal" id="dismiss_delete_modal">
                            {{ trns('close') }}
                        </button>
                        <button type="button" class="btn btn-danger" id="delete_btn">{{ trns('delete') }} !</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- MODAL CLOSED -->

        <!-- Create Or Edit Modal -->
        <div class="modal fade" id="editOrCreate" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="example-Modal3">{{ trns('object_details') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="modal-body">

                    </div>
                </div>
            </div>
        </div>
        <!-- Create Or Edit Modal -->

        <!-- delete selected  Modal -->
        <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
            aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">{{ trns('confirm_deletion') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ trns('are_you_sure_you_want_to_delete_selected_items') }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ trns('cancel') }}</button>
                        <button type="button" class="btn btn-danger"
                            id="confirm-delete-btn">{{ trns('delete') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- delete selected  Modal -->


        <!-- update cols selected  Modal -->
        <div class="modal fade" id="updateConfirmModal" tabindex="-1" role="dialog"
            aria-labelledby="updateConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">{{ trns('confirm_change') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ trns('are_you_sure_you_want_to_update_selected_items') }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ trns('cancel') }}</button>
                        <button type="button" class="btn btn-send"
                            id="confirm-update-btn">{{ trns('update') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- delete selected  Modal -->
    </div>
    @include('admin/layouts/myAjaxHelper')
@endsection
@section('ajaxCalls')
    <script>
        var columns = [{
                data: 'checkbox',
                name: 'checkbox',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `<input type="checkbox" class="delete-checkbox" value="${row.id}">`;
                }
            },
            {
                data: 'id',
                name: 'id'
            },
            {
                data: 'user_name',
                name: 'user_name'
            },

            {
                data: 'client_count',
                name: 'client_count'
            }, {
                data: 'total_price',
                name: 'total_price'
            }, {
                data: 'discount',
                name: 'discount'
            },
            {
                data: 'total_price_after_vat',
                name: 'total_price_after_vat'
            },
            {
                data: 'process',
                name: 'process'
            },

            {
                data: 'way_service_id',
                name: 'way_service_id'
            },
            {
                data: 'vendor_id',
                name: 'vendor_id'
            },
            {
                data: 'date',
                name: 'date'
            },
            // {
            //     data: 'action',
            //     name: 'action',
            //     orderable: false,
            //     searchable: false
            // },
        ]
        showData('{{ route($route . '.index') }}', columns);

        // Delete Using Ajax

        {{-- deleteScript('{{ route($route . '.destroy', ':id') }}'); --}}
        {{-- deleteSelected('{{ route($route . '.deleteSelected') }}'); --}}
        {{-- updateColumnSelected('{{ route($route . '.updateColumnSelected') }}'); --}}

        // Add Using Ajax
        {{-- showAddModal('{{ route($route . '.create') }}'); --}}
        // addScript();
        // Add Using Ajax
        {{-- showEditModal('{{ route($route . '.edit', ':id') }}'); --}}
        // editScript();
    </script>

    <script>
        // for status
        $(document).on('click', '.statusBtn', function() {
            let id = $(this).data('id');

            var val = $(this).is(':checked') ? 1 : 0;
            let ids = [id];
            $.ajax({
                type: 'POST',
                url: '{{ route($route . '.updateColumnSelected') }}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    'ids': ids,
                },
                success: function(data) {
                    if (data.status === 200) {
                        if (val !== 0) {
                            toastr.success('Success', "");
                        } else {
                            toastr.warning('Success', "");
                        }
                    } else {
                        toastr.error('Error', "");
                    }
                },
                error: function() {
                    toastr.error('Error', "{{ trns('something_went_wrong') }}");
                }
            });
        });
    </script>

    <script>
        $(document).on("input", "#clientCount", function() {
            let number = $(this).val().trim();
            let table = $('#dataTable').DataTable();

            if (number === "") {
                table.columns().search('').draw();
            } else {
                table.column(3).search("^" + number + "$", true, false).draw();
            }
        });
        // total price filter
        $(document).on("input", "#totalPrice", function() {
            let number = $(this).val().trim();
            let table = $('#dataTable').DataTable();

            if (number === "") {
                table.columns().search('').draw();
            } else {
                table.column(4).search("^" + number + "$", true, false).draw();
            }
        });


        {{--        search by process --}}
        $(document).on("change", "#ProcessSelection", function() {
            let place = $(this).find("option:selected").val();
            let table = $('#dataTable').DataTable();

            if (place === "show_all") {
                table.columns().search('');
                table.ajax.reload();
            } else {
                table.column(7).search(place).draw();
            }
        });
        {{--        vendor --}}
        $(document).on("change", "#vendorSelection", function() {
            let vendor = $(this).find("option:selected").val();
            let table = $('#dataTable').DataTable();

            if (vendor === "show_all") {
                table.columns().search('');
                table.ajax.reload();
            } else {
                table.column(9).search(vendor).draw();
            }
        });
    </script>

    <script>
        $('#vendorSelection,#ProcessSelection').select2({


        });
    </script>
@endsection