@php
    $selectedDate = $_GET['date'] ?? '';
@endphp

@extends('admin.layouts.layouts')

@section('title', 'View Stock | Products')

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            View Product Stock
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('product.index') }}">Products</a></li>
                <li class="breadcrumb-item active" aria-current="page">View Stock</li>
            </ol>
        </nav>
    </div>
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Product Stock</h5>
                <form action="{{ route('product.view-stock') }}" method="get" autocomplete="off">
                    <div class="d-flex align-items-center">
                        <input type="date" name="date" class="form-control mr-2" id="date"
                            placeholder="Select Date" value="{{ $selectedDate }}" required>
                        <button type="submit" class="btn btn-primary btn-sm mr-2">
                            Search
                        </button>
                        <a href="{{ route('product.view-stock') }}" class="btn btn-danger btn-sm">
                            Clear
                        </a>
                    </div>
                </form>
            </div>
            <form action="{{ route('product.update-stock') }}" method="POST" id="update-stock-form">
                @csrf
                <input type="hidden" name="date" id="date" value="{{ $selectedDate }}">
                <div class="card-body bg-white">
                    <div class="row">
                        <table id="product-stock-table" class="table table-bordered table-hover w-100">
                            <thead>
                                <tr>
                                    <th style="width: 30%;">Name</th>
                                    <th style="width: 15%;">Current Stock</th>
                                    <th style="width: 28%;" colspan="2">Stock</th>
                                    <th style="width: 17%;">Final Stock</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($product_stocks) > 0)
                                    @foreach ($product_stocks as $product_stock)
                                        <tr>
                                            <td>{{ $product_stock->product->name ?? '' }}</td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    name="stock[{{ $product_stock->product->id }}]"
                                                    id="stock_{{ $product_stock->product->id }}"
                                                    value="{{ $product_stock->stock ?? 0 }}" readonly>
                                            </td>
                                            <td colspan="2">
                                                <div class="input-group">
                                                    <select name="add_remove_stock[{{ $product_stock->product->id }}]"
                                                        id="add_remove_stock_{{ $product_stock->product->id }}"
                                                        class="form-control"
                                                        onchange="finalStock({{ $product_stock->product->id }})"
                                                        style="width: 35%;">
                                                        <option value="add">Plus (+)</option>
                                                        <option value="remove">Minus (-)</option>
                                                    </select>
                                                    <input type="text" class="form-control numeric"
                                                        name="new_stock[{{ $product_stock->product->id }}]"
                                                        id="new_stock_{{ $product_stock->product->id }}" value=""
                                                        placeholder="Enter Stock"
                                                        onkeyup="finalStock({{ $product_stock->product->id }})"
                                                        style="width: 65%;">
                                                </div>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                    name="final_stock[{{ $product_stock->product->id }}]"
                                                    id="final_stock_{{ $product_stock->product->id }}"
                                                    readonly>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr style="text-align:center;">
                                        <td colspan="2">Data not found!</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    @if (count($product_stocks) > 0)
                        <button type="submit" class="btn btn-primary">Save</button>
                    @endif
                </div>
            </form>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $('#update-stock-form').parsley();

        $(document).on('input', '.numeric', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        function finalStock(id) {
            var currentStock = parseFloat($(`#stock_${id}`).val()) || 0;
            var newStock = parseFloat($(`#new_stock_${id}`).val()) || 0;
            var stockType = $(`#add_remove_stock_${id}`).val();
            var finalStock = 0;

            if (newStock > 0) {
                if (stockType === "add") {
                    finalStock = currentStock + newStock;
                } else {
                    finalStock = currentStock - newStock;
                }

                if (finalStock >= 0) {
                    $(`#final_stock_${id}`).val(finalStock);
                } else {
                    $(`#final_stock_${id}`).val("");
                }
            } else {
                $(`#new_stock_${id}`).val("");
                $(`#final_stock_${id}`).val("");
            }
        }
    </script>
@endsection