@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="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 Name</th>
                    <th>Category</th>
                    <th>Stock</th>
                    <th>Batch</th>
                    <th>Purchase Price</th>
                    <th>Selling Price</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" value="{{ old('product_id') }}">
                    <input type="hidden" name="product_name" id="hiddenProductName"
                        value="{{ old('product_name') }}">

                    <input type="hidden" name="current_stock" id="hiddenCurrentStock"
                        value="{{ old('current_stock') }}">
                    <div class="mb-3">
                        <label class="form-label">Product Name</label>
                        <input type="text" id="stockProductName" class="form-control bg-light"
                            value="{{ old('product_name') }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Current Stock</label>
                        <input type="text" id="stockCurrentStock" class="form-control bg-light"
                            value="{{ old('current_stock') }}" 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 @error('quantity') is-invalid @enderror" placeholder="Enter quantity"
                            value="{{ old('quantity') }}">
                        @error('quantity')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Batch Number *</label>
                        <input type="text" name="batch_number"
                            class="form-control @error('batch_number') is-invalid @enderror"
                            value="{{ old('batch_number') }}">
                        @error('batch_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3" id="expiryDateDiv">
                        <label class="form-label">Expiry Date *</label>
                        <input type="date" name="expiry_date"  min="{{ date('Y-m-d') }}" 
                            class="form-control @error('expiry_date') is-invalid @enderror"
                            value="{{ old('expiry_date') }}">
                        @error('expiry_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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 @error('remarks') is-invalid @enderror"
                            placeholder="Reason for stock update">{{ old('remarks') }}</textarea>
                        @error('remarks')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="updateStockText" 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>

                <button type="button"
                        id="submit_btn"
                        class="btn btn-danger">
                    <span id="submit_btn_text">
                        <i class="ti tabler-trash me-1"></i>
                        Yes, Delete
                    </span>
                </button>

                <form id="deleteForm"
                      method="POST">
                    @csrf
                </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>
$('#submit_btn').on('click', function () {

    $(this).prop('disabled', true);

    $('#submit_btn_text').html(`
        <span class="spinner-border spinner-border-sm me-1"></span>
        Processing...
    `);

    $('#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_name'
            },
            {
                data: 'category'
            },
            {
                data: 'stock',
                render: function(data) {
                    return `<span class="badge bg-label-info">${data}</span>`;
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `
                        <button
                            type="button"
                            class="btn btn-sm btn-label-warning view-batch-btn"
                            data-id="${row.id}">
                            View Batch
                        </button>
                    `;
                }
            },
            {
                data: 'purchase_price',
                render: function(data) {
                    return `₹${data}`;
                }
            },
            {
                data: 'selling_price',
                render: function(data) {
                    return `₹${data}`;
                }
            },

            {
                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(1).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'));
        $('#hiddenProductName').val($(this).data('name'));
        $('#hiddenCurrentStock').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`);
    });

    $('#productsTable').on('click', '.view-batch-btn', function() {
        let id = $(this).data('id');
        window.location.href = "{{ url('admin/view_batch') }}/" + id;
    });


    $('#stockUpdateForm').on('submit', function () {

        let btn = $('#updateStockText');

        btn.prop('disabled', true);
        btn.html(`
            <span class="spinner-border spinner-border-sm me-1"></span>
            Processing...
        `);

    });


    function toggleStockFields() {

    let type = $('#stockType').val();

    if (type === 'add') {
        $('#expiryDateDiv').show();
        $('#expiryDate').prop('required', true);
    } else {
        $('#expiryDateDiv').hide();
        $('#expiryDate').prop('required', false).val('');
    }
}

toggleStockFields();

$('#stockType').on('change', function () {
    toggleStockFields();
});
});
</script>
@if ($errors->any() || session('error'))
<script>
$(function () {

    let modal = new bootstrap.Modal(document.getElementById('stockUpdateModal'));

    modal.show();

    let btn = $('#updateStockText');

    btn.prop('disabled', false);
    btn.html('Update Stock');

});
</script>
@endif
@endsection