
<?php $__env->startSection('title', $page_title); ?>
<?php $__env->startPush('styles'); ?>
    <link href="<?php echo e(asset('plugins/custom/datatables/datatables.bundle.css')); ?>" rel="stylesheet" type="text/css"/>
    <link href="<?php echo e(asset('css/daterangepicker.min.css')); ?>" rel="stylesheet" type="text/css"/>

    <style>
        .img-size {
            /* 	padding: 0;
                         margin: 0; */
            height: 450px;
            width: 700px;
            background-size: cover;
            overflow: hidden;
        }

        .modal-content {
            width: 700px;
            border: none;
        }

        .modal-body {
            padding: 0;
        }

        .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
            width: 30px;
            height: 48px;
        }

        .carousel-control-next-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
            width: 30px;
            height: 48px;
        }

        .show-variant {
            padding-bottom: 0 !important;
            text-align: center !important;
            color: #0c0e1a !important;
            background-color: #b9ead6 !important;
            border-radius: 5px !important;
            width: fit-content !important;
            margin: auto !important;
        }

        .show-variant:hover {
            padding-bottom: 0 !important;
            text-align: center !important;
            color: #0c0e1a !important;
            background-color: #3aeaa6 !important;
            border-radius: 5px !important;
        }
    </style>
<?php $__env->stopPush(); ?>
<?php $__env->startSection('content'); ?>
    <div class="d-flex flex-column-fluid">
        <div class="container-fluid">
            <div class="card card-custom gutter-b">
                <div class="card-header flex-wrap py-5">
                    <div class="card-title">
                        <h3 class="card-label"><i class="<?php echo e($page_icon); ?> text-primary"></i> <?php echo e($sub_title); ?></h3>
                    </div>
                </div>
            </div>
            <div class="card card-custom">
                <div class="card-header flex-wrap py-5">
                    <form method="POST" id="form-filter" class="col-md-12 px-0">
                        <div class="row">
                            <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.form.selectbox','data' => ['labelName' => ''.e('SKU').'','name' => 'sku','col' => 'col-md-2','class' => 'selectpicker']]); ?>
<?php $component->withName('form.selectbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['labelName' => ''.e('SKU').'','name' => 'sku','col' => 'col-md-2','class' => 'selectpicker']); ?>
                                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($product->sku); ?>"><?php echo e($product->sku); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                             <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
                            
                            <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.form.selectbox','data' => ['labelName' => ''.e('Category').'','name' => 'category_id','col' => 'col-md-3','class' => 'selectpicker']]); ?>
<?php $component->withName('form.selectbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['labelName' => ''.e('Category').'','name' => 'category_id','col' => 'col-md-3','class' => 'selectpicker']); ?>
                                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($category->id); ?>"><?php echo e($category->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                             <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
                            <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.form.selectbox','data' => ['labelName' => ''.e('Brand').'','name' => 'brand_id','col' => 'col-md-2','class' => 'selectpicker']]); ?>
<?php $component->withName('form.selectbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['labelName' => ''.e('Brand').'','name' => 'brand_id','col' => 'col-md-2','class' => 'selectpicker']); ?>
                                <?php $__currentLoopData = $brands; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $brand): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($brand->id); ?>"><?php echo e($brand->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                             <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
                            <?php if(empty(\Illuminate\Support\Facades\Auth::user()->showroom_id)): ?>
                                <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.form.selectbox','data' => ['labelName' => ''.e('Showroom').'','name' => 'showroom_id','col' => 'col-md-3','class' => 'selectpicker']]); ?>
<?php $component->withName('form.selectbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['labelName' => ''.e('Showroom').'','name' => 'showroom_id','col' => 'col-md-3','class' => 'selectpicker']); ?>
                                    <option value="0" selected><?php echo e('All Showroom'); ?></option>
                                    <?php $__currentLoopData = $showrooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $warehouse): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($warehouse->id); ?>"><?php echo e($warehouse->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
                            <?php endif; ?>
                            <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.form.selectbox','data' => ['labelName' => 'Stock Quantity','name' => 'stock_qty','col' => 'col-md-3','class' => 'selectpicker']]); ?>
<?php $component->withName('form.selectbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['labelName' => 'Stock Quantity','name' => 'stock_qty','col' => 'col-md-3','class' => 'selectpicker']); ?>
                                    <option value="0">Low</option>
                                    <option value="1">High</option>
                             <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
                            <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.form.selectbox','data' => ['labelName' => 'Latest/Oldest','name' => 'date_check','col' => 'col-md-3','class' => 'selectpicker']]); ?>
<?php $component->withName('form.selectbox'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['labelName' => 'Latest/Oldest','name' => 'date_check','col' => 'col-md-3','class' => 'selectpicker']); ?>
                                <option value="0">Latest</option>
                                <option value="1">Oldest</option>
                             <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
                            <div class="col-md-2">
                                <div style="margin-top:28px;">
                                    <div style="margin-top:28px;">
                                        <button id="btn-filter" class="btn btn-primary btn-sm btn-elevate btn-icon mr-2"
                                                type="button" data-toggle="tooltip" data-theme="dark"
                                                title="<?php echo e('Search'); ?>"><i class="fas fa-search"></i></button>
                                        <button id="btn-reset" class="btn btn-danger btn-sm btn-elevate btn-icon"
                                                type="button" data-toggle="tooltip" data-theme="dark"
                                                title="<?php echo e('Reset'); ?>"><i class="fas fa-undo-alt"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div id="kt_datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <div class="row">
                            <div class="col-sm-12">
                                <table id="dataTable" class="table table-bordered table-hover">
                                    <thead class="bg-primary">
                                    <tr class="text-center">
                                        <th width="1%">SL</th>
                                        <th width="2%">Image</th>
                                        <th width="2%">Product Name</th>
                                        <th width="1%">SKU</th>
                                        <th width="1%">Stock Qty</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot>
                                    <tr class="bg-primary">
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th style="text-align: right !important;font-weight:bold;color:white;"><?php echo e('Total'); ?></th>
                                        <th style="text-align: center !important;font-weight:bold;color:white;"></th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <!-- carousel -->
                    <div id='carouselExampleIndicators' class='carousel slide' data-ride='carousel'>
                        <ol class='carousel-indicators'>
                            <li data-target='#carouselExampleIndicators' data-slide-to='0' class='active'>
                            </li>
                            <li data-target='#carouselExampleIndicators' data-slide-to='1'></li>
                        </ol>
                        <div class='carousel-inner' id="imageList">
                            
                        </div>
                        <a class='carousel-control-prev' href='#carouselExampleIndicators' role='button'
                           data-slide='prev'>
                            <span class='carousel-control-prev-icon' aria-hidden='true'></span>
                            <span class='sr-only'>Previous</span>
                        </a>
                        <a class='carousel-control-next' href='#carouselExampleIndicators' role='button'
                           data-slide='next'>
                            <span class='carousel-control-next-icon' aria-hidden='true'></span>
                            <span class='sr-only'>Next</span>
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="variant_modal" tabindex="-1" role="dialog" aria-labelledby="model-1" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">

            <!-- Modal Content -->
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-primary">
                    <h3 class="modal-title text-white" id="model-1"><i class="fas fa-eye text-white"></i> <span>Sales Person Details</span></h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <!-- /modal header -->

                <!-- Modal Body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="variant_list">
                                        <thead class="bg-primary">
                                        <tr class="text-center">
                                            <th>Sl</th>
                                            <th>Product Code</th>
                                            <th>Variant Name</th>
                                            <th>Stock Qty</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <!-- Your data rows will be appended here dynamically -->
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /modal body -->

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
                </div>
                <!-- /modal footer -->
            </div>
            <!-- /modal content -->

        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('scripts'); ?>
    <script src="<?php echo e(asset('plugins/custom/datatables/datatables.bundle.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('js/moment.js')); ?>"></script>
    <script src="<?php echo e(asset('js/knockout-3.4.2.js')); ?>"></script>
    <script src="<?php echo e(asset('js/daterangepicker.min.js')); ?>"></script>
    <script>
        let table;
        $(document).ready(function () {
            table = $('#dataTable').DataTable({
                "processing": true,
                "serverSide": true,
                "order": [],
                "responsive": true,
                "bInfo": true,
                "bFilter": false,
                "lengthMenu": [
                    [5, 10, 15, 25, 50, 100, 1000, 10000, -1],
                    [5, 10, 15, 25, 50, 100, 1000, 10000, "All"]
                ],
                "pageLength": 25,
                "language": {
                    processing: `<i class="fas fa-spinner fa-spin fa-3x fa-fw text-primary"></i> `,
                    emptyTable: '<strong class="text-danger"><?php echo e('No Data Found'); ?></strong>',
                    infoEmpty: '',
                    zeroRecords: '<strong class="text-danger"><?php echo e('No Data Found'); ?></strong>'
                },
                "ajax": {
                    "url": "<?php echo e(route('product-stock-details.datatable.data')); ?>",
                    "type": "POST",
                    "data": function (data) {
                        data.sku = $("#form-filter #sku option:selected").val();
                        data.category_id = $("#form-filter #category_id option:selected").val();
                        data.brand_id = $("#form-filter #brand_id option:selected").val();
                        data.showroom_id = $("#form-filter #showroom_id option:selected").val();
                        data.stock_qty = $("#form-filter #stock_qty option:selected").val();
                        data.date_check = $("#form-filter #date_check option:selected").val();
                        data._token = _token;
                    }
                },

                "columnDefs": [{
                    "orderable": false,
                    "targets": [0, 1, 2, 3, 4],
                    "className": "text-center"
                }, <?php if(\Illuminate\Support\Facades\Auth::user()->role_id == 1 || \Illuminate\Support\Facades\Auth::user()->role_id != 1): ?>
                {
                    "targets": 4, // Index of the column you want to make bold
                    "render": function (data, type, row, meta) {
                        return type === 'display' ? '<p class="h4 text-bold">' + data + '</p>' : data;
                    }
                }
                    <?php endif; ?>
                ],


                "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6' <'float-right'B>>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'<'float-right'p>>>",
                <?php if(\Illuminate\Support\Facades\Auth::user()->role_id == 1): ?>
                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                i : 0;
                    };
                    for (let index = 4; index <= 4; index++) {
                        total = api
                            .column(index)
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);
                        pageTotal = api
                            .column(index, {
                                page: 'current'
                            })
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);
                        $(api.column(index).footer()).html('= ' + number_format(pageTotal));
                    }
                }
                <?php else: ?>
                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                i : 0;
                    };
                    for (let index = 4; index <= 4; index++) {
                        total = api.column(index).data().reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                        pageTotal = api.column(index, {
                            page: 'current'
                        }).data().reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                        $(api.column(index).footer()).html('= ' + number_format(pageTotal));
                    }
                }
                <?php endif; ?>
            });
            $('#btn-filter').click(function () {
                table.ajax.reload();
            });
            $('#btn-reset').click(function () {
                $('#form-filter')[0].reset();
                $('#form-filter .selectpicker').selectpicker('refresh');
                table.ajax.reload();
            });

            $(document).on('click', '.show-image', function () {
                let id = $(this).data('id');
                let imagePath = $(this).data('image_path');

                if (id) {
                    $.ajax({
                        url: "<?php echo e(route('product.image.show')); ?>",
                        type: "get",
                        async: false,
                        data: {
                            id: id
                        },
                        dataType: "JSON",
                        success: function (data) {

                            if (data !== null) {
                                let html = '';
                                $('#imageList').empty();

                                $.each(data.image, function (key, filename) {
                                    let new_list = imagePath + '/' + filename;

                                    html += '<div class="carousel-item ' + (key === 0 ? 'active' : '') +
                                        '"><img class="img-size" src="' + new_list + '" alt="' + filename + '" /></div>';
                                });
                                $('#imageList').append(html);
                            }
                        },
                        error: function (xhr, ajaxOption, thrownError) {
                            console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
                        }
                    });
                }
            });

            $(document).on('click', '.show-variant', function () {
                let id = $(this).data('id');
                let code = $(this).data('code');
                let showroom_id = $("#form-filter #showroom_id option:selected").val();
                if (id) {
                    $.ajax({
                        url: "<?php echo e(route('product-stock-details.show.variant')); ?>",
                        type: "GET",
                        data: {id: id, code: code, showroom_id: showroom_id, _token: _token},
                        success: function (response) {

                            // Check if 'data' property exists in the response
                            if (response.hasOwnProperty('data')) {
                                var data = response.data;

                                $('#variant_list tbody').empty();
                                $.each(data, function (index, variant) {
                                    var row = '<tr class="text-center">' +
                                        '<td>' + (index + 1) + '</td>' +
                                        '<td>' + variant.product_code + '</td>' +
                                        '<td>' + variant.product_variant_name + '</td>' +
                                        '<td>' + variant.qty + '</td>' +
                                        '</tr>';

                                    $('#variant_list tbody').append(row);
                                });

                                $('#variant_modal').modal({
                                    keyboard: false,
                                    backdrop: 'static',
                                });
                                $('#variant_modal .modal-title').html(
                                    '<i class="fas fa-list text-white"></i> <span>' + data[0].product_name + ' Variant List</span>'
                                );
                                return false;
                            } else {
                                console.error('Data property not found in the response.');
                            }
                        },
                        error: function (xhr, ajaxOption, thrownError) {
                            console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
                        }
                    });

                }
            });
        });
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/iconshoppercom/iconshopper/Modules/Stock/Resources/views/stock-details/index.blade.php ENDPATH**/ ?>