@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;
    }
    @media (max-width:520px){
        .width_price{
            width: 80px !important;
        }
    }
</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">{{ __('Manage Inventory') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin">
                        Dashboard</a>
                    <span class="breadcrumb-item active">Manage Inventory</span>
                </div>
            </div>
            @if (Session::has('permissions') && (in_array('Create Product', Session::get('permissions'))  ||in_array('CSV Export', Session::get('permissions'))||in_array('CSV Import', 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('CSV Export', Session::get('permissions')))
                    <!-- <button type="button" id="exportCSV" 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="file-text" class="wd-16 mr-2"></i>CSV Export
                    </button> -->
                    @endif
                    @if (Session::has('permissions') && in_array('CSV Import', Session::get('permissions')))
                    <!-- <button type="button" data-toggle="modal" data-target="#ImportModal" 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="file-text" class="wd-16 mr-2"></i>CSV Import
                    </button> -->
            @endif
            </div>
        @endif
        </div>
    </div>
    <!--/ Breadcrumb End -->
    <!--================================-->
    <!--================================-->
    <div class="col-md-12 col-lg-12 px-0">
        <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">{{ __('Manage Inventory') }}</h6>
                    </div>
                </div>
            </div>
            <div class="card-body pd-0">
                <div class="p-1 border-bottom d-flex">
                    <input type="text" class="form-control bg-light" id="searchFilter"
                        placeholder="Search Products...">
                    <button class="btn btn-primary" type="button" id="searchInventory">Search</button>
                </div>
                <id id="inventoryBlukUpdate">
                    @csrf
                    <div class="table-responsive">
                        <table id="filteredResults" class="table hover responsive display nowrap"
                            style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th scope="col" style="display:none">product id</th>
                                    <th scope="col" style="width:45%">Product</th>
                                    <th scope="col">Sku</th>
                                    <th scope="col">Stock</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Status</th>
                                </tr>
                            </thead>
                            <tbody>
    @foreach ($products as $product)
        <tr>
            <td style="display:none">{{ $product->id }}</td>
            <td>{{ $product->title }}</td>
            <td>{{ $product->sku }}</td>
             <!-- Stock Status (In Stock / Out of Stock) -->
             <td>
                <select class="form-control-sm" name="_stock_status[{{ $product->id }}]">
                    <option value="in_stock"
                        @if(ProductClass::getOptionValue('_stock_status', $product->productMeta) === 'in_stock') 
                            selected 
                        @endif
                    >
                        In Stock
                    </option>
                    <option value="out_stock"
                        @if(ProductClass::getOptionValue('_stock_status', $product->productMeta) === 'out_stock') 
                            selected 
                        @endif
                    >
                        Out of Stock
                    </option>
                </select>
            </td>
            <!-- Price (numeric) -->
            <td>
                <input type="number" class="form-control form-control-sm width_price"
                       name="_price[{{ $product->id }}]"
                       value="{{ ProductClass::getOptionValue('_price', $product->productMeta) }}"
                       step="0.0001">
            </td>
            
          

            @if (Session::has('permissions') && in_array('Inventory Status', Session::get('permissions')))
                <td>
                    <select class="form-control-sm" name="active[{{ $product->id }}]">
                        <option value="0" @if ($product->active == 0) selected @endif>Draft</option>
                        <option value="1" @if ($product->active == 1) selected @endif>Public</option>
                        <option value="2" @if ($product->active == 2) selected @endif>Private</option>
                        <option value="3" @if ($product->active == 3) selected @endif>Trash</option>
                    </select>
                </td>
            @endif
        </tr>
    @endforeach
</tbody>

                        </table>
                    </div>
                    <div class="w-100 d-flex justify-content-between p-2">
                        <div class="d-flex">
                            {!! $products->links('vendor.pagination.bootstrap-4') !!}
                        </div>
                         @if (Session::has('permissions') && in_array('Add Inventory', Session::get('permissions')))
                        <div>
                            <button class="btn btn-success">Submit</button>
                        </div>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--/  Order Active dataTable End -->
    <!--================================-->
</div>

  
  <!-- Modal -->
  {{-- <div class="modal fade" id="ImportModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Import CSV</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="importcsvproducts_form">
          <input type="file" name="file" accept=".csv" id="csvfileinput">
        </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="importCSVdata">Save changes</button>
        </div>
      </div>
    </div>
  </div> --}}


  <div class="modal fade" id="ImportModal" 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 File</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">
                    <button type="button" class="btn btn-primary" id="importCSVdata">Import File</button>
                </div>
            </form>
        </div>

        </div>
    </div>
</div>
<!--/ Page Inner End -->
@include('Admin.Includes.footer')

<script>
  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();


    // Add an event listener to the "Save changes" button
    document.getElementById('importCSVdata').addEventListener('click', function() {
        var inputFile = document.getElementById('fileInput').files[0];
        var formData = new FormData();
        formData.append('file', inputFile);

        // Send the AJAX request
        $.ajax({
            type: 'POST',
            url: '{{ route('Admin.Inventory.Import') }}',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
               alert('CSV data imported successfully');
               window.location.reload();
                
            },
            error: function(xhr, status, error) {
                // Handle errors here
                alert('Error: ' + error);
            }
        });
    });



  
</script>




{{-- <script>
    // Function to convert table data to CSV
    function convertToCSV(table) {
        var csv = [];
        var headers = [];
        var rows = table.querySelectorAll('tbody tr');
        var headerCols = table.querySelectorAll('thead th');

        // Extract headers, excluding the "Status" column
        for (var h = 0; h < headerCols.length; h++) {
            if (h !== 4) { // Exclude the "Status" column (index 4)
                headers.push(headerCols[h].innerText);
            }
        }

        csv.push(headers.join(','));

        for (var i = 0; i < rows.length; i++) {
            var row = [];
            var cols = rows[i].querySelectorAll('td');
            // Extract data from specific columns (Product, Sku, Stock, and Price)
            var product = cols[0].innerText;
            var sku = cols[1].innerText;
            var stock = cols[2].querySelector('input').value;
            var price = cols[3].querySelector('input').value;

            row.push(product, sku, stock, price);
            csv.push(row.join(','));
        }

        return csv.join('\n');
    }

    // Function to trigger the CSV download
    function downloadCSV() {
        var table = document.getElementById('filteredResults');
        var csv = convertToCSV(table);
        var blob = new Blob([csv], { type: 'text/csv' });
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(blob);
        a.download = 'table_data.csv';
        // a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    // Add click event listener to the button
    document.getElementById('exportCSV').addEventListener('click', downloadCSV);
</script> --}}

<script>
    document.getElementById('exportCSV').addEventListener('click', function() {
        // Perform an AJAX call to get the CSV data
        fetch('{{ route('admin.inventory.export-csv') }}', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token for security
            }
        })
        .then(response => response.blob()) // Get the response as a Blob (binary large object)
        .then(blob => {
            // Create a link element to trigger the download
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = 'all_products.csv';
            document.body.appendChild(a); // Append the link to the body
            a.click(); // Trigger the download
            window.URL.revokeObjectURL(url); // Clean up the URL object
            document.body.removeChild(a); // Remove the link element
        })
        .catch(error => console.error('Error:', error)); // Handle any errors
    });
</script>






<script>
    $('#inventoryBlukUpdate').submit(function(event) {
        event.preventDefault();

        const stockData = {};
        const priceData = {};
        const activeData = {};
        const stockStatusData = {};

        // Collect quantity
      

        // Collect price
        $('input[name^="_price"]').each(function() {
            const fieldName = $(this).attr('name'); // e.g., "_price[1]"
            const fieldId = fieldName.match(/\[(\d+)\]/)[1]; 
            const fieldValue = $(this).val();
            priceData[fieldId] = fieldValue;
        });

        // Collect active status
        $('select[name^="active"]').each(function() {
            const fieldName = $(this).attr('name'); // e.g., "active[1]"
            const fieldId = fieldName.match(/\[(\d+)\]/)[1];
            const fieldValue = $(this).val();
            activeData[fieldId] = fieldValue;
        });

        // Collect stock status (In Stock / Out of Stock)
        $('select[name^="_stock_status"]').each(function() {
            const fieldName = $(this).attr('name'); // e.g., "_stock_status[1]"
            const fieldId = fieldName.match(/\[(\d+)\]/)[1];
            const fieldValue = $(this).val();
            stockStatusData[fieldId] = fieldValue;
        });

        $.ajax({
            type: "POST",
            url: "{{ route('Admin.Product.Inventory.Update') }}",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: {
                _token: '{{ csrf_token() }}',
                _stock: stockData,
                _price: priceData,
                active: activeData,
                _stock_status: stockStatusData  // Send stock status data
            },
            success: function(response) {
                alert('Successfully Updated');
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
</script>



<script>
    $(document).ready(function() {
        $("#searchInventory").click(function() {
            value = $('#searchFilter').val();
            fetchedData(value);
        });
    });

    function fetchedData(value) {
        $.ajax({
            type: "GET",
            url: "{{ url('/') }}/admin/products/inventory/search",
            data: {
                '_token': '{{ csrf_token() }}',
                'value': value
            },
            success: function(response) {
                $('#filteredResults').empty();
                $('#filteredResults').append(response);
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    }
</script>