@extends('layouts.agent')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <form method="POST" action="{{ route("agent.sales-orders.store") }}" enctype="multipart/form-data">
                <div class="card">
                    <div class="card-header">
                        {{ trans('global.create') }} Sales Order
                    </div>

                    <div class="card-body">
                        @method('POST')
                        @csrf
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label class="required">Bill To</label>
                                    <input type="text" class="form-control-plaintext" readonly name="bill_to_name" name="bill_to_name" value="{{ auth('agent')->user()->customer->name }}" />
                                    <input type="text" class="form-control-plaintext" readonly name="bill_to_contact_number" name="bill_to_contact_number" value="{{ auth('agent')->user()->customer->contact_number }}" />
                                    <input type="text" class="form-control-plaintext" readonly name="bill_to_address" name="bill_to_address" value="{{ auth('agent')->user()->customer->address }}" />
                                    {{-- <select class="form-control" name="bill_to" id="bill_to" required>
                                        <option value disabled {{ old('bill_to', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                    </select> --}}
                                    @if($errors->has('bill_to'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('bill_to') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label class="required">Ship To</label>
                                    <select class="form-control select2" name="ship_to" id="ship_to" required>
                                        <option value disabled {{ old('ship_to', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                        <option value="0" {{ old('ship_to', 0) === (string) 0 ? 'selected' : '' }}>Default</option>
                                        <option value="999" {{ old('ship_to', 999) === (string) 999 ? 'selected' : '' }}>Others</option>
                                    </select>
                                    @if($errors->has('ship_to'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('ship_to') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="form-group default-ship">
                                    <input type="text" class="form-control-plaintext" readonly name="default_ship_to_name" value="{{ auth('agent')->user()->name }}" />
                                    <input type="text" class="form-control-plaintext" readonly name="default_ship_to_contact_number" value="{{ auth('agent')->user()->contact_number }}" />
                                    <input type="text" class="form-control-plaintext" readonly name="default_ship_to_address" value="{{ auth('agent')->user()->address }}" />
                                </div>
                                <div class="form-group ship-to-name" style="display: none;">
                                    <label>Name</label>
                                    <input class="form-control {{ $errors->has('ship_to_name') ? 'is-invalid' : '' }}" name="ship_to_name" id="ship_to_name" value="{{ old('ship_to_name', '') }}"/>
                                    @if($errors->has('ship_to_name'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('ship_to_name') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="form-group ship-to-contact-number" style="display: none;">
                                    <label>Contact Number</label>
                                    <input class="form-control {{ $errors->has('ship_to_contact_number') ? 'is-invalid' : '' }}" name="ship_to_contact_number" id="ship_to_contact_number" value="{{ old('ship_to_contact_number', '') }}" />
                                    @if($errors->has('ship_to_contact_number'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('ship_to_contact_number') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="form-group ship-to-address" style="display: none;">
                                    <label>Address</label>
                                    <textarea class="form-control" name="ship_to_address" id="ship_to_address">{{ old('ship_to_address', '') }}</textarea>
                                    @if($errors->has('ship_to_address'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('ship_to_address') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                {{-- <div class="form-group">
                                    <label for="so_no">SO No</label>
                                    <input type="text" class="form-control-plaintext" readonly name="so_no" id="so_no" value="{{ old('so_no', $so_no) }}" />
                                </div> --}}

                                <div class="form-group">
                                    <label class="required">Date</label>
                                    <input type="text" class="form-control date" name="date" id="date" value="{{ old('date', '') }}" required /> 
                                    @if($errors->has('date'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('date') }}
                                        </div>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label class="required">Payment Terms</label>
                                    <select class="form-control select2" name="payment_terms" id="payment_terms" required>
                                        <option value disabled {{ old('payment_terms', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                        @foreach ($paymentTerms as $id => $paymentTerm)
                                            <option value="{{ $id }}" {{ old('payment_terms', auth('agent')->user()->customer->payment_term_id) == $id ? 'selected' : '' }}>{{ $paymentTerm }}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('payment_terms'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('payment_terms') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label>Remark</label>
                                    <textarea class="form-control" name="sales_order_remark" id="sales_order_remark" rows="3">{{ old('sales_order_remark', '') }}</textarea>
                                    @if($errors->has('sales_order_remark'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('sales_order_remark') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Sales Order Items
                    </div>
                    <div class="card-body">
                        <button class="btn btn-success mb-3" id="add-item-btn" type="button">Add Item</button>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="sales-order-table">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Item Code</th>
                                        <th>Description</th>
                                        <th>Remark</th>
                                        <th>Qty</th>
                                        {{-- <th>U.Price</th>
                                        <th>Discount</th>
                                        <th>Total</th> --}}
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="item0">
                                        <td>1</td>
                                        <td>
                                            <select class="form-control select2 product-select2" name="salesOrder[0][product]" id="salesOrder-0-product">
                                                <option value disabled {{ old('salesOrder.0.product', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                                @foreach ($products as $id => $product)
                                                    <option value="{{ $id }}">{{ $product }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><input class="form-control @error('salesOrder.0.description') is-invalid @enderror" type="text" name="salesOrder[0][description]" id="salesOrder-0-description" required /></td>
                                        <td><input class="form-control" type="text" name="salesOrder[0][remark]" id="salesOrder-0-remark" /></td>
                                        <td><input class="form-control @error('salesOrder.0.qty') is-invalid @enderror" type="number" min="0" name="salesOrder[0][qty]" id="salesOrder-0-qty" required /></td>
                                        {{-- <td><input class="form-control" type="number" min="0" name="salesOrder[0][unitPrice]" id="salesOrder-0-unitPrice" /></td>
                                        <td><input class="form-control" type="number" min="0" name="salesOrder[0][discount]" id="salesOrder-0-discount" /></td>
                                        <td><input class="form-control" type="number" min="0" name="salesOrder[0][total]" id="salesOrder-0-total" readonly /></td> --}}
                                        <td>
                                            {{-- <button class="btn btn-danger" type="button"><i class="fas fa-minus"></i></button> --}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        

                        <div class="form-group">
                            <a class="btn btn-danger" href="{{ route('agent.sales-orders.index') }}">
                                {{ trans('global.back') }}
                            </a>
                            <button class="btn btn-primary" type="submit">
                                {{ trans('global.create') }}
                            </button>
                            {{-- <a class="btn btn-primary" href="#">
                                Print Preview
                            </a> --}}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {
    var rowNumber = 1;
    var optionHTML = $("#salesOrder-0-product").html();
    tableBody = $("table tbody");

    $(document).on('input', 'input[type=number]', function(){
        if (!/^(?:\d*\.\d{1,2}|\d+)$/.test($(this).val())) {
            if(!Number.isNaN($(this).val()))
            {
                this.value = 0;
                return;
            }

            this.value = parseFloat(this.value).toFixed(2);
            alert("Invalid number");
        }
    });

    @error('ship_to_name')
        $('.ship-to-name').show();
        $('.ship-to-contact-number').show();
        $('.ship-to-address').show();
    @enderror

    @error('ship_to_contact_number')
        $('.ship-to-name').show();
        $('.ship-to-contact-number').show();
        $('.ship-to-address').show();
    @enderror

    @error('ship_to_address')
        $('.ship-to-name').show();
        $('.ship-to-contact-number').show();
        $('.ship-to-address').show();
    @enderror

    $("#ship_to").on('change',function(){
        let value = $(this).val();

        if(value == 999)
        {
            $('.default-ship').hide();
            $('.ship-to-name').show();
            $('.ship-to-contact-number').show();
            $('.ship-to-address').show();
        }
        else
        {
            $('.default-ship').show();

            $("#ship_to_name").val('');
            $("#ship_to_contact_number").val('');
            $("#ship_to_address").val('');
            $('.ship-to-name').hide();
            $('.ship-to-contact-number').hide();
            $('.ship-to-address').hide();
        }
    });

    $('#date').on('dp.change', function(e){ 
        var formatedValue = e.date.format(e.date._f);
        var array = formatedValue.split("-");
        let so_no = $("input[name=so_no]").val().split("-");
        let updated_so_no = 'SO' + array[1] + array[2] + '-' + so_no[1];
        $("input[name=so_no]").val(updated_so_no);
    });

    // //SET OLD INPUT SESSION
    var oldInput = {!! json_encode(session()->getOldInput()) !!};
    var descriptionErrors;
    var qtyErrors;
    var errorsDescriptionRow = [];
    var errorsQtyRow = [];
    var errorsDescriptionLength;
    var errorsQtyLength;

    @if ($errors->has('salesOrder.*.description'))
        descriptionErrors = {!! json_encode($errors->get('salesOrder.*.description')) !!};
        $.each(descriptionErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsDescriptionRow.push(Number(rowNum));
        });
        errorsDescriptionLength = Object.keys(descriptionErrors).length;
    @endif

    @if ($errors->has('salesOrder.*.qty'))
        qtyErrors = {!! json_encode($errors->get('salesOrder.*.qty')) !!};
        $.each(qtyErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsQtyRow.push(Number(rowNum));
        });
        errorsQtyLength = Object.keys(qtyErrors).length;
    @endif

    if(Object.keys(oldInput).length !== 0)
    {
        if(Object.hasOwn(oldInput, 'salesOrder'))
        {
            var oldSalesOrderRowCount = Object.keys(oldInput.salesOrder).length;
            var oldSalesOrder = oldInput.salesOrder;

            tableBody = $("table tbody");
            var oldTableHtml = '';

            // for (var i = 0; i < oldProductStoresRowCount; i++) {
            //     oldTableHtml += '<tr>';
            //     oldTableHtml += '<td>' + $(chosenOptions[i]).text() + '</td>';
            //     oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-cost_price" name="productStores[' + i + '][cost_price]" value="' + Number(oldInput.productStores[i].cost_price) + '" /></td>';
            //     oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-sell_price" name="productStores[' + i + '][sell_price]" value="' + Number(oldInput.productStores[i].sell_price) + '" /></td>';
            //     oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-opening_balance" name="productStores[' + i + '][opening_balance]" value="' + Number(oldInput.productStores[i].opening_balance) + '" /></td>';
            //     oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-minimum_order" name="productStores[' + i + '][minimum_order]" value="' + Number(oldInput.productStores[i].minimum_order) + '" /></td>';
            //     oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-maximum_order" name="productStores[' + i + '][maximum_order]" value="' + Number(oldInput.productStores[i].maximum_order) + '" /></td>';
            //     oldTableHtml += '</tr>';
            // }

            // tableBody.append(oldTableHtml);

            //SET ERROR VALUE CODE
            $.each(errorsDescriptionRow, function(index,element){
                $('#salesOrder-' + element + '-description').addClass('is-invalid');
            });
            $.each(errorsQtyRow, function(index,element){
                $('#salesOrder-' + element + '-qty').addClass('is-invalid');
            });
        }        
    }



    $("#add-item-btn").click(function(){
        var html = '';
        let newRowNumber = rowNumber + 1;
        html += '<tr id="item' + rowNumber + '">';
        html += '<td>' + newRowNumber + '</td>';
        html += '<td><select class="form-control select2 product-select2" name="salesOrder[' + rowNumber + '][product]" id="salesOrder-' + rowNumber + '-product">' + optionHTML + '</select></td>';
        html += '<td><input class="form-control" type="text" id="salesOrder-' + rowNumber + '-description" name="salesOrder[' + rowNumber + '][description]" /></td>';
        html += '<td><input class="form-control" type="text" id="salesOrder-' + rowNumber + '-remark" name="salesOrder[' + rowNumber + '][remark]" /></td>';
        html += '<td><input class="form-control" type="number" min="0" id="salesOrder-' + rowNumber + '-qty" name="salesOrder[' + rowNumber + '][qty]" /></td>';
        // html += '<td><input class="form-control" type="number" min="0" id="salesOrder-' + rowNumber + '-unitPrice" name="salesOrder[' + rowNumber + '][unitPrice]" /></td>';
        // html += '<td><input class="form-control" type="number" min="0" id="salesOrder-' + rowNumber + '-discount" name="salesOrder[' + rowNumber + '][discount]" /></td>';
        // html += '<td><input class="form-control" type="number" min="0" id="salesOrder-' + rowNumber + '-total" name="salesOrder[' + rowNumber + '][total]" readonly /></td>';
        html += '<td><button class="btn btn-danger remove-btn" type="button" data-row="' + rowNumber + '"><i class="fas fa-minus"></i></button></td>';
        html += '</tr>';

        tableBody.append(html);

        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true,
        });

        rowNumber++;
    });

    $(document).on("click", ".remove-btn", function(){
        let rowSelectionNumber = $(this).data("row");

        $("#item" + rowSelectionNumber).empty();

        rowNumber--;

        $("#sales-order-table > tbody tr").each(function(key, value){
            var newRowNumber = key + 1;
            var index = key;
            $(this).attr('id', 'item' + key);
            $("td", this).each(function(key, value){
                switch(key) {
                    case 0:
                        $(this).html(newRowNumber);
                        break;
                    case 1:
                        $(this).find("select").attr('name', 'salesOrder[' + index + '][product]');
                        $(this).find("select").attr('id', 'salesOrder-' + index + '-product');
                        break;
                    case 2:
                        $(this).find("input").attr('name', 'salesOrder[' + index + '][description]');
                        $(this).find("input").attr('id', 'salesOrder-' + index + '-description');
                        break;
                    case 3:
                        $(this).find("input").attr('name', 'salesOrder[' + index + '][remark]');
                        $(this).find("input").attr('id', 'salesOrder-' + index + '-remark');
                        break;
                    case 4:
                        $(this).find("input").attr('name', 'salesOrder[' + index + '][qty]');
                        $(this).find("input").attr('id', 'salesOrder-' + index + '-qty');
                        break;
                    // case 5:
                    //     $(this).find("input").attr('name', 'salesOrder[' + index + '][unitPrice]');
                    //     $(this).find("input").attr('id', 'salesOrder-' + index + '-unitPrice');
                    //     break;
                    // case 6:
                    //     $(this).find("input").attr('name', 'salesOrder[' + index + '][discount]');
                    //     $(this).find("input").attr('id', 'salesOrder-' + index + '-discount');
                    //     break;
                    // case 7:
                    //     $(this).find("input").attr('name', 'salesOrder[' + index + '][total]');
                    //     $(this).find("input").attr('id', 'salesOrder-' + index + '-total');
                    //     break;
                    case 5:
                        $(this).find("button").attr('data-row', index);
                        break;
                }
            });
        });
    });

    $(document).on('change', '.product-select2', function(){
        let selectedText = $(this).find(':selected').text();
        selectedText = selectedText.substr(selectedText.indexOf('-') + 1).trimStart();
        let row = $(this).closest('tr').prop('id');
        row = row.substr(row.length - 1);
        $("#salesOrder-" + row + "-description").val(selectedText);
    });
});
</script>

@endsection