@extends('layouts.admin_main')

@section('title', trans('admin_lang.create_new_order'))
@push('styles')
@endpush

@push('custom_css')
    <style>
        tr .select2-container{
            width: 100% !important;
        }
        tr .select2-search--dropdown .select2-search__field {
            width: 100%;
        }
    </style>
@endpush
@section('content')
    <!-- begin:: Subheader -->
    @breadcrumb([
    'home_url' => route('admin.dashboard.index'),
    'links' => [
    [
    'url' => route('admin.products.index'),
    'title' => trans('admin_lang.order'),
    ]
    ],
    'current_page_title' => trans('admin_lang.create_new_order')
    ])
    @endbreadcrumb
    <!-- end:: Subheader -->
    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="kt-portlet">
                    @header(['title' => trans('admin_lang.general_details'), 'icon' => 'fa fa-shopping-cart'])
                    @endheader
                    <!--begin::Form-->
                    <div class="kt-form" >
                        <div class="kt-portlet__body">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="form-group form-control-div" style="max-width: 580px">
                                        <label for="name"  class="required">@lang('admin_lang.sage_customer_number')</label>
                                        <select class="form-control customer_sage_number custom-select2" id="sage_no" name="sage_no">
                                            <option value="">Select sage no. </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <p class="c_name">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                                    <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                    <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#96a9c8" fill-rule="nonzero" style="fill:#96a9c8"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span href="#" id="client_name"> Mr Hussain 102 </span>
                                    </p>

                                    <p class="c_name">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M11.914857,14.1427403 L14.1188827,11.9387145 C14.7276032,11.329994 14.8785122,10.4000511 14.4935235,9.63007378 L14.3686433,9.38031323 C13.9836546,8.61033591 14.1345636,7.680393 14.7432841,7.07167248 L17.4760882,4.33886839 C17.6713503,4.14360624 17.9879328,4.14360624 18.183195,4.33886839 C18.2211956,4.37686904 18.2528214,4.42074752 18.2768552,4.46881498 L19.3808309,6.67676638 C20.2253855,8.3658756 19.8943345,10.4059034 18.5589765,11.7412615 L12.560151,17.740087 C11.1066115,19.1936265 8.95659008,19.7011777 7.00646221,19.0511351 L4.5919826,18.2463085 C4.33001094,18.1589846 4.18843095,17.8758246 4.27575484,17.613853 C4.30030124,17.5402138 4.34165566,17.4733009 4.39654309,17.4184135 L7.04781491,14.7671417 C7.65653544,14.1584211 8.58647835,14.0075122 9.35645567,14.3925008 L9.60621621,14.5173811 C10.3761935,14.9023698 11.3061364,14.7514608 11.914857,14.1427403 Z" fill="#000000" style="fill:#96a9c8"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span href="#" id="phone"> 0207 278 5691 </span>
                                    </p>
                                </div>
                                <div class="col-lg-4">
                                    <p class="c_name">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M13.5,21 L13.5,18 C13.5,17.4477153 13.0522847,17 12.5,17 L11.5,17 C10.9477153,17 10.5,17.4477153 10.5,18 L10.5,21 L5,21 L5,4 C5,2.8954305 5.8954305,2 7,2 L17,2 C18.1045695,2 19,2.8954305 19,4 L19,21 L13.5,21 Z M9,4 C8.44771525,4 8,4.44771525 8,5 L8,6 C8,6.55228475 8.44771525,7 9,7 L10,7 C10.5522847,7 11,6.55228475 11,6 L11,5 C11,4.44771525 10.5522847,4 10,4 L9,4 Z M14,4 C13.4477153,4 13,4.44771525 13,5 L13,6 C13,6.55228475 13.4477153,7 14,7 L15,7 C15.5522847,7 16,6.55228475 16,6 L16,5 C16,4.44771525 15.5522847,4 15,4 L14,4 Z M9,8 C8.44771525,8 8,8.44771525 8,9 L8,10 C8,10.5522847 8.44771525,11 9,11 L10,11 C10.5522847,11 11,10.5522847 11,10 L11,9 C11,8.44771525 10.5522847,8 10,8 L9,8 Z M9,12 C8.44771525,12 8,12.4477153 8,13 L8,14 C8,14.5522847 8.44771525,15 9,15 L10,15 C10.5522847,15 11,14.5522847 11,14 L11,13 C11,12.4477153 10.5522847,12 10,12 L9,12 Z M14,12 C13.4477153,12 13,12.4477153 13,13 L13,14 C13,14.5522847 13.4477153,15 14,15 L15,15 C15.5522847,15 16,14.5522847 16,14 L16,13 C16,12.4477153 15.5522847,12 15,12 L14,12 Z" fill="#000000" style="fill:#96a9c8"/>
                                                    <rect fill="#FFFFFF" x="13" y="8" width="3" height="3" rx="1" style="fill:#ffffff"/>
                                                    <path d="M4,21 L20,21 C20.5522847,21 21,21.4477153 21,22 L21,22.4 C21,22.7313708 20.7313708,23 20.4,23 L3.6,23 C3.26862915,23 3,22.7313708 3,22.4 L3,22 C3,21.4477153 3.44771525,21 4,21 Z" fill="#000000" opacity="0.3"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span href="#" id="registered_business_name"> Londis (Kings Cross)</span>
                                    </p>
                                    <p class="c_name">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero" style="fill:#96a9c8"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span href="#" id="address"> 33-35 Marchmont Street, London, WC1N 1AP </span>
                                    </p>
                                </div>
                                <!-- <div class="col-lg-2">
                                    <div class="form-group">
                                        <label for="client_name" >@lang('admin_lang.name')</label>
                                        <input id="client_name" type="text" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label for="registered_business_name" >@lang('admin_lang.registered_business_name')</label>
                                        <input id="registered_business_name" type="text"  disabled class="form-control">
                                    </div>
                                </div>

                                <div class="col-lg-2">
                                    <div class="form-group">
                                        <label for="phone" >@lang('admin_lang.phone')</label>
                                        <input id="phone" type="text"  disabled class="form-control" maxlength="10" length="10"
                                               onkeypress="javascript:return digitOnly(event)">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="address">@lang('admin_lang.address')</label>
                                        <textarea id="address"  class="form-control" rows="1" disabled> </textarea>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <!--end::Form-->
                </div>

                <div class="kt-portlet">
                    @header(['title' => trans('admin_lang.add_product'), 'icon' => ''])
                    @endheader
                    <!--begin::Form-->
                    <div class="kt-form">
                        <div class="kt-portlet__body table-responsive " >
                            <table class="table table-striped- table-bordered table-hover table-checkable w-100" id="kt_repeater_1">
                                <thead>
                                <tr>
                                    <th>Product Code</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th>Vat</th>
                                    <th class="text-center">Action</th>
                                </tr>
                                </thead>
                                <tbody data-repeater-list="items" id="form">
                                <tr data-repeater-item>
                                    <td style="width: 40% !important;">
                                        <select name="product" class="product form-control custom-select2" style="width:150px !important;">
                                            <option value="">[Select Product]</option>
                                        </select>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <div class="input-group-prepend" >
                                                <span class="input-group-text">#</span>
                                            </div>
                                            <input type="number" class="form-control m-input quantity" name="quantity" value="1"  placeholder="Enter Quantity">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group" id="custom_price_valid">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">$</span>
                                            </div>
                                            <input type="text" class="form-control m-input price-format price" name="price" value="0"   disabled>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group" id="quantity_div_show">
                                            <div class="input-group-prepend" >
                                                <span class="input-group-text">%</span>
                                            </div>
                                            <input type="number" class="form-control m-input vat" name="vat" value="0"  disabled>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" data-repeater-delete="" class="btn btn-danger btn-icon btn-sm"><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                    <tr class="add-btn-tr">
                                        <td colspan="4"></td>
                                        <td class="text-center">
                                            <button type="button" data-repeater-create="" class="btn btn-warning btn-sm btn-icon" ><i class="la la-plus"></i></button>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                            <div class=" m-form__actions--solid">
                                <div class="row">
                                    <div class="col-12 text-center">
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <!--end::Form-->
                </div>
                <div class="kt-portlet">
                    <!--begin::Form-->
                    <div class="kt-form">
                        <div class="kt-portlet__foot text-center">
                            <div class="kt-form__actions">
                                @button(['type' => 'submit'])@endbutton
                                @button(['type' => 'cancel', 'url' => route('admin.products.index')])@endbutton
                            </div>
                        </div>
                    </div>
                    <!--end::Form-->
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

    <script>

        //page load event
        $(document).ready(function () {
            // $(".customer_sage_number").select2();
            $(".product").select2({
                dropdownAutoWidth: false,
                ajax: {
                    url: '{{ route('admin.products.list') }}',
                    dataType: 'json'
                }
            });

            $(".customer_sage_number").select2({
                dropdownAutoWidth: false,
                ajax: {
                    url: '{{ route('admin.users.list') }}',
                    dataType: 'json'
                }
            });
        });

        //form repeater
        $('#kt_repeater_1').repeater({
            initEmpty: false,
            show: function () {
                $(this).slideDown();
                $(this).find('.select2-container').remove();
                $(this).find('select').removeAttr('data-select2-id')
                    .removeAttr('tabindex')
                    .removeAttr('aria-hidden')
                    .removeClass('select2-hidden-accessible')
                    .select2({
                        dropdownAutoWidth: false,
                        ajax: {
                        url: '{{ route('admin.products.list') }}',
                        dataType: 'json'
                        }
                    });
                $(this).find('.quantity').val(1);
                $(this).find(".price").val(0);
                $(this).find(".vat").val(0);
               // $(this).find('.product').focus();
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            }
        });

        // on first focus (bubbles up to document), open the menu
        $(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
            $(this).closest(".select2-container").siblings('select:enabled').select2('open');
        });

        // steal focus during close - only capture once and stop propagation
        $(document).on('select2:closing', function (e) {
            $(e.target).data("select2").$selection.one('focus focusin', function (e) {
                e.stopPropagation();
            });
            $(this).parents('tr').find('.quantity').focus();
        });

        //product changes
        $(document).on('change', '.product', function () {
            showLoading();
            let product_id = $(this).val();
            var url = '{{ route('admin.products.edit',':id') }}'.replace(':id', product_id);
            let that = $(this);
            $.ajax({
                url: url,
                method: 'get',
                async: false,
                success: function (response) {
                    if (response.status === true) {
                        that.parents('tr').find('.vat').val(response.data.vat.toFixed(2))
                        that.parents('tr').find('.quantity').val('1');
                        that.parents('tr').find('.price').val(response.data.price.toFixed(2));
                        if (typeof that.parents('tr').next('tr').html() === "undefined") {
                            $('.btn-warning').trigger('click');
                        }
                    } else {
                        errorToast("{{ trans('admin_lang.something') }}")
                    }
                    hideLoading();
                }
            });
        });

        //customer changes
        $('body').on('change', '#sage_no', function () {
            showLoading();
            $(document).find('.error-message').remove();
            $(document).find('.border-danger').removeClass('border-danger');
            var id = $(this).val();
            if (id != '') {
                var url = '{{ route('admin.users.show',':id') }}'.replace(':id', id);
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function (response) {
                        hideLoading();
                        if (response.status == true) {
                            $('#client_name').text(response.data.first_name + ' ' + response.data.last_name);
                            $('#registered_business_name').text(response.data.registered_business_name);
                            $('#phone').text(response.data.phone);
                            $('#address').text(response.data.address);
                        } else {
                            errorToast("{{ trans('admin_lang.something') }}")
                        }
                    },
                    error: function () {
                        hideLoading();
                        errorToast("{{ trans('admin_lang.something') }}")
                    }
                });
            }
            else{
                $('#client_name').val('');
                $('#registered_business_name').val('');
                $('#phone').val('');
                $('#address').val('');
                hideLoading();
                return false;

            }
        });

        //form submit click event
        $('.ajax-submit').click(function () {
            showLoading();
            let sage_no = $('#sage_no option:selected').val();
            let item = [];
            $('#kt_repeater_1 tbody tr').each(function () {
                if ($(this).find('.product option:selected').val() == '') {
                    $(this).find('.product').parents('td').find('.select2-selection').addClass('border-danger');
                } else {
                    $(this).find('.product').parents('td').find('.select2-selection').removeClass('border-danger');
                }
                let qty = $(this).find('.quantity').val();
                if (qty == '' || isNaN(qty) || parseInt(qty) <= 0) {
                    $(this).find('.quantity').addClass('border-danger');
                } else {
                    $(this).find('.quantity').removeClass('border-danger');
                }

                if ($(this).find('.border-danger').length == 0) {
                    item.push({
                        'product_id': $(this).find('.product option:selected').val(),
                        'quantity': qty
                    });
                }
            });

            if ($('#kt_repeater_1 tbody tr').find('.border-danger').length > 0)
            {
                errorToast("Check the order items errors")
                hideLoading();
            }else{
                $(document).find('.error-message').remove();
                $(document).find('.border-danger').removeClass('border-danger');
                $.ajax({
                    url:'{{ route('admin.orders.store') }}',
                    method:'POST',
                    data:{
                        '_token' : '{{ csrf_token() }}',
                        'sage_no' : sage_no,
                        'order_items': item
                    },
                    success: function (response) {
                        if(response.status == false && response.code == 442)
                        {
                            $.each(response.errors, function (id, message) {
                                if (id == 'sage_no')
                                {
                                    $('#sage_no').parents('.form-group').find('.select2-selection').addClass('border-danger');
                                    $('#sage_no').parents('.form-group').append('<span class="text-danger error-message">'+message+'</span>');
                                }
                            });
                            hideLoading();
                        }else if(response.status == false && response.code == 500)
                        {
                            errorToast(response.message);
                            hideLoading();
                        }else if(response.status == true && response.code == 200)
                        {
                            window.location.href='{{ route('admin.orders.index')}}';
                            hideLoading();
                        }
                    }
                });
            }
        });
    </script>
@endpush