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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="row">
        <div class="col-md-6">
    <h1>Stock Counts <br>
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-2">
        <div class="">
            <br><br>
    <a class="btn btn-primary" href="{{ route('stocktake.index') }}">Add Stock Take</a>
    
    <a href="{{ route('stocktake.excel.upload.form') }}" class="btn btn-success">
        <i class="fas fa-file-upload"></i> Excel Upload
    </a>

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

@if(session('success'))
    <div class="alert alert-success shk" id="flash-success" style="text-align:center; margin:10px 100px;">
        {!! session('success') !!}
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger shk" id="flash-error" style="text-align:center; margin:10px 100px;">
        {!! session('error') !!}
    </div>
@endif

<script>
    // Automatically hide flash messages after 2 seconds (2000ms)
    setTimeout(function() {
        const successMsg = document.getElementById('flash-success');
        const errorMsg = document.getElementById('flash-error');
        if(successMsg) successMsg.style.display = 'none';
        if(errorMsg) errorMsg.style.display = 'none';
    }, 2000);
</script>

<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('stocktake.create'))

  @endif
  <br>
  <form method="GET" action="{{ route('stocktake.stock') }}" class="mb-3 box box-primary" style="margin:0 20px; padding:10px; width: 1600px;">
    <div class="row">

        <!-- Location Filter -->
        <div class="col-md-3">
            <label>Location</label>
            <select name="location_id" class="form-control">
                <option value="">All Locations</option>
                @foreach($locations as $id => $name)
                    <option value="{{ $id }}" {{ request('location_id') == $id ? 'selected' : '' }}>
                        {{ $name }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Date Filter -->
        <div class="col-md-2">
            <label>Date</label>
            <select name="date_filter" id="date_filter" class="form-control">
                <option value="">All</option>
                <option value="today" {{ request('date_filter')=='today'?'selected':'' }}>Today</option>
                <option value="yesterday" {{ request('date_filter')=='yesterday'?'selected':'' }}>Yesterday</option>
                <option value="this_week" {{ request('date_filter')=='this_week'?'selected':'' }}>This Week</option>
                <option value="this_month" {{ request('date_filter')=='this_month'?'selected':'' }}>This Month</option>
                <option value="this_year" {{ request('date_filter')=='this_year'?'selected':'' }}>This Year</option>
                <option value="range" {{ request('date_filter')=='range'?'selected':'' }}>Date Range</option>
            </select>
        </div>

        <!-- Date Range -->
<div class="col-md-2 date-range {{ request('date_filter')=='range' ? '' : 'hidden' }}">
    <label>Start Date</label>
    <input type="date" name="start_date" value="{{ request('start_date') }}" class="form-control">
</div>

<div class="col-md-2 date-range {{ request('date_filter')=='range' ? '' : 'hidden' }}">
    <label>End Date</label>
    <input type="date" name="end_date" value="{{ request('end_date') }}" class="form-control">
</div>

<style>
    .hidden {
    display: none !important;
}
.card-bordered {
    border: 1px solid #E0D9D7;
    border-radius:5px;
}

</style>

        <!-- Buttons -->
        <div class="col-md-2 mt-3">
           <br>
            <button class="btn btn-primary">Filter</button>
            <a href="{{ route('stocktake.stock') }}" class="btn btn-secondary">Reset</a>
        </div>

    </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function () {

    function toggleDateRange() {
        if ($('#date_filter').val() === 'range') {
            $('.date-range').removeClass('hidden');
        } else {
            $('.date-range').addClass('hidden');
        }
    }

    // Hide on page load
    toggleDateRange();

    // Toggle on change
    $('#date_filter').on('change', toggleDateRange);

});
</script>

<div class="row  box box-primary" style="margin:10px 20px; padding:10px; width: 1600px;">
    <div class="col-md-2"></div>

    <div class="col-md-3">
        <div class="card card-bordered">
            <div class="card-body">
                <h5 class="card-title">Total Increase</h5>
                <p class="card-text text-black">{{ number_format($totals->total_increase ?? 0, 2) }}</p>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card card-bordered">
            <div class="card-body">
                <h5 class="card-title">Total Decrease</h5>
                <p class="card-text text-black">{{ number_format($totals->total_decrease ?? 0, 2) }}</p>
            </div>
        </div>
    </div>
</div>
<br>


<!-- Main content -->
<section class="content" style="margin-top:-35px !important">
    
    <div class="card">
        <div class="row">
            <div class="col-md-12">
                <!-- Stock Count Table -->
                <div class="box box-primary">
                <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Business Location</th>
                        <th>Added By</th>
                        <th>Created At</th>
                        <th>Ref No</th>
                        <th>Update Status</th> <!-- New column -->
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($stockCounts as $index => $stockCount)
                        <tr>
                            <td>{{ $index + 1 }}</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>
                                @if($stockCount->status === 'Updated')
                                    <span class="text-primary">Updated</span>
                                @else
                                    <span class="text-warning">Pending</span>
                                @endif
                            </td>
                            <td>
                                @if(auth()->user()->can('stocktake.view'))
                                    <button class="btn btn-info btn-sm" onclick="viewStockCount('{{ $stockCount->ref_no }}', '{{ $stockCount->location_id }}')">View</button>
                                @endif
                                @if(auth()->user()->can('stocktake.delete'))
                                    <form action="{{ route('stocktake.delete', $stockCount->ref_no) }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete all records with ref_no {{ $stockCount->ref_no }}?')">Delete</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            
            <div class="d-flex justify-content-end mt-3">
    {{ $stockCounts->links() }}
</div>

            </div>
        </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">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="stockCountModalLabel">Stock Count 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>Physical Quantity Count</th>
                            <th>System Stock Quantity</th>
                            <th>Comparison</th>
                            <th>Type</th>
                            <th>Stock Take 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('stocktake.update'))
	    <button type="button" class="btn btn-success" onclick="updateStock()">Update Stock</button> <!-- New button -->
	      @endif
	</div>
        </div>
    </div>
</div>

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

// Function to open modal and fetch stock count details
function viewStockCount(refNo, locationId) {
    currentRefNo = refNo;
    $('#modalLocationId').val(locationId); // set hidden location input

    $.ajax({
        url: '/stocktake/stock-count-details/' + refNo,
        method: 'GET',
        success: function(data) {
            const tableBody = $('#stockCountDetailsTable tbody');
            tableBody.empty();

            let totalIncreaseValue = 0;
            let totalDecreaseValue = 0;

            data.forEach(function(item, index) {
                const physicalQuantity = item.system_quantity ?? 0;
                const stockCount = item.stock_count ?? 0;
                const difference = physicalQuantity - stockCount;

                // Determine Type and CSS class
                let type = '';
                let typeClass = '';
                if (difference < 0) {
                    type = 'Increase';
                    typeClass = 'text-success';
                } else if (difference > 0) {
                    type = 'Decrease';
                    typeClass = 'text-primary';
                } else {
                    type = 'Balanced';
                    typeClass = '';
                }

                const displayDifference = Math.abs(difference);

                // Calculate value for totals
                const value = displayDifference * item.dpp_inc_tax;
                if (type === 'Increase') totalIncreaseValue += value;
                else if (type === 'Decrease') totalDecreaseValue += value;

                const row = `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.product_name}</td>
                        <td>${item.product_sku}</td>
                        <td>${stockCount}</td>
                        <td>${physicalQuantity}</td>
                        <td>${displayDifference.toFixed(4)}</td>
                        <td class="${typeClass}">${type}</td>
                        <td>${item.created_at}</td>
                    </tr>
                `;
                tableBody.append(row);
            });

            // Footer with totals
            const footer = `
                <tr style="background-color: #828181;color:white;">
                    <td colspan="7" style="text-align:right;">
                        <strong>Total Value of Increase:</strong> ${totalIncreaseValue.toFixed(2)}<br>
                        <strong>Total Value of Decrease:</strong> ${totalDecreaseValue.toFixed(2)}
                    </td>
                    <td></td>
                </tr>
            `;
            tableBody.append(footer);

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

// Print the stock count table
function printStockCount() {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    const doc = iframe.contentWindow.document;
    doc.open();
    doc.write('<html><head><title>Stock Count Details</title>');
    doc.write('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">');
    doc.write('</head><body>');
    doc.write('<h4>Stock Count Details</h4>');
    doc.write(document.getElementById('stockCountDetailsTable').outerHTML);
    doc.write('</body></html>');
    doc.close();

    iframe.contentWindow.onload = function() {
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
    };
}

// Update stock via AJAX
function updateStock() {
    const tableBody = $('#stockCountDetailsTable tbody');

    const stockUpdates = [];
    tableBody.find('tr').not(':last').each(function() { // skip footer row
        const stockCount = parseFloat($(this).find('td:nth-child(4)').text());
        const systemQuantity = parseFloat($(this).find('td:nth-child(5)').text());
        const productName = $(this).find('td:nth-child(2)').text().trim();
        const productSKU = $(this).find('td:nth-child(3)').text().trim();
        const typeText = $(this).find('td:nth-child(7)').text().trim();

        let difference = 0;
        if (typeText === 'Increase') difference = systemQuantity - stockCount ; // negative
        else if (typeText === 'Decrease') difference = systemQuantity - stockCount; // positive

        stockUpdates.push({
            productName: productName,
            productSKU: productSKU,
            stockCount: stockCount,
            difference: difference,
            type: typeText
        });
    });

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

    $.ajax({
        url: '/stocktake/update-stock',
        method: 'POST',
        data: {
            stockUpdates: stockUpdates,
            ref_no: currentRefNo,
            location_id: locationId,
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#error-message').hide();
            alert('Stock updated successfully!');
            $('#stockCountModal').modal('hide');
            location.reload(); // optional: reload to update the main table status
        },
        error: function(xhr) {
            const msg = xhr.responseJSON?.message || 'An error occurred while updating stock.';
            $('#error-message').text(msg).show();
        }
    });
}

// Toggle date range filter
$(document).ready(function () {
    function toggleDateRange() {
        if ($('#date_filter').val() === 'range') {
            $('.date-range').removeClass('hidden');
        } else {
            $('.date-range').addClass('hidden');
        }
    }

    toggleDateRange();
    $('#date_filter').on('change', toggleDateRange);
});
</script>


@endsection