@extends('layouts.app_rest')

@section('content')
    <link rel="stylesheet" href="{{ asset('AdminLTE/plugins/DataTables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('bootstrap/css/boot.min.css') }}">
    <style>
        #facility_table_filter label {
            font-size: 0
        }

        #facility_table_filter label input::after::placeholder {
            content: "Enter your number" !important;
        }

        .button::before {
            content: "New Button Title";
        }

        /* Assuming the input has a fixed width */
        div.dt-container .dt-search input {
            background-image: url('https://cdn3.iconfinder.com/data/icons/feather-5/24/search-512.png');
            background-size: 18px;
            background-repeat: no-repeat;
            background-position: left 10px center;
            /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); */
            padding: 10px 10px 3px 30px !important;
            border-radius: 20px !important;
            height: 80%;
        }

        div.dt-container .dt-paging .dt-paging-button.current {
            color: white !important;
        }

        .dt-buttons .buttons-html5,
        .buttons-collection,
        .buttons-print {
            border-radius: 5px !important;
            background-color: transparent !important;
            border: 1px solid skyblue !important;
            background: none !important;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }

        .dt-buttons button:hover {
            background-color: skyblue !important;
            color: white !important;
        }

        button.dt-paging-button.current {
            border-radius: 30px !important;
            background-color: skyblue !important;
            border: none !important;
            color: white !important;
        }

        span.dt-paging-button {
            border-radius: 30px !important;
            background-color: skyblue !important;
            border: none !important;
            color: white !important;
        }

        a.dt-paging-button {
            border-radius: 30px !important;
            background-color: transparent !important;
            border: none !important;
            color: black !important;
        }

        .custom-table thead tr {
            /* background-color: rgb(235, 235, 235); */
            /* border: 1px solid lightgray; */
            font-family: Arial, Helvetica, sans-serif;

        }

        .custom-table>tbody>tr:nth-of-type(odd) {
            background-color: #f9f9f9
        }

        .custom-table>tbody>tr:hover {
            background-color: #f5f5f5
        }

        #example_wrapper table.dataTable tbody td {
            border: none !important;
            /* background-color:white  !important; */
        }

        .custom-table tbody tr {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }

        .dt-info {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .total-details .bottom {
            display: flex;
            align-items: center !important;
            margin: auto;
            gap: 10px;
            height: 40px;
            font-weight: bold;
        }

        .total-details .bottom h2 {
            margin: 0;
            font-size: 40px;
        }

        .total-details p {
            font-size: 12px;
        }

        div.dt-container .dt-paging .dt-paging-button.last {
            font-size: 24px;
            font-weight: bold;
        }

        div.dt-container .dt-paging .dt-paging-button.next {
            font-size: 24px;
            font-weight: bold;
        }

        div.dt-container .dt-paging .dt-paging-button.previous {
            font-size: 24px;
            font-weight: bold;
        }

        div.dt-container .dt-paging .dt-paging-button.first {
            font-size: 24px;
            font-weight: bold;
        }

        table.dataTable tbody tr:hover {
            background-color: #87ceeb !important;
            color: white;
        }

        .pagination {
            font-size: 12px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 15px !important;
        }

        .pagination .paginate_button a {
            border-radius: 50%;
        }

        .pagination .paginate_button .previous {
            border: none;
            background-color: red;
        }

        .pagination>li:first-child>a,
        .pagination>li:first-child>span,
        .pagination>li:last-child>a,
        .pagination>li:last-child>span {
            border: none !important;
            background-color: transparent;
        }

        .dt-buttons .btn-info {
            color: black;
        }
    </style>
    <div class="animate__animated p-6 no-print no-print" :class="[$store.app.animation]">
        <!-- start main content section -->
        <div>
            <ul class="flex space-x-2 rtl:space-x-reverse">
                <li>
                    <a href="#" class="text-primary hover:underline">Dashboard</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <span>Product</span>
                </li>
            </ul>
            <div class="grid grid-cols-1 gap-4 pt-5">
                <div>
                    <div class="panel border-[#e0e6ed] px-0 dark:border-[#1b2e4b]">
                        <div class="px-5" x:data="sizeList">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="mb-5 flex items-center gap-2">
                                    @can('product.create')
                                        <a href="{{ action('Rest\ProductController@create') }}" class="btn btn-success gap-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                            </svg>
                                            Add New
                                        </a>
                                    @endcan
                                    @can('product.update')
                                        <button class="btn btn-primary gap-2 edit-btn" style="display:none">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5">
                                                <path opacity="0.5"
                                                    d="M22 10.5V12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2H13.5"
                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                                                </path>
                                                <path
                                                    d="M17.3009 2.80624L16.652 3.45506L10.6872 9.41993C10.2832 9.82394 10.0812 10.0259 9.90743 10.2487C9.70249 10.5114 9.52679 10.7957 9.38344 11.0965C9.26191 11.3515 9.17157 11.6225 8.99089 12.1646L8.41242 13.9L8.03811 15.0229C7.9492 15.2897 8.01862 15.5837 8.21744 15.7826C8.41626 15.9814 8.71035 16.0508 8.97709 15.9619L10.1 15.5876L11.8354 15.0091C12.3775 14.8284 12.6485 14.7381 12.9035 14.6166C13.2043 14.4732 13.4886 14.2975 13.7513 14.0926C13.9741 13.9188 14.1761 13.7168 14.5801 13.3128L20.5449 7.34795L21.1938 6.69914C22.2687 5.62415 22.2687 3.88124 21.1938 2.80624C20.1188 1.73125 18.3759 1.73125 17.3009 2.80624Z"
                                                    stroke="currentColor" stroke-width="1.5"></path>
                                                <path opacity="0.5"
                                                    d="M16.6522 3.45508C16.6522 3.45508 16.7333 4.83381 17.9499 6.05034C19.1664 7.26687 20.5451 7.34797 20.5451 7.34797M10.1002 15.5876L8.4126 13.9"
                                                    stroke="currentColor" stroke-width="1.5"></path>
                                            </svg>
                                            Edit
                                        </button>
                                    @endcan
                                    @can('product.view')
                                        <button type="button" class="btn btn-info  gap-2 view-btn"
                                            style="display:none;color:#fff;">
                                            <i class="fas fa-eye"></i>
                                            View
                                        </button>
                                    @endcan
                                    @can('product.delete')
                                        <button type="button" class="btn btn-danger  gap-2 delete-button" style="display:none">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                                                <path d="M20.5001 6H3.5" stroke="currentColor" stroke-width="1.5"
                                                    stroke-linecap="round"></path>
                                                <path
                                                    d="M18.8334 8.5L18.3735 15.3991C18.1965 18.054 18.108 19.3815 17.243 20.1907C16.378 21 15.0476 21 12.3868 21H11.6134C8.9526 21 7.6222 21 6.75719 20.1907C5.89218 19.3815 5.80368 18.054 5.62669 15.3991L5.16675 8.5"
                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                                                <path opacity="0.5" d="M9.5 11L10 16" stroke="currentColor" stroke-width="1.5"
                                                    stroke-linecap="round"></path>
                                                <path opacity="0.5" d="M14.5 11L14 16" stroke="currentColor" stroke-width="1.5"
                                                    stroke-linecap="round"></path>
                                                <path opacity="0.5"
                                                    d="M6.5 6C6.55588 6 6.58382 6 6.60915 5.99936C7.43259 5.97849 8.15902 5.45491 8.43922 4.68032C8.44784 4.65649 8.45667 4.62999 8.47434 4.57697L8.57143 4.28571C8.65431 4.03708 8.69575 3.91276 8.75071 3.8072C8.97001 3.38607 9.37574 3.09364 9.84461 3.01877C9.96213 3 10.0932 3 10.3553 3H13.6447C13.9068 3 14.0379 3 14.1554 3.01877C14.6243 3.09364 15.03 3.38607 15.2493 3.8072C15.3043 3.91276 15.3457 4.03708 15.4286 4.28571L15.5257 4.57697C15.5433 4.62992 15.5522 4.65651 15.5608 4.68032C15.841 5.45491 16.5674 5.97849 17.3909 5.99936C17.4162 6 17.4441 6 17.5 6"
                                                    stroke="currentColor" stroke-width="1.5"></path>
                                            </svg>
                                            Delete
                                        </button>
                                    @endcan
                                    @can('open-stock.create')
                                        <button type="button" class="btn btn-info  gap-2 open-stock-btn"
                                            style="display:none;color:#fff;">
                                            <i class="fas fa-database"></i>
                                            Open Stock
                                        </button>
                                    @endcan
                                </div>
                                <!-- <input type="text" class="border rounded px-2 py-1 w-80" placeholder="Search..."
                                                        style="outline: none;" x-model="searchText"> -->
                            </div>
                            @can('product.view')
                                <div class="category-table">
                                    <div class="table-responsive">
                                        <table id="facility_table" class="custom-table display nowrap" style="width:100%">
                                            <thead>
                                                <tr style="border:none;background-color:skyblue !important;color:white;">
                                                    <th></th>
                                                    <th>SKU Code</th>
                                                    <th>Name</th>
                                                    <th>Category</th>
                                                    <th>Sub Category</th>
                                                    <th>Price</th>
                                                    <th>Description</th>
                                                    <th>MRP</th>
                                                </tr>
                                            </thead>

                                        </table>
                                    </div>
                                </div>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="invoice print_section" id="receipt_section">
    </section>
@endsection
@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            var ajax_url = "{{ action('Rest\ProductController@index') }}";
            facility_table = $('#facility_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [
                    [0, 'desc']
                ],
                ajax: ajax_url,
                columnDefs: [{
                    "targets": [0],
                    "orderable": false,
                    "searchable": false
                }],
                language: {
                    paginate: {
                        previous: '<i class="fa fa-chevron-left"></i>', // Icon for previous page
                        next: '<i class="fa fa-chevron-right"></i>' // Icon for next page
                    },
                },
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'sku_code',
                        name: 'sku_code'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'category',
                        name: 'category'
                    },
                    {
                        data: 'sub_category',
                        name: 'sub_category'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'mrp',
                        name: 'mrp'
                    }
                ],
                "fnDrawCallback": function(oSettings) {
                    __currency_convert_recursively($('#facility_table'));
                },
                createdRow: function(row, data, dataIndex) {
                    $(row).attr('class', 'clickable_td');
                    $(row).attr('data-id', data.id);
                    $(row).attr('data-stock', data.open_stock);
                }
            });
            var searchIDs = [];
            $(document).on('click', "table#facility_table tbody tr td", function() {
                var currentRow = $(this).closest("tr");
                $('table#facility_table tbody tr').css('background-color', '');
                $('table#facility_table tbody tr').css('color', '');
                currentRow.css('background-color', '#87ceeb');
                currentRow.css('color', 'white');

                var id = currentRow.data('id');
                var stock = currentRow.data('stock');
                if (stock === 1) {
                    $('button.open-stock-btn').show();
                } else {
                    $('button.open-stock-btn').hide();
                }
                $('button.view-btn').show();
                $('button.edit-btn').show();
                $('button.delete-button').hide();

                $(document).on('click', 'button.edit-btn', function() {
                    $('button.edit-btn').hide();
                    $('button.view-btn').hide();
                    $('button.open-stock-btn').hide();
                    currentRow.css('background-color', '');
                    currentRow.css('color', '');
                    const edit_url = "{{ action('Rest\ProductController@edit', ['ID']) }}".replace(
                        'ID', id);
                    window.location.href = edit_url;
                });
                $(document).on('click', 'button.view-btn', function() {
                    currentRow.css('background-color', '');
                    currentRow.css('color', '');
                    $('button.edit-btn').hide();
                    $('button.view-btn').hide();
                    $('button.open-stock-btn').hide();
                    const show_url = "{{ action('Rest\ProductController@show', ['ID']) }}".replace(
                        'ID', id);
                    window.location.href = show_url;
                });
                $(document).on('click', 'button.open-stock-btn', function() {
                    currentRow.css('background-color', '');
                    currentRow.css('color', '');
                    $('button.edit-btn').hide();
                    $('button.view-btn').hide();
                    $('button.open-stock-btn').hide();
                    const stock_url = "{{ action('OpenStockController@create', ['ID']) }}".replace(
                        'ID', id);
                    window.location.href = stock_url;
                });
            });

            $(document).on('change', '#check-box', function() {
                $('button.view-btn').hide();
                $('button.edit-btn').hide();
                $('button.open-stock-btn').hide();
                if ($(this).is(":checked")) {
                    searchIDs.push($(this).val());
                } else {
                    searchIDs.splice(searchIDs.indexOf($(this).val()), 1)
                }
                if (searchIDs.length > 0) {
                    $('button.delete-button').show();
                    $(document).on('click', 'button.delete-button', function() {
                        const delete_url = "{{ action('Rest\ProductController@delete') }}";
                        $.ajax({
                            method: "GET",
                            url: delete_url,
                            dataType: "json",
                            data: {
                                ids: searchIDs
                            },
                            success: function(result) {
                                if (result.success == true) {
                                    facility_table.ajax.reload();

                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    });
                }
            });

        });
    </script>
@endsection