@extends('layouts.modals.modal-base.index')
@section('title', 'Create WholeSale Request')
@section('modal-class', 'modal-lg')
@section('content')
    <form id="" class="form fv-plugins-bootstrap5 fv-plugins-framework p-5"
          action="{{route('seller.wholesale-requests.store')}}" method="POST">
        @csrf
        <!--begin::Input group-->
        <div class="row mb-6">
            <label class="col-lg-3 col-form-label required fw-semibold fs-6">Product:</label>
            <div class="col-lg-6 fv-row add-product">
                <select class="form-control form-select float-right  form-control-solid products selectProducts"
                        name="product_variant_id[]" required>
                    <option value=""  selected>---Select Product---</option>
                    @foreach ($productVariants as $productVariant)
                        @if($productVariant['status'] != \App\Models\Product::DELETED)
                            <option value="{{ $productVariant['id'] }}">{{ $productVariant['name'] }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="col-lg-2 fv-row">
                <input type="number" class="form-control form-control-solid preventMinusValue" name="product_variant_quantity[]"
                       placeholder="Quantity" required>
            </div>
            <button type="button" class="btn btn-primary add-new-product col-lg-1" last-row='1' id="plus-btn">+</button>
        </div>
        <div class="row mb-6">
            <label class="col-lg-3 col-form-label required fw-semibold fs-6">Message:</label>
            <div class="col-lg-8 fv-row">
                <textarea type="text" class="form-control form-control-solid" name="message"></textarea>
            </div>
        </div>
        <div class="row mb-6">
            <label class="col-lg-3 col-form-label required fw-semibold fs-6">Phone Number:</label>
            <div class="col-lg-4 fv-row">
                <input type="number" class="form-control form-control-solid" name="phone_number" required>
            </div>
        </div>
        <div class="text-center">
            <button type="submit" id="kt_modal_new_card_submit" class="btn btn-primary me-3 wholsesale">
                <span class="indicator-label">Submit</span>
                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
            </button>
        </div>
    </form>

    <script>
        function getProductSelecter(){
            return `
            <label class="col-lg-3 col-form-label required fw-semibold fs-6">Product:</label>
            <div class="col-lg-6 fv-row add-product">
                <select class="form-control form-select float-right  form-control-solid products selectProducts"
                        name="product_variant_id[]" required>
                    <option value="" selected>---Select Product---</option>
                    @foreach ($productVariants as $productVariant)
                        @if($productVariant["status"] != \App\Models\Product::DELETED)
                            <option value="{{ $productVariant["id"] }}">{{ $productVariant["name"] }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="col-lg-2 fv-row">
                <input type="number" class="form-control form-control-solid preventMinusValue" name="product_variant_quantity[]"
                   placeholder="Quantity" required>
            </div>
            <button type="button" class="btn btn-primary add-new-product col-lg-1" last-row='1' id="plus-btn">+</button>`;
        }

        let p = 0;
        let hidenList = [];
        $(document).on("click", ".add-new-product", function() {

            let previousDiv = $(this).closest('.row');
            previousDiv.removeClass('last-row').attr('atrr-id', p);

            previousDiv.after('<div class="row mb-6 last-row">'+ getProductSelecter() +'</div>');

            $(this).after(`
                        <button type="button" class="btn btn-danger delete-current-product col-lg-1" id="plus-btn">-</button>
                     `);
            $(this).remove();

            hideProductInList();


            $('.selectProducts').select2({
                dropdownParent: $('.modal')
            })
        });


        $(document).on({
            'change': function () {
                let previues = $(this).attr('pro_id');

                if(jQuery.inArray( previues, hidenList ) > -1){
                    hidenList[jQuery.inArray( previues, hidenList )] = $(this).val();
                }else{
                    hidenList.push($(this).val());
                }

                $(this).attr('pro_id', $(this).val());

                // console.log(hidenList);
                hideProductInList();
            }

        },'.selectProducts');


        function hideProductInList(){
            let r = 0;
            $('select.selectProducts').each(function(){
                var value = $(this).val();

                $('.selectProducts').find('[value="'+ hidenList[r] + '"]').attr('disabled',true);

                for (let i = 0; i < hidenList.length; i++){

                    if(value == hidenList[i]){

                        $(this).find('[value="'+ hidenList[i] + '"]').removeAttr('disabled');
                    }
                }
                r++;
            })
        }
    </script>
@endsection