@extends('Branch.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>
        </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">

                    {{-- 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>
    <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,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                ajax: {
                    url: "{{ route('branch.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('branch.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('branch.low_stock_print') }}?" + params.toString(), '_blank');
            });
        });
    </script>

    <script>

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

            e.preventDefault();

            const form = this;

            const submitBtn = $('#stockSubmitBtn');

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

            $.ajax({

                url: "{{ route('branch.branch_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('success', response.message,);
                    }
                },

                error: function (xhr) {

                    let message = 'Something went wrong.';

                    if (xhr.responseJSON) {

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

                    showToast('error', message);
                },

                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>'
            );
            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'
                );
            }
            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>
@endsection