@extends("layouts.app")
<style>
    .select2-container--open {
        z-index: 9999999
    }
</style>

@section("content")
    <div class="page">
        <div class="page-wrapper">
            <!-- Page header -->
            <div class="page-header d-print-none">
                <div class="container-xl">
                    <div class="row g-2 align-items-center">
                        <div class="col">
                            <h2 class="page-title">
                                Products
                            </h2>
                        </div>
                        <!-- Page title actions -->
                        <div class="col-auto ms-auto">
                            <div class="d-flex">
                                <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-discount">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-discount-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><circle cx="9.5" cy="9.5" r=".5" fill="currentColor" /><circle cx="14.5" cy="14.5" r=".5" fill="currentColor" /><path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7a2.2 2.2 0 0 0 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1a2.2 2.2 0 0 0 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1" /></svg>
                                    Add Discount
                                </a>
                            </div>
                        </div>
                        <div class="col-auto ms-auto">
                            <div class="d-flex">
                                <a href=" {{ route('product.create') }}" class="btn btn-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                                    New Product
                                </a>
                            </div>
                        </div>

                        <!----- Discount Modal ---->
                        <div class="modal modal-blur fade" id="modal-discount" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <form method="POST" id="apply-discount-modal-form" action="#">
                                        @csrf
                                    <div class="modal-header">
                                        <h5 class="modal-title">Apply Discount </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="form-label">Category</label>
                                                    <select class="form-select st-dropdown" data-placeholder="Select Category" name="category_id" id="category_id">
                                                        <option value=""></option>
                                                        @foreach($categories as $category)
                                                            <option value="{{ $category->id }}">{{ $category->title }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <div class="mb-3">
{{--                                                    <button class="btn btn-primary apply-discount-filter">Apply</button>--}}
                                                    <input type="button" class="btn btn-primary apply-discount-filter"
                                                           style="margin-right: 15px;"
                                                           value="Apply">
                                                    <input type="button" class="btn btn-primary clear-discount-filter"
                                                           value="Clear">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="form-label">Select Discount</label>
                                                    <select class="form-select st-dropdown" data-placeholder="Select Discount" name="discount_id" id="discount_id">
                                                        <option value=""></option>
                                                        @foreach($discounts as $discount)
                                                        <option value="{{ $discount->id }}">{{ $discount->title }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label>Start Time</label>
                                                    <input autocomplete="off" name="discount_datetime_start" class="form-control dateTimePicker" id="startDateTime"
                                                           placeholder="Select Start Time">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label>End Time</label>
                                                    <input autocomplete="off" name="discount_datetime_end" class="form-control dateTimePicker" id="endDateTime"
                                                           placeholder="Select end Time">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col-md-12">
                                                <div class="scrollable-orders">
                                                    <table class="table table-responsive table-striped table-hover table-bordered">
                                                        <thead>
                                                        <tr>
                                                            <th><input type="checkbox" class="apply-discount-all-chk"></th>
                                                            <th>ID</th>
                                                            <th>TITLE</th>
                                                            <th>Serving Size</th>
                                                            <th width="100">Price</th>
                                                            <th>Discount</th>
                                                            <th>Discounted Price</th>
                                                            <th>Discount Starting</th>
                                                            <th>Discount Ending</th>
                                                            <th>Active</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody class="discount-filtered-data-placeholder">

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary clear-discount-filter" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-success ms-auto">Submit</button>
                                        <button type="button" class="btn btn-danger removeDiscounts">Remove Discount</button>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!---Advance Search Filter--->
                        <div>
                            <a href="#" data-bs-toggle="collapse" data-bs-target="#advance-filters" class="btn btn-primary advance_filter">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path
                                        d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"/>
                                </svg>
                                Advance Filter
                            </a>
                            <form id="gridFilterForm">
                                <div id="advance-filters" class="collapse">
                                    <div class="page-body">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Search Filters</h3>
                                            </div>
                                            <div class="card-body">
                                                <div class="datagrid">
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">ID</div>
                                                        <div class="datagrid-content">
                                                            <input type="text" id="productId-filter" pattern="[0-9]" class="form-control" placeholder="Search ID">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Title</div>
                                                        <div class="datagrid-content">
                                                            <input type="text" id="productTitle-filter" class="form-control" autocomplete="off" placeholder="Search Title">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Category</div>
                                                        <div class="datagrid-content">
                                                            <select id="categoryFilter" data-placeholder="Select category"
                                                                    class="form-control select2Filter  filter-field">
                                                                <option value=""></option>
                                                                @foreach($categories as $category)
                                                                    <option value="{{$category->id}}">{{ $category->title }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">To - Create At</div>
                                                        <div class="datagrid-content">
                                                            <div class="d-flex align-items-center">
                                                                <input autocomplete="off" class="form-control datePicker" id="created_at_start" placeholder="Select a date">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">To - Update At</div>
                                                        <div class="datagrid-content">
                                                            <input autocomplete="off" class="form-control datePicker" id="created_at_end" placeholder="Select a date">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Is Active</div>
                                                        <div class="datagrid-content">
                                                            <select id="activeFilter" data-placeholder="Select status"
                                                                    class="form-control select2Filter  filter-field">
                                                                <option value=""></option>
                                                                <option value="1">Yes</option>
                                                                <option value="0">No</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-footer text-end">
                                                <button type="button"
                                                        class="btn btn-default pull margin-r-5  clearFilterDataTable"><i
                                                        class="fa fa-times-circle"></i>&nbsp;&nbsp;Clear
                                                </button>
                                                <button type="button"
                                                        class="btn btn-primary pull-right margin-r-5  submitFilterDataTable">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                                         stroke-linecap="round" stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                        <path
                                                            d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"/>
                                                    </svg> Filter
                                                </button>
                                                <div class="clearfix"></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!---End Search Filter---->

                    </div>
                </div>
            </div>
            <!-- Page body -->
            @include('admin.products.partials.product-list', ['rows' => $rows])
        </div>
    </div>
@endsection


@push("javascript")
    <script>
        var table;

        $(function() {

            $(".dateTimePicker").flatpickr({
                enableTime: true,
                minDate: "today",
                time_24hr: true,
            });

            $('.st-dropdown').select2({
                width: '100%',
                allowClear: true
            });

            table = initDataTable();

            $('.clearFilterDataTable').click(function () {
                var gridFilterForm = document.getElementById('gridFilterForm');
                gridFilterForm.reset();

                if ($(gridFilterForm).find('select').length > 0) {
                    $(gridFilterForm).find('select').val('');
                    $(gridFilterForm).find('select').change();
                }
                table = initDataTable();
            });

            $('.submitFilterDataTable').click(function () {
                table = initDataTable();
            });

            $(document).off('click', '.clear-discount-filter').on('click', '.clear-discount-filter', function () {
                $('.st-dropdown#category_id').val('').change();
                $('.st-dropdown#discount_id').val('').change();
                $('.discount-filtered-data-placeholder').empty();
                $('#apply-discount-modal-form')[0].reset()
                $('.apply-discount-all-chk').prop('checked', false);
            });

            $(document).off('click', '.apply-discount-filter').on('click', '.apply-discount-filter', function () {
                var url = '{{ route('product.get.filtered.data') }}';
                var category = $('.st-dropdown#category_id');
                var requestData = {};

                requestData['category_id'] = (category.length > 0) ? category.val() : 0;
                requestData['_token'] = '{{ csrf_token() }}';

                $.ajax({
                    url: url,
                    data: requestData,
                    type: 'POST',
                    success: function (response) {
                        if (response.error == true) {
                            toastr.error(response.message, '', {
                                timeOut: 5000,
                                'positionClass': 'toast-bottom-right'
                            });
                        }
                        $('.discount-filtered-data-placeholder').html(response.data);
                    }
                });
            });

            $(document).off('change', '.apply-discount-all-chk').on('change', '.apply-discount-all-chk', function () {

                var products = document.getElementsByClassName('apply-discount-chk');
                if (products.length > 0) {

                    if ($(this).is(':checked')) {
                        $(products).each(function () {
                            $(this).prop('checked', true).change();
                        });
                    } else {
                        $(products).each(function () {
                            $(this).prop('checked', false).change();
                        });
                    }
                } else {
                    toastr.error('No existing product(s) found', '', {
                        timeOut: 5000,
                        'positionClass': 'toast-bottom-right'
                    });
                    $(this).prop('checked', false).change();
                    return false;
                }
            });

            $(document).off('submit', '#apply-discount-modal-form').on('submit', '#apply-discount-modal-form', function (event) {
                event.preventDefault();
                var formData = $(this).serialize();
                var url = '{{ route('product.discount.update') }}';
                $('.pace-activity').show();
                $.ajax({
                    type: 'POST',
                    data: formData,
                    url: url,
                    success: function (response) {
                        $('.pace-activity').hide();
                        if (response.error) {
                            toastr.error(response.message, '', {
                                timeOut: 5000,
                                'positionClass': 'toast-bottom-right'
                            });
                        } else {
                            $('.apply-discount-filter').trigger('click');
                            $('.apply-discount-all-chk').prop('checked', false).change();
                            toastr.success(response.message, '', {
                                timeOut: 5000,
                                'positionClass': 'toast-bottom-right'
                            });
                        }
                    }
                })
            });

            $(document).off('click','.removeDiscounts').on('click','.removeDiscounts',function () {
                var productIds = document.getElementsByClassName('apply-discount-chk');
                if (productIds.length > 0){
                    var requestData = '';
                    $(productIds).each(function(){
                        if ($(this).is(":checked")) {
                            if (requestData.length > 0) {
                                requestData += "&" + $(this).attr('name') + '=' + $(this).val();
                            } else {
                                requestData = $(this).attr('name') + '=' + $(this).val();
                            }
                        }
                    });
                    if (requestData.length > 0){
                        requestData += '&_token={{ csrf_token() }}';

                        Swal.fire({
                            title: 'Warning',
                            type: 'warning',
                            text: 'Are you sure to remove discount?',
                            confirmButtonText: 'Confirm',
                            showCancelButton: true,
                        }).then((result) => {
                            if (result.value) {
                                $('.pace-activity').show();
                                $.ajax({
                                    type:'POST',
                                    url:'{{ route('product.discount.remove') }}',
                                    data:requestData,
                                    success:function (response) {
                                        $('.pace-activity').hide();
                                        if (!response.error) {
                                            $('.apply-discount-filter').trigger('click');
                                            $('.apply-discount-all-chk').prop('checked', false).change();
                                            $('.st-dropdown#discount_id').val('').change();
                                            toastr.success(response.message, '', {
                                                timeOut: 5000,
                                                'positionClass': 'toast-bottom-right'
                                            });
                                            // $('#apply-discount-modal-form')[0].reset()
                                        }else{
                                            toastr.error("Something went wrong please try again?", '', {
                                                timeOut: 5000,
                                                'positionClass': 'toast-bottom-right'
                                            });
                                        }
                                    }
                                });
                            }
                        });



                    } else{
                        toastr.error("Please select product(s) to remove discount", '', {
                            timeOut: 5000,
                            'positionClass': 'toast-bottom-right'
                        });
                    }

                } else{
                    toastr.error("Please select product(s) to remove discount", '', {
                        timeOut: 5000,
                        'positionClass': 'toast-bottom-right'
                    });
                }
            });

            $(document).off('click', '.remove-item').on('click', '.remove-item', function (e) {
                e.preventDefault();
                var action_url = $(this).attr('href');
                Swal.fire({
                    title: 'Are you sure?',
                    type: 'warning',
                    text: 'Do you really want to remove this?',
                    icon: 'warning',
                    confirmButtonText: 'Yes, delete it!',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                }).then((result) => {
                    if (result.value) {
                        window.location.href = action_url;
                    }
                });
            });

        });

        function initDataTable(){
            if (table){
                table.destroy();
            }

            var productIdFilter = document.getElementById("productId-filter").value,
                productTitleFilter = document.getElementById('productTitle-filter').value,
                categoryFilter = document.getElementById('categoryFilter').value,
                createdAtStart = document.getElementById('created_at_start').value,
                createdAtEnd = document.getElementById('created_at_end').value,
                activeFilter = document.getElementById('activeFilter').value;


            var requestData = {
                _token: "{{csrf_token()}}",
                product_id: productIdFilter,
                title: productTitleFilter,
                category_id: categoryFilter,
                created_at_start: createdAtStart,
                created_at_end: createdAtEnd,
                is_active: activeFilter
            };

            var dataTable = $('.productDataTable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('product.data') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": requestData
                },
                "columns": [
                    {"data": "id"},
                    {"data": "image", "render": function (data){
                            return '<img class="img-thumbnail" src="' + data + '" alt="">'
                        }},
                    {"data": "title", name: "products.title"},
                    {"data": "category_id"},
                    {"data": "discount_id"},
                    {"data": "is_active", "render": function (data){
                            if(data == 'Yes'){
                                return '<span class="badge bg-green">Yes</span>'
                            } else {
                                return '<span class="badge bg-red">No</span>'
                            }
                        }},
                    {"data": "created_at"},
                    {
                        "data": "action", "render": function (data) {
                            var $columnData = '';
                            $columnData += '<button style="margin-right: 5px; border-radius: 5px;" title="Show" class="btn btn-info btn-sm"  data-title="Product Details" data-bs-toggle="modal" data-bs-target="#showModal" data-request-url=" '+ data.show +'" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg></button>';
                            $columnData += '<a href = "' + data.edit + '" style="margin-right: 5px; border-radius: 5px;" title="Edit" class="btn btn-primary btn-sm" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg></a>';
                            $columnData += '<a href = "' + data.delete + '" style="margin-right: 5px; border-radius: 5px;" title="Delete" class="btn btn-danger btn-sm remove-item" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg></a>';
                            return $columnData;
                        }
                    }
                ],
                "order": [[ 0, 'desc' ]]
            });
            return dataTable;
        }
    </script>
@endpush