@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="col-6">
                        <label for="statusSelection"> {{ trns('filter by status') }}</label>
                        <select class="form-control m-2" name="status" id="statusSelection">
                            <option value="show all" selected>{{ trns('show_all') }}</option>
                            <option value="active">{{ trns('active') }}</option>
                            <option value="inactive">{{ trns('inactive') }}</option>
                        </select>
                    </div>
                    <h3 class="card-title"></h3>
                    <div class="row">
                        <div class="">
<!-- 
                            @can('update_offer')
                                <button class="btn btn-secondary btn-icon text-white" id="bulk-update">
                                    <span style="font-size: 16px"><i class="fa fa-edit"></i></span>
                                </button>
                            @endcan -->
                        </div>
                    </div>
                </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('image') }}</th>
                                    <th class="min-w-25px">{{ trns('title') }}</th>
                                    <th class="min-w-25px">{{ trns('description') }}</th>
                                    <th class="min-w-25px">{{ trns('from') }}</th>
                                    <th class="min-w-25px">{{ trns('to') }}</th>
                                    <th class="min-w-25px">{{ trns('vendor') }}</th>
                                    <th class="min-w-25px">{{ trns('discount') }}</th>
                                    <th class="min-w-25px">{{ trns('status') }}</th>
                                    <th class="min-w-25px">{{ trns('on') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 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>

    </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',
                visible: false
            },
            {
                data: 'image',
                name: 'image'
            },
            {
                data: 'title',
                name: 'title'
            },
            {
                data: 'description',
                name: 'description'
            },
            {
                data: 'from',
                name: 'from'
            },
            {
                data: 'to',
                name: 'to'
            },
            {
                data: 'vendor_id',
                name: 'vendor_id'
            },
            {
                data: 'discount',
                name: 'discount'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'on',
                name: 'on'
            },
            // {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') }}', '{{ trns('create_offer') }}');
        addScript();
        // Add Using Ajax
        showEditModal('{{ route($route . '.edit', ':id') }}', '{{ trns('update_offer') }}');
        editScript();
    </script>

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

        $(document).on('click', '.offerRejectBtn', function() {
            let id = $(this).data('id');
            updateStatus(id, 2);
        });

        function updateStatus(id, value) {
            $.ajax({
                type: 'POST',
                url: '{{ route($route . ".updateColumnSelected") }}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    'ids': [id],
                    'value': value
                },
                success: function(data) {
                    if (data.status === 200) {
                        toastr.success('{{ trns("updated_successfully") }}');
                        $('#dataTable').DataTable().ajax.reload();
                    } else {
                        toastr.error('{{ trns("something_went_wrong") }}');
                    }
                },
                error: function() {
                    toastr.error('{{ trns("something_went_wrong") }}');
                }
            });
        }

        $(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("change", "#statusSelection", function() {
            let status = $(this).val();
            let table = $('#dataTable').DataTable();

            table.rows().every(function() {
                var row = this.node();
                var checkbox = $(row).find('.statusBtn');
                var shouldShow = false;

                if (status === 'show all') shouldShow = true;
                else if (status === 'active') shouldShow = checkbox.is(':checked');
                else if (status === 'inactive') shouldShow = !checkbox.is(':checked');

                $(row).toggle(shouldShow);
            });
        });
    </script>

    <script>
        $('#statusSelection').select2({});
    </script>
@endsection