@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content">

        <!-- Start Page Header -->
        <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
            <div class="flex-grow-1">
                <h4 class="fw-bold mb-0">{{ $module }}</h4>
            </div>
            <div class="text-end d-flex">
                <!-- dropdown-->
                <div class="dropdown me-1">
                    <a href="javascript:void(0);"
                        class="btn btn-md fs-14 fw-normal border bg-white rounded text-dark d-inline-flex align-items-center"
                        data-bs-toggle="dropdown">
                        Export<i class="ti ti-chevron-down ms-2"></i>
                    </a>
                    <ul class="dropdown-menu p-2">
                        <li>
                            <a class="dropdown-item" href="#">Download as PDF</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">Download as Excel</a>
                        </li>
                    </ul>
                </div>

                <a href="javascript:void(0);" class="btn btn-primary ms-2 fs-13 btn-md" data-bs-toggle="modal"
                    data-bs-target="#addModel"><i class="ti ti-plus me-1"></i>Add New Item</a>

            </div>
        </div>
        <!-- End Page Header -->

        <div class="table-responsive">
            <table class="table table-nowrap" id="datatable">
                <thead class="thead-light">
                    <tr>
                        <th>#ID</th>
                        <th>Prd. Code</th>
                        <th>Name</th>
                        <th>Batches</th>
                        <th>Packing</th>
                        <th>Item Per Pack</th>
                        <th>Quantity</th>
                        <th>HSN</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>



                </tbody>
            </table>
        </div>
    </div>
    <!-- End Content -->

</div>

<!-- ========================
   End Page Content
  ========================= -->




<!-- Start Delete Modal  -->
<div class="modal fade" id="delete_modal">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center position-relative z-1">
                <img src="assets/img/bg/delete-modal-bg-01.png" alt=""
                    class="img-fluid position-absolute top-0 start-0 z-n1">
                <img src="assets/img/bg/delete-modal-bg-02.png" alt=""
                    class="img-fluid position-absolute bottom-0 end-0 z-n1">
                <div class="mb-3">
                    <span class="avatar avatar-lg bg-danger text-white"><i class="ti ti-trash fs-24"></i></span>
                </div>
                <h5 class="fw-bold mb-1">Delete Confirmation</h5>
                <p class="mb-3">Are you sure want to delete?</p>
                <div class="d-flex justify-content-center">
                    <div class="d-flex justify-content-center">
                        <a href="javascript:void(0);" class="btn btn-light position-relative z-1 me-3"
                            data-bs-dismiss="modal">Cancel</a>
                        <form id="deleteForm" method="POST" class="modal-content">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-danger position-relative z-1">Yes, Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="stockAdjustmentModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="m-0"></h5>
            </div>
            <div class="modal-body">
                <form id="stockAdjustmentForm">
                    <input type="hidden" class="id-input" name="id" hidden="">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">Stock</span>
                        <input type="number" class="form-control qty-input fw-bold" placeholder="Enter Qty">
                        <button class="btn btn-primary" type="submit" id="button-addon2">Update</button>
                    </div>
                </form>
            </div>
        </div>
        
    </div>
</div>



<!-- DataTables  -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>


<script>
    $(document).ready(function() {


        var table = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            lengthMenu: [
                [25, 50, 150, 500],
                [25, 50, 150, 500]
            ],
            ajax: '',
            order: [
                [0, "desc"]
            ],
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'product_code',
                    name: 'product_code'
                },
                {
                    data: 'name',
                    name: 'name',
                    className: 'fw-bold text-primary',
                },
                {
                    data: 'batches',
                    name: 'batches',
                },
                {
                    data: 'packing',
                    name: 'packing',
                },
                {
                    data: 'item_per_pack',
                    name: 'item_per_pack'
                },
                {
                    data: 'quantity',
                    name: 'quantity'
                },
                {
                    data: 'hsn',
                    name: 'hsn'
                },
                {
                    data: 'status',
                    name: 'status'
                },

                {
                    data: 'actions',
                    name: 'actions',
                    className: 'action-item',
                    orderable: false,
                    searchable: false
                }
            ]

        });

        $(document).on('click', '.delete_modal', function() {
            const id = $(this).data('id');
            const url = $(this).data('url');
            $('#deleteForm').attr('action', url);
            $('#delete_modal').modal('show');
        });


        $(document).on('click', '.stock_adjustment_btn', function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            let name = $(this).data('name');
            let qty = $(this).data('qty');

            $('#stockAdjustmentModal h5').text(name);
            $('#stockAdjustmentModal .id-input').val(id);
            $('#stockAdjustmentModal .qty-input').val(qty);

            $('#stockAdjustmentModal').modal('show');
            setTimeout(() => {
                $('#stockAdjustmentModal .qty-input').focus();
            }, 200);

        });


        $(document).on('submit', '#stockAdjustmentForm', function(e) {
            e.preventDefault();
            let id = $('.id-input').val();
            let qty = $('.qty-input').val();

            $.post("{{ route('pharmacy-item.stock.update') }}", {
                _token: $('meta[name="csrf-token"]').attr('content'),
                id: id,
                qty: qty
            }, function(data) {
                successAlert(data.message);
                $('#stockAdjustmentModal').modal('hide');
                $('#datatable').DataTable().ajax.reload();
            });
        });

       

    });
</script>
@include('pharmacy::add-item')
@include('layouts.footer')