@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    use App\General\ProductClass;
    $logged_in_user = Auth::user();
@endphp
<style>
    /* Style for the drop area */
    .drop-area {
        width: 200px;
        height: 200px;
        border: 2px dashed #ddd;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Style for the icon */
    .icon {
        font-size: 48px;
        color: #aaa;
    }

    /* Style for the text */
    .text {
        margin-top: 10px;
        font-size: 16px;
        color: #333;
    }

    /* Style for when hovering over the drop area */
    .drop-area:hover {
        border-color: #333;
    }

    /* Style for the selected file information */
    .file-info {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        color: #333;
    }

    .custom-form {
        background-color: #2d353e;
        ;
        /* Set the background color of the form */
        padding: 20px;
        /* Add some padding for spacing */
    }

    .custom-input {
        background-color: #fff;
        /* Set the background color of input fields */
    }

    .custom-select {
        background-color: #fff;
        /* Set the background color of select dropdown */
    }

    .custom-button {
        background-color: #28a745;
        /* Set the background color of buttons */
        color: #fff;
        /* Set the text color of buttons */
    }

    .custom-button:hover {
        background-color: #218838;
        /* Change button background color on hover */
    }

    .custom-input::placeholder {
        color: #656464;
        /* Set placeholder color to black */
    }
</style>
<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Product List') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{url('/')}}/admin">Dashboard</a>
                    <span class="breadcrumb-item active">Product List</span>
                </div>
            </div>
            @if (Session::has('permissions') && (in_array('Create Product', Session::get('permissions')) || in_array('Product Trash List', Session::get('permissions')) || in_array('Import Products', Session::get('permissions'))))
                <div class="d-flex align-items-center">
                    @if (Session::has('permissions') && in_array('Create Product', Session::get('permissions')))
                        <button type="button" onclick="window.location = '{{url('/')}}/admin/products/create'"
                            class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                            <i data-feather="package" class="wd-16 mr-2"></i>Create Product</button>
                    @endif
                    @if (Session::has('permissions') && in_array('Product Trash List', Session::get('permissions')))
                        <button type="button" onclick="window.location = '{{url('/')}}/admin/products/list/trash'"
                            class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                            <i data-feather="package" class="wd-16 mr-2"></i>Trash List</button>
                    @endif
                    @if (Session::has('permissions') && in_array('Import Products', Session::get('permissions')))
                        <button type="button" class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force"
                            data-toggle="modal" data-target="#ImportProduct">
                            <i data-feather="file-text" class="wd-16 mr-2"></i>Import Products</button>
                    @endif
                </div>
            @endif
        </div>
    </div>
    <!--/ Breadcrumb End -->
    <!--================================-->
    <!--================================-->
    <div class="col-md-12 col-lg-12 px-0">
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}</a>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card mg-b-30">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-header-title tx-13 mb-0">{{ __('Product List') }}</h6>
                    </div>
                </div>
            </div>
            <div class="card-body pd-0">
                <form method="POST" action="{{url('/admin/products/product_search')}}" class="custom-form">
                    @csrf
                    <div class="row">
                        <div class="col-12 col-md-4 col-xl-3 col-xl-2">
                            <input type="text" class="form-control custom-input" name="product_name"
                                placeholder="Search Product Name..."
                                value="{{ session('product_search_params')['title'] ?? '' }}">
                        </div>
                        <div class="col-12 col-md-4 col-xl-3 col-xxl-2 pt-3 pt-sm-0">
                            <input type="text" class="form-control custom-input" name="category"
                                placeholder="Search Category..." value="{{ session('product_category') ?? '' }}">
                        </div>
                        <div class="col-12 col-md-4 col-xl-3  col-xxl-2 pt-3 pt-sm-0">
                            <input type="text" class="form-control custom-input" name="sku" placeholder="Search SKU..."
                                value="{{ session('product_search_params')['sku'] ?? '' }}">
                        </div>
                        <div class="col-12 col-md-4 col-xl-3 col-xxl-2 pt-3 pt-xl-0">
                            <input type="text" class="form-control custom-input" name="product_type"
                                placeholder="Search Type..."
                                value="{{ session('product_search_params')['product_type'] ?? '' }}">
                        </div>
                        <div class="col-12 col-md-4 col-xl-3 col-xxl-2 pt-3 pt-xxl-0">
                            <select class="form-control custom-select" name="stock_status">
                                <option value="">Select Status</option>
                                <option value="in_stock" {{ session('product_stock_status') == 'in_stock' ? 'selected' : '' }}>In Stock</option>
                                <option value="out_stock" {{ session('product_stock_status') == 'out_stock' ? 'selected' : '' }}>Out of Stock</option>
                            </select>
                        </div>

                        <div class="col-12 col-md-4 col-xl-3 col-xxl-2 pt-3 pt-xxl-0">
                            <button class="btn btn-sm btn-success custom-button" type="submit">Search</button>
                            <a class="btn btn-sm btn-secondary " href="{{url('/admin/products')}}">Clear</a>
                        </div>
                    </div>

                </form>



                <div class="table-responsive">
                    <table id="product_table" class="table table-hover table-striped display nowrap  mb-5"
                        style="width: 100% !important;">
                        <thead>
                            <tr>
                                <th width="25px">#</th>
                                <th width="330px">Product</th>
                                <th>Category</th>
                                <th>SKU</th>
                                <th>Status</th>
                                <th>Type</th>
                                <th>Active</th>
                                @if (Session::has('permissions') && (in_array('Product Edit', Session::get('permissions')) || in_array('Product Delete', Session::get('permissions')) || in_array('Product Change Status', Session::get('permissions'))))
                                    <th width="100px">Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($products as $key => $product)
                                <tr>
                                    <td>{{$product->id}}</td>
                                    <td>
                                        <div class="product-detail-cell d-flex align-items-center">
                                            <div class="product-thumbnail"
                                                style="background:url({{url('/') . '/' . $product->featured_image}});background-size:cover;background-position:center; width: 50px; height: 50px;">
                                            </div>
                                            <a class="product-title ml-2" target="_blank">{{$product->title}}</a>
                                        </div>
                                    </td>
                                    <td>{{ProductClass::getCategoryTitles($categories, $product->category_id)}}</td>
                                    <td>{{$product->sku}}</td>
                                    <td>{{ProductClass::getOptionValue('_stock_status', $product->productMeta) =='in_stock' ? 'In-Stock' : 'Out of Stock'}}
                                    </td>
                                    <td>{{ $product->type->title ?? '' }}</td>
                                    <td class="active-status">{{ProductClass::check_active($product->active)}}</td>
                                    @if (Session::has('permissions') && (in_array('Product Edit', Session::get('permissions')) || in_array('Product Delete', Session::get('permissions')) || in_array('Product Change Status', Session::get('permissions'))))
                                        <td>
                                            <form action="{{ route('products.destroy', $product->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
                                                    @if (Session::has('permissions') && in_array('Product Edit', Session::get('permissions')))
                                                        <button type="button" class="btn btn-warning btn-sm"
                                                            onclick="window.location='{{ route('products.edit', $product->id) }}'">Edit</button>
                                                    @endif
                                                    @if (Session::has('permissions') && in_array('Product Delete', Session::get('permissions')))
                                                        <button class="btn btn-danger btn-sm" type="submit"
                                                            onclick="return confirm('Are you sure? Product will permanently be deleted, suggestion is to make product status Draft or Private!')">Delete</button>
                                                    @endif
                                                    @if (Session::has('permissions') && in_array('Product Change Status', Session::get('permissions')))
                                                        <div class="btn-group" role="group">
                                                            <button id="btnGroupDrop1" type="button"
                                                                class="btn btn-secondary btn-sm dropdown-toggle"
                                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Change Status
                                                            </button>
                                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                                                <a class="dropdown-item"
                                                                    onclick="ProductUpdateStatus({{ $product->id }}, 0, this)">Draft</a>
                                                                <a class="dropdown-item"
                                                                    onclick="ProductUpdateStatus({{ $product->id }}, 1, this)">Public</a>
                                                                <a class="dropdown-item"
                                                                    onclick="ProductUpdateStatus({{ $product->id }}, 2, this)">Private</a>
                                                                <a class="dropdown-item"
                                                                    onclick="ProductUpdateStatus({{ $product->id }}, 3, this)">Trash</a>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </form>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <div class="d-flex justify-content-end">
            @if(empty(session('product_search_params')) && empty(session('product_stock_status')) && empty(session('product_category')))
                {{ $products->links('vendor.pagination.bootstrap-4') }}
            @else
                {{ $products->appends(['product_name' => session('product_search_params')['title'] ?? '', 'sku' => session('product_search_params')['sku'] ?? '', 'product_type' => session('product_search_params')['product_type'] ?? '', 'stock_status' => session('product_stock_status') ?? '', 'category' => session('product_category') ?? ''])->links('vendor.pagination.bootstrap-4') }}
            @endif
        </div>


    </div>
    <!--/  Order Active dataTable End -->
    <!--================================-->
</div>
<!--/ Page Inner End -->



<!-- Import Products Models -->
<div class="modal fade" id="ImportProduct" tabindex="-1" aria-labelledby="ImportProductLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center" id="ImportProductLabel">Import Products</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="importproducts_form">
                    <div class="h5 text-center">Select CSV</div>
                    <div class="text-center">
                        <label for="fileInput" class="drop-area m-auto">
                            <div class="icon">
                                <i data-feather="upload"></i>
                            </div>
                            <div class="text">Select File to Upload</div>
                        </label>
                        <input type="file" accept=".csv" id="fileInput" style="display: none;">
                        <div class="file-info text-success" id="fileInfo">No File Selected!</div>
                    </div>

                    <div class="text-center my-2">
                        <label class="confirmcheck"><input type="checkbox" id="confirm_check"> Are you sure, changes
                            cannot be reversed!</label>
                    </div>
                    <div class="text-center">
                        <a href="{{url('/')}}/sample.csv" target="_blank" class="btn btn-warning">Download Sample
                            CSV</a>
                        <button type="button" class="btn btn-primary" id="importButton">Import File</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
@include('Admin.Includes.footer')
<script>
    $(document).ready(function () {
        @if(isset($_GET['page']))
            $('.pagination a[value="{{$_GET['page']}}"]').addClass('bg-dark');
            $('.pagination a[value="{{$_GET['page']}}"]').addClass('text-light');
        @endif
        $("#searchProduct").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#product_table tbody tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
    function clearSession() {
        // Clear session values
        {!! session()->forget(['product_search_params', 'product_category', 'product_stock_status']) !!}
    }
    function ProductUpdateStatus(productId, status, elementObj) {
        var active_status = '';
        switch (status) {
            case 0:
                active_status = 'Draft';
                break;
            case 1:
                active_status = 'Public';
                break;
            case 2:
                active_status = 'Private';
                break;
            case 3:
                active_status = 'Trash';
                break;
        }

        $.ajax({
            url: '/admin/products/' + productId + '/update-status',
            type: 'PUT',
            data: {
                active: status,
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                showToast('success', 'Product status updated successfully.');
                $(elementObj).parent().parent().parent().parent().parent().siblings('.active-status').text(active_status);
                if (status == 3) {
                    window.location = '{{route('Admin.Product.Trash')}}';
                }
            },
            error: function (xhr, status, error) {
                var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error occurred.';
                showToast('error', errorMessage);
            }
        });
    }

    function displayFileInfo() {
        const fileInput = document.getElementById("fileInput");
        const fileInfo = document.getElementById("fileInfo");

        fileInput.addEventListener("change", function () {
            const selectedFile = fileInput.files[0];

            if (selectedFile) {
                const fileName = selectedFile.name;
                const fileSize = Math.round(selectedFile.size / 1024); // Convert to KB

                fileInfo.innerHTML = `Selected File: ${fileName} (${fileSize} KB)`;
            } else {
                fileInfo.innerHTML = "";
            }
        });
    }

    // Call the function to display file information
    displayFileInfo();

    document.getElementById("importButton").addEventListener("click", function () {
        const fileInput = document.getElementById("fileInput");
        const selectedFile = fileInput.files[0];
        const confirm_check = document.getElementById("confirm_check");
        const confirmcheck = document.querySelector(".confirmcheck");
        if (confirm_check.checked) {
            if (selectedFile) {
                const reader = new FileReader();

                reader.onload = function (event) {
                    const csvContent = event.target.result;
                    const lines = csvContent.split("\n");
                    const header = lines[0].split(",");

                    // Check if the required columns are present in the header
                    const requiredColumns = ["title", "permalink", "sku", "short_description", "long_description", "product_type", "active", "category_id", "child_category", "grand_child_category", "brand_id", "featured_image", "gallery_media", "_stock", "_buy_price", "_price", "_seo_title", "_seo_tags", "_seo_description", "_alt", "_virtual", "_upc", "_weight", "_gst"];
                    const missingColumns = requiredColumns.filter(col => !header.includes(col));

                    if (missingColumns.length === 0) {
                        var formData = new FormData();
                        formData.append("file", $("#fileInput")[0].files[0]);
                        formData.append("_token", "{{csrf_token()}}");

                        // Send the AJAX request
                        $.ajax({
                            url: '/admin/products/import/csv',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                // Handle the success response
                                console.log(response);
                                alert('CSV file uploaded successfully!');
                                window.location.href = window.location.href;
                            },
                            error: function (xhr, status, error) {
                                console.error(error);
                                alert('Error uploading CSV file.');
                            }
                        });
                    } else {
                        // Display an alert for missing columns
                        alert("The following columns are missing in the CSV file: " + missingColumns.join(", "));
                    }
                };

                reader.readAsText(selectedFile);
            } else {
                alert("Please select a CSV file before importing.");
            }
        } else {
            confirmcheck.style.color = "red";
        }

    });
</script>