@extends('seller.layouts.app')
@section('title')
    Product Edit | 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;">Product Edit</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" method="POST"
                                action="{{ route('vendor.product.update', $product->id) }}">
                                @method('PUT')
                                @csrf
                                <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"
                                                data-default-file="/product/{{ $product->image }}"
                                                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 class="col-6" style="margin-top: 35px">
                                        <img src="/banner/{{ $product->image }}" width="400px" height="190px" alt="" >
                                    </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="{{ $product->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="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Weight</label>
                                            <input value="{{ $product->total_favourites }}" name="total_favourites"
                                                type="text"
                                                class="form-control @error('total_favourites') is-invalid @enderror"placeholder="Random Count Number"
                                                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="{{ $product->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"> <span class="text-danger"> <del>Price *</del>
                                                </span></label>
                                            <input value="{{ $product->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</label>
                                            <select id="category_id" class="select2bs4"
                                                onchange="fetch_subcategory_option()" name="category_id"
                                                class="@error('category_id') is-invalid @enderror" style="width: 100%;">
                                                <option value="">Select Category</option>
                                                @foreach ($categories as $category)
                                                    <option {{ $product->category_id == $category->id ? 'selected' : '' }}
                                                        value="{{ $category->id }}" required>{{ $category->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @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>
                                            <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: 100%;" required>
                                                @foreach ($sub_categories as $category)
                                                    <option
                                                        {{ $product->subcategory_id == $category->id ? 'selected' : '' }}
                                                        value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                            @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>
                                            <select id="child_categories_id" class="select2bs4"
                                                name="child_categories_id"
                                                class="@error('child_categories_id') is-invalid @enderror"
                                                style="width: 100%;">
                                                <option value="">Select Category</option>
                                                @foreach ($child_categories as $category)
                                                    <option
                                                        {{ $product->child_categories_id == $category->id ? 'selected' : '' }}
                                                        value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                            @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</label>
                                            <select name="brand_id"
                                                class="select2ds4 @error('brand_id') is-invalid @enderror"
                                                style="width: 100%;">
                                                @foreach ($brands as $brand)
                                                    <option {{ $product->brand_id == $brand->id ? 'selected' : '' }}
                                                        value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('brand_id')
                                                <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">Brand</label>
                                            <select name="brand_id" class="select2ds4 @error('brand_id') is-invalid @enderror" style="width: 100%;">
                                                @foreach ($brands as $brand)
                                                    <option {{ $product->brand_id == $brand->id ? "selected" : "" }} value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('brand_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">Sold Count Number</label>
                                            <input value="{{ $product->total_orders }}" name="total_orders" type="number" class="form-control @error('total_orders') is-invalid @enderror" placeholder="Random Count Number">
                                            @error('total_orders') <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">SKU <span class="text-danger">*</span></label>
                                            <input value="{{ $product->sku }}" name="sku" type="text"
                                                class="form-control @error('sku') is-invalid @enderror" placeholder="SKU"
                                                value="{{ $product->sku }}" required>
                                            @error('sku')
                                                <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">Status</label>
                                            <select name="status" class="form-control" style="width: 100%;">
                                                <option {{ $product->status == 1 ? 'selected' : '' }} value="1">
                                                    Active
                                                </option>
                                                <option {{ $product->status == 0 ? 'selected' : '' }} value="0">
                                                    Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label class="form-label">Delivery Time</label>
                                            <input value="{{ $product->handling_time }}" name="handling_time"
                                                type="number"
                                                class="form-control @error('handling_time') is-invalid @enderror"
                                                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">Shipping Cost</label>
                                            <input value="{{ $product->shipping_cost }}" name="shipping_cost"
                                                type="number"
                                                class="form-control @error('shipping_cost') is-invalid @enderror"
                                                required>
                                            @error('shipping_cost')
                                                <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</label>
                                            <textarea id="editor1" type="text" class="form-control" name="short_description" rows="5"
                                                placeholder="Short Description">{{ $product->short_description }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label class="form-label">Long Description</label>
                                            <textarea id="editor2" type="text" class="form-control" name="long_description" rows="5"
                                                placeholder="Long Description">{{ $product->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-sync"></i> Update Product
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </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="{{ asset('backend') }}/css/dropify.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 src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>');
                    });


                },
            })

        };

        $(document).ready(function() {
            $(".dropify").dropify();
        });
    </script>
@endsection