@extends('layouts.app')
@section('title', 'Stock Request')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Stock Request <br>
        <small>@lang('Stock Request Update')</small></h1>
</section>



<style>
    .card {
        background-color: white;
        border-radius: 0px;
        padding: 20px;
    }

    .adb {
        display: flex;
        justify-content: flex-end;
        margin-right: 40px;
    }

    .modal-body {
        max-height: 400px;
        overflow-y: auto;
    }

    .modal table {
        font-size: 16px;
        width: 100%;
    }

    .modal table th, .modal table td {
        text-align: left;
        padding: 10px;
    }

    .modal table th {
        background-color: #f2f2f2;
    }

    .modal table tbody tr:nth-child(even) {
        background-color: #fcf2f2;
    }

    .modal table tbody tr:nth-child(odd) {
        background-color: #eef7e1;
    }

    .modal table td {
        word-wrap: break-word;
        max-width: 200px;
    }

    .modal table td .value {
        font-weight: bold;
    }
</style>

  @if(auth()->user()->can('stockrequestupdate.create'))

  @endif

<!-- Main content -->
<section class="content">
    <div class="card">
        <div class="row">
            <div class="col-md-12">
<!-- Pagination Control -->
<div class="row mb-3">
    <div class="col-md-2">
        <label for="rowCount">Show rows:</label>
        <select id="rowCount" class="form-control">
            <option value="25" selected>25</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="250">250</option>
            <option value="500">500</option>
            <option value="1000">1000</option>
            <option value="all">All</option>
        </select>
    </div>
</div>

<!-- Stock Count Table -->
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Request From</th>
            <th>Request To</th>
            <th>Request By</th>
            <th>Created At</th>
            <th>Ref No</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($stockCounts as $index => $stockCount)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $stockCount->request_from_name }}</td>
                <td>{{ $stockCount->location_name }}</td>
                <td>{{ $stockCount->first_name }}</td>
                <td>{{ \Carbon\Carbon::parse($stockCount->created_at)->format('d/m/Y H:i') }}</td>
                <td>{{ $stockCount->ref_no }}</td>
                <td style="display:none;">{{ $stockCount->location_id }}</td>
                <td style="display:none;">{{ $stockCount->request_from_id }}</td>
                <td>
                    @php
                        $transactionExists = DB::table('transactions')
                            ->where('ref_no', $stockCount->ref_no)
                            ->exists();
                    @endphp

                    @if($transactionExists)
                        <span class="label label-success">Stock Transferred</span>
                    @else
                        <span class="label label-warning">Pending</span>
                    @endif
                </td>

                <td>
                    @if(auth()->user()->can('stockrequest.view'))
                        <button class="btn btn-info btn-sm"
                            onclick="viewStockCount('{{ $stockCount->ref_no }}', '{{ $stockCount->location_id }}', '{{ $stockCount->request_from_id }}')">View</button>
                    @endif

                    @if(auth()->user()->can('stockrequest.delete'))
                        <button class="btn btn-danger btn-sm"
                            onclick="deleteStockRequest('{{ $stockCount->ref_no }}', '{{ $stockCount->location_id }}', '{{ $stockCount->request_from_id }}')">Delete</button>
                    @endif
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

<!-- Styles -->
<style>
    .row.mb-3 {
        margin-bottom: 20px;
    }

    select#rowCount {
        padding: 6px;
        font-size: 14px;
    }
</style>

<!-- Script to Control Row Display -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rowCountSelect = document.getElementById('rowCount');
        const tableBody = document.querySelector('table tbody');
        const allRows = Array.from(tableBody.querySelectorAll('tr'));

        function updateVisibleRows() {
            const selectedValue = rowCountSelect.value;
            const count = selectedValue === 'all' ? allRows.length : parseInt(selectedValue);

            allRows.forEach((row, index) => {
                row.style.display = index < count ? '' : 'none';
            });
        }

        // Initial display
        updateVisibleRows();

        // Update display on selector change
        rowCountSelect.addEventListener('change', updateVisibleRows);
    });
</script>

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

<!-- Modal for viewing Stock Count details -->
<div class="modal fade" id="stockCountModal" tabindex="-1" role="dialog" aria-labelledby="stockCountModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
    <!-- Error Message Area -->
<div id="error-message" class="alert alert-danger" style="display: none;"></div>

<!-- Hidden location_id field -->
<input type="hidden" name="location_id" id="modalLocationId">
<input type="hidden" name="request_from_id" id="modalRequestFromId">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="stockCountModalLabel">Stock Request Details</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered" id="stockCountDetailsTable">
                    <thead style="text-align:center;">
                        <tr>
                            <th>#</th>
                            <th>Product Name</th>
                            <th>SKU</th>
                            <th>Request Quantity</th>

                            <th>Stock Request Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be populated via JavaScript -->
                    </tbody>
                </table>
            </div>
           <div class="modal-footer">
	    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	    <button type="button" class="btn btn-primary" onclick="printStockCount()">Print</button>
	    @if(auth()->user()->can('stockrequest.update'))
	    <button type="button" class="btn btn-success" onclick="updateStock()">Update Stock Request</button> <!-- New button -->
	      @endif
	</div>
        </div>
    </div>
</div>

<script>
let currentRefNo; // Global variable to store the current ref_no

function viewStockCount(refNo, locationId, requestFromId) {
    currentRefNo = refNo;

    // Set the location_id and request_from_id in hidden fields
    $('#modalLocationId').val(locationId);
    $('#modalRequestFromId').val(requestFromId);  // Set the new hidden field

    // Make AJAX request to fetch stock count details
    $.ajax({
        url: '/stockrequestupdate/stock-count-details/' + refNo,
        method: 'GET',
        success: function(data) {
            // Populate the modal with stock count details
            var tableBody = $('#stockCountDetailsTable tbody');
            tableBody.empty();

            data.forEach(function(item, index) {
                var stockCount = (item.stock_count === null ? 0 : item.stock_count);

                var row = '<tr>' +
                    '<td>' + (index + 1) + '</td>' +
                    '<td>' + item.product_name + '</td>' +
                    '<td>' + item.product_sku + '</td>' +
                    '<td><input type="number" class="request-quantity-input" value="' + stockCount + '"></td>' +
                    '<td>' + item.created_at + '</td>' +
                    '</tr>';
                tableBody.append(row);
            });

            var footer = '<tr style="background-color: #828181;color:white;"></tr>';
            tableBody.append(footer);

            $('#stockCountModal').modal('show');
        },
        error: function() {
            alert('An error occurred while fetching the stock request details.');
        }
    });
}



function printStockCount() {
    // Create an iframe for printing
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    
    var doc = iframe.contentWindow.document;
    doc.open();
    doc.write('<html><head><title>Stock Request Details</title>');
    doc.write('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">'); // Include Bootstrap CSS
    doc.write('</head><body>');
    doc.write('<h4>Stock Request Details</h4>');
    doc.write(document.getElementById('stockCountDetailsTable').outerHTML); // Get the table HTML
    doc.write('</body></html>');
    doc.close();
    
    // Wait for the iframe to load and then print
    iframe.contentWindow.onload = function() {
        iframe.contentWindow.print();
        document.body.removeChild(iframe); // Remove the iframe after printing
    };
}

function updateStock() {
    // Gather data from the modal
    const tableBody = $('#stockCountDetailsTable tbody');
    const stockUpdates = [];

    tableBody.find('tr').each(function() {
        const productName = $(this).find('td:nth-child(2)').text();
        const productSku = $(this).find('td:nth-child(3)').text();
        const stockCount = parseFloat($(this).find('input.request-quantity-input').val()); // Get value from input
        const transferqty = stockCount;

        stockUpdates.push({
            productName: productName,
            productSku: productSku,
            stockCount: stockCount,
            transferqty: transferqty
        });
    });

    const locationId = $('#modalLocationId').val();
    const requestFrom = $('#modalRequestFromId').val();

    // Make an AJAX request to update stock
    $.ajax({
        url: '/stockrequestupdate/update-stock',
        method: 'POST',
        data: {
            stockUpdates: stockUpdates,
            ref_no: currentRefNo,
            location_id: locationId,
            request_from_id: requestFrom,
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#error-message').hide();
            alert('Stock updated successfully!');
            $('#stockCountModal').modal('hide');
        },
        success: function(response) {
            $('#error-message').hide();
            alert('Stock updated successfully!');
            $('#stockCountModal').modal('hide');
            location.reload(); // ⬅️ This line reloads the page after success
        },
        error: function(xhr) {
            $('#error-message').text(xhr.responseJSON.message).show();
        }
    });
}

function deleteStockRequest(refNo, locationId, requestFromId) {
    if (confirm('Are you sure you want to delete this stock request?')) {
        $.ajax({
            url: '/stockrequestupdate/delete-stock-request/' + refNo, // Define your route
            method: 'DELETE',
            data: {
                location_id: locationId,
                request_from_id: requestFromId,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                alert('Stock request deleted successfully!');
                location.reload(); // Refresh the page
            },
            error: function(xhr) {
                alert('An error occurred while deleting the stock request.');
            }
        });
    }
}



</script>


@endsection