@extends('layouts.promoter')
@section('content')

<form method="POST" action="{{ route("promoter.product-time-entries.update", $productTimeEntry->id) }}" id="productTimeEntryForm" enctype="multipart/form-data">
@method('PUT')
@csrf
    <div class="card">
        <div class="card-body">
            <div class="form-group">
                <div class="form-group">
                    <a class="btn btn-default" href="{{ route('promoter.product-time-entries.index') }}">
                        {{ trans('global.back_to_list') }}
                    </a>
                </div>
                <table class="table table-bordered table-striped">
                    <tbody>
                        <tr>
                            <th>
                                {{ trans('cruds.productTimeEntry.fields.id') }}
                            </th>
                            <td>
                                {{ $productTimeEntry->id }}
                            </td>
                        </tr>
                        <tr>
                            <th>
                                {{ trans('cruds.productTimeEntry.fields.ptl_no') }}
                            </th>
                            <td>
                                {{ $productTimeEntry->promoterTaskListProduct->promoterTaskList->ptl_no ?? '' }}
                            </td>
                        </tr>
                        <tr>
                            <th>
                                {{ trans('cruds.productTimeEntry.fields.time_start') }}
                            </th>
                            <td>
                                {{ $productTimeEntry->timeEntry->time_start ?? 'No clock in yet.' }}
                            </td>
                        </tr>
                        <tr>
                            <th>
                                {{ trans('cruds.productTimeEntry.fields.time_end') }}
                            </th>
                            <td>
                                {{ $productTimeEntry->timeEntry->time_end ?? 'No clock out yet.' }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            {{ trans('global.show') }} {{ trans('cruds.promoterTaskList.title_singular') }} {{ trans('cruds.product.title_singular') }} Record
        </div>

        <div class="card-body">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-bordered vertical-responsive promoterTaskList-responsive-dataTable">
                        <thead>
                            <tr>
                                {{-- <th>{{ trans('cruds.promoterTaskListData.fields.code') }}</th> --}}
                                <th>{{ trans('cruds.storeAuditData.fields.name') }}</th>
                                <th>Opening Qty</th>
                                <th>Sales Qty</th>
                                <th>Balance Qty</th>
                                {{-- <th>{{ trans('cruds.storeAuditData.fields.remark') }}</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-name="Name">{{ $productTimeEntry->product->product_name }}</td>
                                <td data-t-qty="Opening Qty" data-t-qty-value="0">
                                    <input class="form-control {{ $errors->has('o_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="o_qty" id="o_qty" value="{{ old('o_qty', $productTimeEntry->o_qty) }}">
                                    @error('o_qty')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </td>
                                <td data-o-qty="Sales Qty" data-o-qty-value="0">
                                    <input class="form-control {{ $errors->has('s_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="s_qty" id="s_qty" value="{{ old('s_qty', $productTimeEntry->s_qty) }}">
                                    @error('s_qty')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </td>
                                <td data-l-qty="Balance Qty" data-l-qty-value="0">
                                    <input class="form-control {{ $errors->has('b_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="b_qty" id="b_qty" value="{{ old('b_qty', $productTimeEntry->b_qty) }}">
                                    @error('b_qty')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="form-group">
                {{-- <button class="btn btn-danger" type="submit">
                    Update
                </button> --}}
                <button class="btn btn-success" type="submit">
                    Submit
                </button>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script type="text/javascript">
    $(function(){
        $("[id='o_qty']").change(function(e) {
            let id = $(this).attr('id');

            let t_qty = Number.parseInt($(this).val());
            let o_qty = Number.parseInt($(this).parent().next('td').find('input').val());
            let l_qty = t_qty - o_qty;

            $(this).parent().attr('data-t-qty-value', $(this).val());

            $(this).parent().next('td').next('td').attr('data-l-qty-value', l_qty);
            $(this).parent().next('td').next('td').find('input').val(l_qty);

            document.getElementById(id).setAttribute('value', $(this).val());
        });

        $("[id='s_qty']").keyup(function(e){
            let t_qty = Number.parseInt($(this).parent().prev('td').data('t-qty-value'));
            let o_qty = Number.parseInt($(this).val());
            let l_qty = Number.parseInt($(this).parent().next('td').data('l-qty-value'));

            $(this).parent().attr('data-o-qty-value', $(this).val());

            if(o_qty > t_qty)
            {
                Swal.fire({
                    icon: 'error',
                    title: 'The out quantity cannot exceed the take quantity!',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });

                $(this).val(t_qty);

                $(this).parent().next('td').find('input').val(0);
            }
            else
            {
                if(!isNaN(o_qty))
                {
                    l_qty = t_qty - o_qty;

                    $(this).parent().next('td').find('input').val(l_qty);
                }
            }
        });

        $("[id='b_qty']").keyup(function(e){
            let t_qty = Number.parseInt($(this).parent().prev('td').prev('td').data('t-qty-value'));
            let o_qty = Number.parseInt($(this).parent().prev('td').data('o-qty-value'));
            let cur_l_qty = Number.parseInt($(this).val());

            $(this).parent().attr('data-l-qty-value', $(this).val());

            if((t_qty - o_qty) < cur_l_qty)
            {
                Swal.fire({
                    icon: 'error',
                    title: 'The balance quantity cannot exceed the left quantity!',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });

                $(this).val((t_qty - o_qty));
            }
        });
    })
</script>

@endsection