@extends('seller.layouts.app')
@section('title')
    Create Product | Vendor
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="line-height: 36px;">Create Product</h3>
                        <a href="{{ route('vendor.product.index') }}"
                            class="btn bg-primary float-right d-flex align-items-center justify-content-center"><i
                                class="fas fa-arrow-left"></i>&nbsp;Back</a>
                    </div>
                    <div class="row pt-3 pb-4">
                        <div class="col-md-10 offset-md-1">
                            <form enctype="multipart/form-data" action="{{ route('vendor.product.store') }}" method="POST">
                                @csrf
                                <input type="hidden" value="{{ Auth::guard('vendor')->user()->id }}" name="vendor_id">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="Product Title" class="form-label ">Produdt Image(600*400)<span
                                                    class="text-danger">*</span></label>
                                            <input name="image" type="file" required
                                                class="form-control dropify @error('image') is-invalid @enderror"
                                                style="border:none;padding-left:0;">
                                            @error('image')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Title <span class="text-danger">*</span></label>
                                            <input value="{{ old('title') }}" name="title" type="text"
                                                class="form-control @error('title') is-invalid @enderror"
                                                placeholder="Title" required>
                                            @error('title')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>


                                    {{-- <div class="form-group">
                                        <label for="">Tags Input</label>
                                        <div class="bs-example">
                                            <input type="text" id="#inputTag" value="Amsterdam,Washington,Sydney,Beijing,Cairo,tert,ertert,ertert," data-role="tagsinput">
                                        </div>
                                    </div> --}}


                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Weight</label>
                                            <input value="{{ old('total_favourites') }}" name="total_favourites"
                                                type="text"
                                                class="form-control @error('total_favourites') is-invalid @enderror"placeholder="Product Weight"
                                                required>
                                            @error('total_favourites')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Sale Price</label>
                                            <input value="{{ old('sale_price') }}" name="sale_price" type="number"
                                                class="form-control @error('sale_price') is-invalid @enderror"placeholder="Sell price"
                                                required>
                                            @error('sale_price')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label"> <del style="color: rgb(245, 8, 8)">Price</del> <span
                                                    class="text-danger">*</span></label>
                                            <input value="{{ old('price') }}" name="price" type="number"
                                                class="form-control @error('price') is-invalid @enderror"
                                                placeholder="Price" required>
                                            @error('price')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Category<span class="text-danger">*</span></label>
                                            <div class="row">

                                                <select id="category_id" class="select2bs4"
                                                    onchange="fetch_subcategory_option(this.options[this.selectedIndex].value)"
                                                    name="category_id" class="@error('category_id') is-invalid @enderror"
                                                    style="width: 85%;float:left;">
                                                    <option value="">Select Category</option>
                                                    @foreach ($categories as $category)
                                                        <option {{ old('category_id') == $category->id ? 'selected' : '' }}
                                                            value="{{ $category->id }}" required>{{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                                <a href="{{ route('vendor.category.create') }}"
                                                    class="btn bg-primary d-flex align-items-center justify-content-center adddata btn-sm"
                                                    data-toggle="modal" data-id='1' data-target="#myModal"><i
                                                        class="fas fa-plus"></i>&nbsp;</a>

                                            </div>

                                            @error('category_id')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Sub Category<span class="text-danger">*</span></label>
                                            <div class="row">
                                                <select class="select2bs4" id="subcategory_option"
                                                    onchange="fetch_child_category_option(this.options[this.selectedIndex].value)"
                                                    name="subcategory_id"
                                                    class="@error('subcategory_id') is-invalid @enderror"
                                                    style="width: 85%;" required>
                                                    <option value="" required>Choose Option</option>
                                                </select>

                                                <a href=""
                                                    class="btn bg-primary d-flex align-items-center justify-content-center sub-category adddata btn-sm"
                                                    data-toggle="modal" data-id='2' data-target="#myModal"><i
                                                        class="fas fa-plus"></i>&nbsp;</a>

                                            </div>


                                            @error('subcategory_id')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Child Category<span
                                                    class="text-danger">*</span></label>

                                            <div class="row">
                                                <select id="child_categories_id" class="select2bs4"
                                                    name="child_categories_id"
                                                    class="@error('child_categories_id') is-invalid @enderror"
                                                    style="width: 85%;">
                                                    <option value="">Select Category</option>
                                                    <option value=""></option>
                                                </select>

                                                <a href=""
                                                    class="btn bg-primary d-flex align-items-center child-category justify-content-center adddata btn-sm"
                                                    data-toggle="modal" data-id='3' data-target="#myModal"><i
                                                        class="fas fa-plus"></i>&nbsp;</a>

                                            </div>

                                            @error('child_categories_id')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>





                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Brand<span class="text-danger">*</span></label>

                                            <div class="row">
                                                <select name="brand_id" id="brand_id"
                                                    class="select2ds4 @error('brand_id') is-invalid @enderror"
                                                    style="width: 85%;">
                                                    <option value="">Select Brand</option>
                                                    @foreach ($brands as $brand)
                                                        <option {{ old('brand_id') == $brand->id ? 'selected' : '' }}
                                                            value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                    @endforeach
                                                </select>

                                                <a href="{{ route('module.attributes.create') }}"
                                                    class="btn bg-primary d-flex align-items-center justify-content-center adddata btn-sm"
                                                    data-toggle="modal" data-id='4' data-target="#myModal"><i
                                                        class="fas fa-plus"></i>&nbsp;</a>

                                            </div>

                                            @error('brand_id')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Status</label>
                                            <select name="status" class="form-control" style="width: 100%;">
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Available Stock<span
                                                    class="text-danger">*</span></label>
                                            <input value="{{ old('handling_time') }}" name="handling_time"
                                                type="number"
                                                class="form-control @error('handling_time') is-invalid @enderror"
                                                placeholder="Available Stock" required>
                                            @error('handling_time')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label"> Size <span class="text-danger">*</span></label>
                                            <select name="size" class="form-control" style="width: 100%;">
                                                <option value="1">S</option>
                                                <option value="0">M</option>
                                                <option value="0">L</option>
                                                <option value="0">XL</option>
                                            </select>
                                        </div>
                                    </div> --}}
                                    @php
                                        $date = date('mdHis');
                                        $default = '89';
                                        $rand = rand(1, 9);
                                    @endphp
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Bar Code(SKU) <span
                                                    class="text-danger">*</span></label>
                                            <input value="{{ $default . $rand . $date }}" name="sku" type="text"
                                                class="form-control @error('sku') is-invalid @enderror" placeholder="SKU"
                                                value="{{ old('sku') }}" required>
                                            @error('sku')
                                                <span class="invalid-feedback"
                                                    role="alert"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label class="form-label">Short Description<span
                                                    class="text-danger">*</span></label>
                                            <textarea id="editor1" type="text" class="form-control" name="short_description" rows="5"
                                                placeholder="Short Description">{{ old('short_description') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label class="form-label">Long Description<span
                                                    class="text-danger">*</span></label>
                                            <textarea id="editor2" type="text" class="form-control" name="long_description" rows="5"
                                                placeholder="Long Description">{{ old('long_description') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-6 offset-3 text-center">
                                        <button type="submit" class="btn btn-success">
                                            <i class="fas fa-plus"></i> Submit
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title data-title1"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">

                    <form>

                        <div class="form-group">
                            <label for="field1" id="field1_label"></label>
                            <input type="text" class="form-control" id="field1">
                        </div>


                        <button type="button" class="btn m_submit btn-success">Submit <span class="text-primary"></span>
                        </button>
                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css"
        integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        .ck-editor__editable_inline {
            min-height: 170px;
        }
    </style>
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="{{ asset('backend') }}/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="{{ asset('backend') }}/dist/js/ckeditor.js"></script>
    <script src="{{ asset('backend') }}/js/dropify.min.js"></script>
    <script>
        //Initialize Select2 Elements
        $('.select2ds4').select2({
            theme: 'bootstrap4'
        })
        ClassicEditor
            .create(document.querySelector('#editor2'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor1'))
            .catch(error => {
                console.error(error);
            });
    </script>





    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.select2bs4').select2({
            theme: 'bootstrap4'
        });

        function fetch_subcategory_option() {
            var id = $('#category_id').val();
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "{{ route('vendor.fetch.subcategory.value') }}",
                data: {
                    id: id,
                },
                success: function(data) {

                    $('#subcategory_option').empty();
                    $.each(data.options, function(index, option) {

                        $('#subcategory_option').append('<option value="' + option.id + '">' + option
                            .name + '</option>');
                        if (index == 0) {
                            fetch_child_category_option(option.id);
                        }

                    });


                },
            })


        };




        function fetch_child_category_option(id) {


            $.ajax({
                type: "GET",
                dataType: "json",
                url: "{{ route('vendor.fetch.subcategory.child.cat') }}",
                data: {
                    id: id,
                },
                success: function(data) {

                    $('#child_categories_id').empty();
                    $.each(data.options, function(index, option) {
                        $('#child_categories_id').append('<option value="' + option.id + '">' + option
                            .name + '</option>');
                    });
                },
            })

        };

        $('.dropify').dropify();
    </script>

    <script>
        $('.adddata').click(function() {


            var optsel = $(this).data("id");

            $("#field1").val("");

            if (optsel == 1) {

                $('#field1_label').data('id', '1');

                $("#field1").attr("placeholder", "Enter Category");

                $("#field1_label").text("Category Name");

                $(".data-title1").text("Add Category");


            } else if (optsel == 2) {

                var m_category_id = $('#category_id').val();

                if (m_category_id == '') {

                    alert('Select Category');

                    $('#myModal').modal('hide');


                }

                $('#field1_label').data('id', '2');

                $("#field1").attr("placeholder", "Enter Sub Category");

                $("#field1_label").text("Sub Category Name");

                $(".data-title1").text("Add Sub Category");


            } else if (optsel == 3) {

                var m_category_id = $('#category_id').val();

                var m_subcategory_id = $('#subcategory_id').val();


                if (m_category_id == '') {

                    alert('Select Category');

                    $('#myModal').modal('hide');


                } else if (m_subcategory_id == '') {

                    alert('Select Sub Category');

                    $('#myModal').modal('hide');


                }

                $('#field1_label').data('id', '3');

                $('.m_category_id').css('display', 'block');

                $('.m_subcategory_option').css('display', 'block');

                $("#field1").attr("placeholder", "Enter Child Category");

                $("#field1_label").text("Child Category Name");

                $(".data-title1").text("Add Child Category");


            } else if (optsel == 4) {

                $('#field1_label').data('id', '4');

                $('.m_category_id').css('display', 'none');

                $('.m_subcategory_option').css('display', 'none');

                $("#field1").attr("placeholder", "Enter Brand");

                $("#field1_label").text("Brand Name");

                $(".data-title1").text("Add Brand");

            }




        });


        function m_data_refresh(m_sel, m_category_id, m_subcategory_id) {


            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('fetch.data.value') }}",
                data: {
                    "m_sel": m_sel,
                    "cat_id": m_category_id,
                    "subcat_id": m_subcategory_id


                },
                success: function(data) {


                    if (m_sel == 1) {

                        $('#category_id').empty();

                        $('#category_id').append(' <option value="">Select Category</option>');

                        $.each(data.options, function(index, option) {

                            $('#category_id').append('<option value="' + option.id + '">' + option
                                .name + '</option>');
                        });

                    } else if (m_sel == 2) {

                        $('#subcategory_option').empty();

                        $('#subcategory_option').append(' <option value="">Select Sub Category</option>');

                        $.each(data.options, function(index, option) {

                            $('#subcategory_option').append('<option value="' + option.id + '">' +
                                option.name + '</option>');
                        });


                    } else if (m_sel == 3) {

                        $('#child_categories_id').empty();

                        $('#child_categories_id').append(' <option value="">Select Category</option>');

                        $.each(data.options, function(index, option) {

                            $('#child_categories_id').append('<option value="' + option.id + '">' +
                                option.name + '</option>');
                        });

                    } else if (m_sel == 4) {

                        $('#brand_id').empty();

                        $('#brand_id').append(' <option value="">Select Brand</option>');

                        $.each(data.options, function(index, option) {

                            $('#brand_id').append('<option value="' + option.id + '">' + option.name +
                                '</option>');
                        });



                    }




                },
            })

        };




        $('.m_submit').on('click', function() {


            var m_sel = $('#field1_label').data("id");



            var m_data = $('#field1').val();

            if (m_sel == 1) {


                var m_category_id = '';

                var m_subcategory_id = '';


            } else if (m_sel == 2) {


                var m_category_id = $('#category_id').val();



                var m_subcategory_id = '';


            } else if (m_sel == 3) {

                var m_category_id = $('#category_id').val();

                var m_subcategory_id = $('#subcategory_option').val();


            } else if (m_sel == 4) {


                var m_category_id = '';

                var m_subcategory_id = '';


            }
            $.ajax({
                url: "{{ route('vendor.category.data.store') }}",
                type: 'POST',
                data: {
                    "m_sel": m_sel,
                    "m_data": m_data,
                    "m_category_id": m_category_id,
                    "m_subcategory_id": m_subcategory_id


                },
                success: function() {
                    // console.log("Data added Successfully");

                    m_data_refresh(m_sel, m_category_id, m_subcategory_id);

                    $('#myModal').modal('toggle');







                }
            });


        });
    </script>
@endsection