@extends('Kitchen.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <style>
        .dt-search {
            display: none;
        }

        #usersTable {
            width: 100% !important;
        }
    </style>

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5 class="d-flex align-items-center">
                {{-- <a href="{{ route('branch.product') }}" class="btn btn-white btn-icon me-3"
                    style="box-shadow: 0px 4px 10px rgba(0,0,0,0.08);">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 18l-6-6 6-6" />
                    </svg>
                </a> --}}
                Low Stock Products
            </h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button id="printBtn" class="btn btn-label-secondary">Print</button>
            <button id="exportBtn" class="btn btn-label-secondary">Export</button>
            <button id="uploadStockBtn" class="btn btn-label-secondary" data-bs-toggle="modal"
                data-bs-target="#uploadStockView">Upload Stock</button>
            {{-- <button id="historyBtn" class="btn btn-label-secondary" data-bs-toggle="modal"
                data-bs-target="#stockHistoryView">History</button> --}}
            <a href="{{ route('kitchen.kitchen_stock_history') }}" class="btn btn-label-secondary">History</a>

        </div>
    </div>

    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-end p-3 g-2">
            <div class="col-md-3">
                <label class="form-label mb-1">Product ID</label>
                <input type="text" id="productIdSearch" class="form-control" placeholder="Search Product ID">
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1">Product Name</label>
                <input type="text" id="productNameSearch" class="form-control" placeholder="Search Product Name">
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1">Category</label>
                <select id="categoryFilter" class="form-select">
                    <option value="">All Categories</option>
                    @foreach($categories ?? [] as $category)
                        <option value="{{ $category->id }}">{{ $category->category }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <button id="resetBtn" class="btn btn-outline-secondary w-100">Reset</button>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Category</th>
                        <th>Stock</th>
                        <th>Stock Limit</th>
                        <th>MRP</th>
                        <th>Price</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- <div class="modal fade" id="addStockView" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-md modal-dialog-centered">

            <div class="modal-content rounded-4 p-4">

                <form id="addStockForm">

                    @csrf

                    <input type="hidden" name="product_id" id="stock_product_id">

                    <input type="hidden" id="stock_product_type">

                    <h5 class="mb-3 text-center fw-bold">
                        Update Stock Quantity
                    </h5>

                    <!-- Product Name -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Product
                        </label>

                        <input type="text" id="stock_product_name" class="form-control" readonly>
                    </div>

                    <!-- Current Stock -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Current Stock
                        </label>

                        <input type="text" id="current_stock" class="form-control" readonly>
                    </div>

                    <!-- Stock Quantity -->
                    <div class="mb-3">

                        <label class="form-label fw-semibold">
                            Stock Quantity
                            <span class="text-danger">*</span>
                        </label>

                        <input type="number" name="stock" id="stock_quantity" class="form-control"
                            placeholder="Enter Quantity" required min="0.001" step="0.001">

                        <small class="text-muted" id="stockHelp"></small>

                    </div>

                    <!-- Stock Unit -->
                    <div class="mb-3">

                        <label class="form-label fw-semibold">
                            Stock Unit
                            <span class="text-danger">*</span>
                        </label>

                        <select name="stock_unit" id="stock_unit" class="form-select" required>

                            <option value="">
                                Select Stock Unit
                            </option>

                        </select>

                    </div>

                    <!-- Packed Date -->
                    <div class="mb-3">

                        <label class="form-label fw-semibold">
                            Packed Date
                            <span class="text-muted">(optional)</span>
                        </label>

                        <input type="date" name="packed_date" class="form-control">

                    </div>

                    <!-- Expiry Date -->
                    <div class="mb-3">

                        <label class="form-label fw-semibold">
                            Expiry Date
                            <span class="text-muted">(optional)</span>
                        </label>

                        <input type="date" name="expiry_date" class="form-control">

                    </div>

                    <!-- Buttons -->
                    <div class="d-flex justify-content-end gap-2 mt-4">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" id="stockSubmitBtn" class="btn btn-primary">
                            Save Stock
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div> --}}

    <div class="modal fade" id="addStockView" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content rounded-4 p-4">

                <form id="addStockForm">
                    @csrf

                    <input type="hidden" name="product_id" id="stock_product_id">

                    {{-- Hidden product stock type --}}
                    <input type="hidden" id="stock_product_type">

                    <h5 class="mb-3 text-center fw-bold">
                        Update Stock Quantity
                    </h5>

                    {{-- Stock Quantity --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Stock Quantity
                            <span class="text-danger">*</span>
                        </label>

                        <input type="number" name="stock" id="stock_quantity" class="form-control"
                            placeholder="Enter Quantity" required min="0.001" step="0.001">

                        <small class="text-muted" id="stockHelp">
                        </small>
                    </div>

                    {{-- Stock Unit --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Stock Unit
                            <span class="text-danger">*</span>
                        </label>

                        <select name="stock_unit" id="stock_unit" class="form-select" required>

                            <option value="">
                                Select Stock Unit
                            </option>

                        </select>
                    </div>

                    {{-- Packed Date --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Packed Date
                            <span class="text-muted">(optional)</span>
                        </label>

                        <input type="date" name="packed_date" class="form-control">
                    </div>

                    {{-- Expiry Date --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Expiry Date
                            <span class="text-muted">(optional)</span>
                        </label>

                        <input type="date" name="expiry_date" class="form-control">
                    </div>

                    {{-- Buttons --}}
                    <div class="d-flex justify-content-end gap-2 mt-4">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" id="stockSubmitBtn" class="btn btn-primary">
                            Save Stock
                        </button>

                    </div>

                </form>

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

    <div class="modal fade" id="uploadStockView" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 p-4">
                <form id="uploadStockForm">
                    @csrf
                    <h5 class="mb-3 text-center fw-bold">Upload Stock Sheet</h5>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">CSV File</label>
                        <input type="file" name="stock_file" id="stock_file" class="form-control" accept=".csv" required>
                        <small class="text-muted">Use the exported sheet with the "New Stock" column filled in.</small>
                    </div>
                    <div id="uploadResultBox" class="small mb-3" style="display:none;"></div>
                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="uploadSubmitBtn" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="stockHistoryView" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-4 p-4">
                <h5 class="mb-3 fw-bold">Stock Addition History</h5>
                <div class="table-responsive">
                    <table class="table" id="stockHistoryTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Product ID</th>
                                <th>Product Name</th>
                                <th>Old Stock</th>
                                <th>Added</th>
                                <th>New Stock</th>
                                <th>Unit</th>
                                <th>Source</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            const table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    url: "{{ route('kitchen.low_stock_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.product_id = $('#productIdSearch').val();
                        d.product_name = $('#productNameSearch').val();
                        d.category = $('#categoryFilter').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'product_id' },
                    { data: 'product_name' },
                    { data: 'category' },
                    { data: 'stock' },
                    { data: 'stock_limit' },
                    { data: 'mrp' },
                    { data: 'price' },
                    { data: 'action', orderable: false, searchable: false }
                ]
            });

            let searchTimer;
            $('#productIdSearch, #productNameSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => table.ajax.reload(), 400);
            });

            $('#categoryFilter').on('change', function () {
                table.ajax.reload();
            });

            $('#resetBtn').on('click', function () {
                $('#productIdSearch, #productNameSearch').val('');
                $('#categoryFilter').val('');
                table.ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    product_id: $('#productIdSearch').val(),
                    product_name: $('#productNameSearch').val(),
                    category: $('#categoryFilter').val()
                });
                window.location.href = "{{ route('kitchen.low_stock_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    product_id: $('#productIdSearch').val(),
                    product_name: $('#productNameSearch').val(),
                    category: $('#categoryFilter').val()
                });
                window.open("{{ route('kitchen.low_stock_print') }}?" + params.toString(), '_blank');
            });
        });
    </script>

    <script>

        $('#uploadStockForm').on('submit', function (e) {
            e.preventDefault();
            const submitBtn = $('#uploadSubmitBtn');
            submitBtn.prop('disabled', true).text('Uploading...');

            $.ajax({
                url: "{{ route('kitchen.kitchen_stock_import') }}",
                type: "POST",
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (response) {
                    $('#uploadResultBox').show().html(
                        '<div class="alert alert-info mb-0">' + response.message +
                        (response.skipped.length
                            ? '<br><small>' + response.skipped.join('<br>') + '</small>' : '') +
                        '</div>'
                    );
                    if (response.updated.length) {
                        $('#usersTable').DataTable().ajax.reload(null, false);
                        showToast(response.message, 'success');
                        $('#uploadStockForm')[0].reset(); // clear file input after success
                    }
                },
                error: function (xhr) {
                    const message = xhr.responseJSON?.message || 'Unable to import stock.';
                    // showToast(message, 'bg-danger');
                    showToast(message, 'error');
                },
                complete: function () {
                    submitBtn.prop('disabled', false).text('Upload');
                }
            });
        });

        let historyTable = null;
        $('#stockHistoryView').on('shown.bs.modal', function () {
            if (historyTable) {
                historyTable.ajax.reload();
                return;
            }
            historyTable = $('#stockHistoryTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: { url: "{{ route('kitchen.stock_history_data') }}", type: "GET" },
                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'product_id' },
                    { data: 'product_name' },
                    { data: 'old_stock' },
                    { data: 'added_stock' },
                    { data: 'new_stock' },
                    { data: 'stock_unit' },
                    { data: 'source_badge' },
                    { data: 'created_at' }
                ]
            });
        });
        $('#uploadStockView').on('show.bs.modal', function () {
            $('#uploadStockForm')[0].reset();
            $('#uploadResultBox').hide().empty();
        });
    </script>


    {{--
    <script>

        $('#addStockForm').on('submit', function (e) {

            e.preventDefault();

            const form = this;

            const submitBtn = $('#stockSubmitBtn');

            submitBtn.prop('disabled', true)
                .text('Saving...');

            $.ajax({

                url: "{{ route('kitchen.kitchen_addStock') }}",

                type: "POST",

                data: new FormData(form),

                processData: false,

                contentType: false,

                success: function (response) {

                    if (response.status) {

                        $('#addStockView').modal('hide');

                        $('#addStockForm')[0].reset();

                        // Reload DataTable
                        $('#lowStockTable')
                            .DataTable()
                            .ajax
                            .reload(null, false);

                        // Success message
                        alert(response.message);
                    }
                },

                error: function (xhr) {

                    let message = 'Something went wrong.';

                    if (xhr.responseJSON) {

                        message =
                            xhr.responseJSON.message ||
                            'Unable to update stock.';
                    }

                    alert(message);
                },

                complete: function () {

                    submitBtn.prop('disabled', false)
                        .text('Save Stock');
                }

            });

        });
    </script> --}}


    <script>

        $('#addStockForm').on('submit', function (e) {

            e.preventDefault();

            const form = this;

            const submitBtn = $('#stockSubmitBtn');

            submitBtn.prop('disabled', true)
                .text('Saving...');

            $.ajax({

                url: "{{ route('kitchen.kitchen_addStock') }}",

                type: "POST",

                data: new FormData(form),

                processData: false,

                contentType: false,

                success: function (response) {

                    if (response.status) {

                        $('#addStockView').modal('hide');

                        $('#addStockForm')[0].reset();

                        // Reload DataTable
                        $('#usersTable')
                            .DataTable()
                            .ajax
                            .reload(null, false);

                        // Success Toast
                        // showToast(response.message, 'bg-success');
                        showToast(response.message, 'success');

                    }
                },

                error: function (xhr) {

                    let message = 'Something went wrong.';

                    if (xhr.responseJSON) {

                        message =
                            xhr.responseJSON.message ||
                            'Unable to update stock.';
                    }

                    // showToast(message, 'bg-danger');
                    showToast(message, 'error');

                },

                complete: function () {

                    submitBtn.prop('disabled', false)
                        .text('Save Stock');
                }

            });

        });

    </script>


    <script>
        $(document).on('click', '.addStockBtn', function () {

            const productId = $(this).data('id');
            const stockType = String($(this).data('stock-type')).toLowerCase();

            console.log('Add Stock clicked:', {
                product_id: productId,
                stock_type: stockType
            });

            $('#stock_product_id').val(productId);
            $('#stock_product_type').val(stockType);

            const unitSelect = $('#stock_unit');
            const quantityInput = $('#stock_quantity');

            // Clear old values
            unitSelect.empty();
            quantityInput.val('');

            unitSelect.append(
                '<option value="">Select Stock Unit</option>'
            );

            /*
            |--------------------------------------------------------------------------
            | KG / Weight Product
            |--------------------------------------------------------------------------
            */
            if (stockType === 'kg' || stockType === 'weight') {

                unitSelect.append(
                    '<option value="kg">KG</option>'
                );

                quantityInput
                    .attr('min', '0.001')
                    .attr('step', '0.001');

                $('#stockHelp').text(
                    'Enter quantity in KG. Example: 0.5, 1.5, 2.75'
                );
            }

            /*
            |--------------------------------------------------------------------------
            | PCS Product
            |--------------------------------------------------------------------------
            */
            else if (stockType === 'pcs') {

                unitSelect.append(
                    '<option value="pcs">PCS</option>'
                );

                quantityInput
                    .attr('min', '1')
                    .attr('step', '1');

                $('#stockHelp').text(
                    'Enter whole number of pieces. Example: 10, 50, 100'
                );
            }

            else {

                console.warn('Unknown stock type:', stockType);

                $('#stockHelp').text(
                    'Invalid stock type for this product.'
                );
            }

        });

    </script>

    {{--
    <script>

        $(document).on('click', '.addStockBtn', function () {

            const productId = $(this).data('id');
            const productName = $(this).data('name');
            const stockType = String(
                $(this).data('stock-type') || ''
            ).toLowerCase().trim();

            console.log('Add Stock:', {
                productId: productId,
                productName: productName,
                stockType: stockType
            });

            $('#stock_product_id').val(productId);

            $('#stock_product_type').val(stockType);

            $('#stock_product_name').val(productName);

            $('#stock_quantity').val('');

            $('#stockHelp').text('');

            const unitSelect = $('#stock_unit');

            unitSelect.empty();

            unitSelect.append(
                '<option value="">Select Stock Unit</option>'
            );


            // ==========================
            // KG
            // ==========================

            if (stockType === 'kg') {

                unitSelect.append(
                    '<option value="kg">KG</option>'
                );

                unitSelect.val('kg');

                $('#stock_quantity')
                    .attr('min', '0.001')
                    .attr('step', '0.001');

                $('#stockHelp').text(
                    'Enter quantity in KG. Example: 0.5, 1.5, 2.75'
                );
            }


            // ==========================
            // PCS
            // ==========================

            else if (stockType === 'pcs') {

                unitSelect.append(
                    '<option value="pcs">PCS</option>'
                );

                unitSelect.val('pcs');

                $('#stock_quantity')
                    .attr('min', '1')
                    .attr('step', '1');

                $('#stockHelp').text(
                    'Enter whole number of pieces. Example: 10, 50, 100'
                );
            }


            // ==========================
            // Invalid
            // ==========================

            else {

                console.warn(
                    'Unknown stock type:',
                    stockType
                );

                $('#stockHelp').text(
                    'Invalid stock type for this product.'
                );
            }

        });
    </script> --}}
@endsection