@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Product</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('create_product') }}" class="btn btn-primary">Add Product</a>
        </div>
    </div>
{{-- 
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif --}}

    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-12 col-md-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>

            <div class="col-12 col-lg">
                <div class="row g-2 justify-content-lg-end">
                    <div class="col-12 col-md-4 col-lg-3">
                        <input type="text" id="searchProductCode" class="form-control" placeholder="Search Product Code">
                    </div>
                    <div class="col-12 col-md-4 col-lg-3">
                        <input type="text" id="searchProductName" class="form-control" placeholder="Search Product Name">
                    </div>
                    <div class="col-12 col-md-4 col-lg-3">
                        <input type="text" id="searchRackNo" class="form-control" placeholder="Search Rack Number">
                    </div>
                    <div class="col-12 col-md-auto">
                        <button class="btn btn-label-secondary w-100">Export</button>
                    </div>
                </div>
            </div>

        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="productsTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Product Code</th>
                        <th>Product Name</th>
                        <th>Category</th>
                        <th>Stock</th>
                        <th>Purchase Price</th>
                        <th>Selling Price</th>
                        <th>Expiry Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Stock Update Modal --}}
    <div class="modal fade" id="stockUpdateModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Stock</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="stockUpdateForm" method="POST" action="{{ route('product.updateStock') }}">
                    @csrf
                    <div class="modal-body">
                            <input type="hidden" name="product_id" id="stockProductId">
                        <div class="mb-3">
                            <label class="form-label">Product Name</label>
                            <input type="text" id="stockProductName" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Current Stock</label>
                            <input type="text" id="stockCurrentStock" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Update Type</label>
<select class="form-select" id="stockType" name="type">
                                <option value="add">Add Stock</option>
                                <option value="remove">Remove Stock</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Quantity</label>
                            <!-- <input type="number" class="form-control" placeholder="Enter quantity"> -->
                              <input
        type="number"
        name="quantity"
        id="stockQuantity"
        class="form-control" placeholder="Enter quantity">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Remarks</label>
                            <!-- <textarea class="form-control" rows="3" placeholder="Reason for stock update"></textarea> -->
                              <textarea
        name="remarks"
        id="stockRemarks"
        class="form-control" placeholder="Reason for stock update"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" >Update Stock</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this product?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" id="submit_btn" class="btn btn-danger">Delete</button>
                    </form>
                </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.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('deleteForm').submit();
        });
</script>
    <script>
        $(document).ready(function () {

            const data = @json($products);

            const table = $('#productsTable').DataTable({
                data: data,
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                info: true,
                columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    { data: 'product_code' },
                    { data: 'product_name' },
                    { data: 'category' },
                    {
                        data: 'stock',
                        render: function (data) {
                            return `<span class="badge bg-label-info">${data}</span>`;
                        }
                    },
                    {
                        data: 'purchase_price',
                        render: function (data) {
                            return `₹${data}`;
                        }
                    },
                    {
                        data: 'selling_price',
                        render: function (data) {
                            return `₹${data}`;
                        }
                    },
                    { data: 'expiry_date' },
                    {
                        data: 'status',
                        render: function (data) {
                            if (data === 'Active') {
                                return `<span class="badge bg-label-success">Active</span>`;
                            }
                            return `<span class="badge bg-label-danger">Inactive</span>`;
                        }
                    },
{
    data: null,
    orderable: false,
    searchable: false,
    render: function (data, type, row) {
        return `
            <div class="dropdown">
                <button class="btn btn-sm btn-icon" data-bs-toggle="dropdown">
                    <i class="ti tabler-dots-vertical"></i>
                </button>

                <ul class="dropdown-menu">

                    <li>
                        <a class="dropdown-item" href="{{ route('view_product', '') }}/${row.id}">
                            <i class="ti tabler-eye me-2"></i> View
                        </a>
                    </li>

                    <li>
                        <a class="dropdown-item" href="{{ url('admin/product') }}/${row.id}/edit">
                            <i class="ti tabler-edit me-2"></i> Edit
                        </a>
                    </li>

                    <li>
                        <button
                            type="button"
                            class="dropdown-item stock-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#stockUpdateModal"
                            data-id="${row.id}"
                            data-name="${row.product_name}"
                            data-stock="${row.stock}">
                            <i class="ti tabler-package me-2"></i> Update Stock
                        </button>
                    </li>

                    <li>
                        <button
                            type="button"
                            class="dropdown-item delete-btn"
                            data-id="${row.id}"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteModal">
                            <i class="ti tabler-trash me-2"></i> Delete
                        </button>
                    </li>

                </ul>
            </div>
        `;
    }
}
                ]
            });

            // Page length
            $('#pageLength').on('change', function () {
                let length = $(this).val();
                if (length === 'All') {
                    table.page.len(-1).draw();
                } else {
                    table.page.len(parseInt(length)).draw();
                }
            });

            // Search filters
            $('#searchProductCode').on('keyup', function () {
                table.column(1).search(this.value).draw();
            });

            $('#searchProductName').on('keyup', function () {
                table.column(2).search(this.value).draw();
            });

            // Stock modal — fill product name and stock
            $('#productsTable').on('click', '.stock-btn', function () {
                $('#stockProductId').val($(this).data('id'));
                $('#stockProductName').val($(this).data('name'));
                $('#stockCurrentStock').val($(this).data('stock'));
            });

            // Delete modal — set form action
            $('#productsTable').on('click', '.delete-btn', function () {
                const id = $(this).data('id');
                $('#deleteForm').attr('action', `{{ url('admin/product') }}/${id}/delete`);
            });

        });
    </script>
@endsection