@extends('admin.layout.master')
@section('title', 'Stock Count')
@section('custom_style')@endsection
@section('content')
    <div class="cl-card card border-secondary border-opacity-50 rounded-2">
        <div class="card-header px-2 d-flex justify-content-between align-items-center">
            <h6 class="card-title m-0">Stock Count</h6>
            <a href="{{ route('stock_count.index') }}" class="btn btn-success btn-sm">Index</a>
        </div>
        <div class="card-body">
            <div class="row">
                <span id="success_msg"></span>
            </div>
            <div class="row mt-4">
                <div class="col-2"></div>

                <div class="col-2">
                    <label>Quantity</label>
                    <input type="number" id="quantity" name="quantity" class="form-control" value="1"/>
                    <span id="quantity_error" style="color: red"></span>
                </div>
                <div class="col-2">
                    <label>Code</label>
                    <input type="text" id="code" name="code" class="form-control" onchange="submitForm()" autofocus/>
                    <span id="code_error" style="color: red"></span>
                </div>

                <!-- <div class="col-2">
                    <label>Date</label>
                    <input type="text" id="date" name="date" class="form-control date_picker" />
                    <span id="date_error" style="color: red"></span>
                </div> -->

                <div class="col-2">
                    <label>&nbsp;</label>
                    <button type="submit" class="btn btn-primary btn-sm btn-block" onclick="submitForm()">Submit</button>
                </div>
            </div>
            <div class="row">
                <table class="table mb-0 rounded-2 cl-bg-gray-100 cl-table table-sm" style="min-width: 992px">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Buy Price</th>
                            <th>Sales Price</th>
                            <th>Count</th>
                        </tr>
                    </thead>
                    <tbody id="stock_count_table">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function submitForm() {
            if ($('#code').val().trim() == '' && ($('#quantity').val() == '' || $('#quantity').val() == 0)) {
                $('#code_error').text('Code is required.');
                $('#quantity_error').text('Quantity must be greater than 0.');
                // $('#date_error').text('Date is required.');
                return false;
            } else if ($('#code').val().trim() == '') {
                $('#code_error').text('Code is required.');
                return false;
            } else if ($('#quantity').val() == 0 || $('#quantity').val() == '') {
                $('#quantity_error').text('Quantity must be greater than 0.');
                return false;
            }

            ajaxCallV2('/stock-count/store-update', 'POST', {
                code: $('#code').val(),
                quantity: $('#quantity').val()
            }, (res) => {
                // callSweetAlert('success', `<p class="text-info">${res.message}</p>`, '');
                $('#stock_count_table').append(`<tr>
                    <td>${res.barcode}</td>
                    <td>${res.name_eng}</td>
                    <td>${res.buy_price}</td>
                    <td>${res.sell_price}</td>
                    <td>${res.count}</td>
                </tr>`);
                $('#success_msg').html(`<p class="text-info">${res.message}</p>`);
                $('#loader').hide('slow');
                $('#code').val('');
                $('#code').focus();
            }, (error) => {
                $('#code').val('');
                $('#code').focus();
                callSweetAlert('error', error.responseJSON.message);
            });
        }
    </script>
@append