@extends('admin.layouts.app', ['title' => __('Product')])

@section('content')
<!-- Header -->
<div class="header bg-primary pb-6 pt-6">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item"><a href="{{route('dashboard')}}"><i class="fas fa-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{route('product')}}">Product</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{(isset($product) && $product->id >0) ? 'Update' : 'Add' }} Category</li>
                        </ol>
                    </nav>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Page content -->


<div class="container-fluid mt--7">
    <div class="row ">
        <div class="col-xl-12 order-xl-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0"> {{(isset($product) && $product->id >0) ? 'Update' : 'Add' }} Product</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    @if ($message = Session::get('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif
                    <form id="product-form" name="product-form" action="@if($product->id > 0) {{route('product-update', ['id' => $product->id])}} @else {{route('product-create')}} @endif " method="post" autocomplete="off" enctype="multipart/form-data">
                        @csrf

                        <h6 class="heading-small text-muted mb-4">{{ __('Product information') }}</h6>

                        <div class="pl-lg-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="name">{{ __('Name') }}</label>
                                        <input type="text" name="name" id="name" class="form-control form-control-alternative" placeholder="{{ __('Name') }}" value="{{ old('name', $product->name) }}" autofocus>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="tag">Tags</label>
                                        <select name="tag_id[]" id="tag_id" class="form-control form-control-alternative" multiple="multiple">
                                            @foreach($tags as $tag)
                                            <option value="{{ $tag->id }}" @if(in_array($tag->id, $productTag)) selected @endif>{{$tag->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-category">Category</label>
                                        <select name="category_id[]" id="category_id" class="form-control form-control-alternative" multiple="multiple">
                                            @foreach($categories as $category)
                                            <option value="{{ $category->id }}" @if(in_array($category->id, $productCategory)) selected @endif>{{$category->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-sub-category">Region</label>
                                        <select name="subcategory_id[]" id="subcategory_id" class="form-control form-control-alternative" multiple="multiple">
                                            @if(isset($subCategories) && count($subCategories) > 0)
                                            @foreach($subCategories as $category)
                                            <option value="{{ $category->id }}" @if(in_array($category->id, $productCategory)) selected @endif>{{$category->name}}</option>
                                            @endforeach
                                            @endif

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group" id="category_types">
                                        <label class="form-control-label" for="input-sub-category">Grape</label>
                                        <select name="type_id[]" id="type_id" class="form-control form-control-alternative" multiple="multiple">
                                            @if(isset($types) && count($types) > 0)
                                            @foreach($types as $type)
                                            <option value="{{ $type->id }}" @if(in_array($type->id, $productCategory)) selected @endif>{{$type->name}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-status">Status</label>
                                        <select name="status" class="form-control form-control-alternative">
                                            <option value="">Please Select Status
                                            </option>
                                            <option value="1" {{(old('status', $product->status) == '1' ? 'selected':'')}}>Active
                                            </option>
                                            <option value="2" {{(old('status', $product->status) == '2' ? 'selected':'')}}>Inactive
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-5">
                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="is_show_features" class="custom-control-input" id="is_show_features" {{ old('is_show_features', $product->is_show_features == 1 ? 'checked': '' ) }}>
                                        <label class="custom-control-label" for="is_show_features"> Product show in Home Product Feature</label>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label" for="description">Description</label>
                                        <textarea class="form-control form-control-alternative" rows="5" id="description" name="description" value="{{ old('description', $product->description) }}">{{ old('description', $product->description) }}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label" for="shipping_detail">Shipping Detail</label>
                                        <textarea class="form-control form-control-alternative" rows="5" id="shipping_detail" name="shipping_detail" value="{{ old('shipping_detail', $product->shipping_detail) }}">{{ old('shipping_detail', $product->shipping_detail) }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="img-section">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <label for="filename" class="required">Images</label>
                                        <div class="input-group control-group">
                                            <input type="file" name="filename[]" class="form-control">
                                            <div class="input-group-btn">
                                                <button class="btn btn-success btn-plus-img" type="button">+
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if(isset($product))
                            <div class="row mt-4">
                                @foreach($product->productImages as $productImages)
                                <div class="col-md-2 proImg_{{$productImages->id}}">
                                    <div class="product_upload_img">
                                        @if(!empty($productImages->filename) && \Illuminate\Support\Facades\Storage::exists($productImages->filename))
                                        <img src="{{ url('storage') . '/' . $productImages->filename}}" style="height: 100px;">
                                        @else
                                        <img src="{{ url('storage/no_image.png')}}">
                                        @endif
                                        <a href="javascript:void(0);" data-id="{{$productImages->id}}" class="removeImage" style="margin-left: -17px;vertical-align: top;color: red;"><i class="fas fa-times-circle"></i></a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @endif
                            <h6 class="heading-small text-muted mb-4">{{ __('Product prices') }}</h6>
                            <div id="price_section" class="price_section_wrap">
                                <input type="hidden" name="totalSizes" value="@if(isset($variants) && count($variants) > 0 ){{count($variants)}}@else 1 @endif" id="total_sizes_val">

                                @if(isset($variants) && count($variants) > 0 )
                                @foreach($variants as $key=>$variant)
                                <div id="prices_section{{$key}}" class="price_section_item">
                                    <input type="hidden" name="variant_id[]" value="{{$variant->id}}" id="variant_val_{{$key}}">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-size">Sizes</label>
                                                <select name="size_id[]" id="size_id{{$key}}" class="form-control form-control-alternative">
                                                    <option value="" disabled selected>Select Size</option>
                                                    @foreach($sizes as $size)
                                                    <option value="{{ $size->id }}" {{ $size->id == $variant->size_id ? 'selected': ''}}>{{$size->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-retail">Retail Price</label>
                                                <input type="text" name="retail_price[]" id="retail_price{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Retail Price') }}" value="{{$variant->retail_price}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-selling">Selling Price</label>
                                                <input type="text" name="selling_price[]" id="selling_price{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Selling Price') }}" value="{{$variant->selling_price}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-stock">Stock</label>
                                                <input type="text" name="stock[]" id="stock{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Stock') }}" value="{{$variant->stock}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-length">Length (inch)</label>
                                                <input type="text" name="length[]" id="length{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Length') }}" value="{{$variant->length}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-width">Width (inch)</label>
                                                <input type="text" name="width[]" id="width{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Width') }}" value="{{$variant->width}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-height">Height (inch)</label>
                                                <input type="text" name="height[]" id="height{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Height') }}" value="{{$variant->height}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label class="form-control-label" for="input-weight">Weight (ml)</label>
                                                <input type="text" name="weight[]" id="weight{{$key}}" class="form-control form-control-alternative" placeholder="{{ __('Weight') }}" value="{{$variant->weight}}" autofocus>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="input-group-btn">
                                                @if($key > 0)
                                                <button class="btn btn-danger btn-remove-size" data-id="{{$key}}" type="button">-
                                                </button>
                                                @else
                                                <button class="btn btn-success btn-plus-size" data-id="{{$key}}" type="button">+
                                                </button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @endforeach
                                @endif
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-success mt-4" onclick="save()">{{(isset($product) && $product->id >0) ? 'Update' : 'Add' }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('admin.layouts.footers.auth')
</div>
@endsection
@push('js')

<script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>

{!! JsValidator::formRequest(\App\Http\Requests\Admin\ProductRequest::class, '#product-form'); !!}
<script>
    $(document).ready(function() {
        $("#tag_id").select2({
            placeholder: "Select Tag",
            allowClear: true
        });
        $("#category_id").select2({
            placeholder: "Select Category",
            allowClear: true
        });
        $("#subcategory_id").select2({
            placeholder: "Select Region",
            allowClear: true
        });
        $("#type_id").select2({
            placeholder: "Select Grape",
            allowClear: true
        });

        $('#category_id').on('change', function() {

            let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: "post",
                url: "{{ route('getSubCategory')}}",
                data: {
                    _token: CSRF_TOKEN,
                    category_id: $(this).val()
                },
                success: function(data) {

                    $('#subcategory_id').html(data.html);

                }
            });
        });
        $('#subcategory_id').on('change', function() {

            let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: "post",
                url: "{{ route('getTypes')}}",
                data: {
                    _token: CSRF_TOKEN,
                    sub_category_id: $(this).val()
                },
                success: function(data) {

                    $('#type_id').html(data.html);

                    // $("#type_id").select2({
                    //     placeholder: "Select Types",
                    //     allowClear: true
                    // });

                }
            });
        });

        $('body').on('click', '.removeImage', function(event) {
            var result = confirm("Are You sure you want to delete?");
            if (result) {
                if ($(this).attr('data-id')) {
                    var images_id = $(this).attr('data-id');
                    $.ajax({
                        type: "GET",
                        url: "{{ route('remove-product-image')}}",
                        data: {
                            id: images_id
                        },
                        success: function(data) {
                            if (data.status == true) {
                                $('.proImg_' + images_id).remove();
                                // location.reload();
                            }
                        },
                        error: function(jqXhr) {
                            if (jqXhr.status === 422) {

                            }
                        }
                    });
                } else {
                    $(this).parent().parent().remove();
                }
                event.preventDefault();
            }
        });

        $(document).on('click', '.btn-plus-size', function() {
            var key = $(this).data('id');
            var id = $('#total_sizes_val').val();
            var total_sizes = "{{count($sizes)}}";
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            if(parseInt(id) < parseInt(total_sizes)) {
            $.ajax({
                url: "{{route('add_more_size')}}",
                method: 'post',
                data: {
                    _token: CSRF_TOKEN,
                    id: id
                },
                success: function(result) {
                    $('#price_section').append(result.html);

                    var total = parseInt(id) + 1;
                    $('#total_sizes_val').val(total);
                }
            });
        } else {
            swal({
                title: "",
                text: "Do not add more the " + total_sizes + " sizes",
                type: "warning",
                showCancelButton: false,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Got It!",
                closeOnConfirm: true
            });
        }
        });
        $(document).on('click', '.btn-remove-size', function() {
            var id = $(this).data('id');
            removeHtml(id);
        });
    });

    function removeHtml(id) {
        let total_sizes_val = $('#variant_val_' + id).val();
        swal({
                title: "",
                text: "Are you sure? Delete this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true
            },
            function(isConfirm) {
                if (isConfirm) {
                    if (total_sizes_val !== '0' && total_sizes_val !== undefined && total_sizes_val !== '') {
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        $.ajax({
                            url: "{{route('remove_product_size')}}",
                            method: 'post',
                            data: {
                                _token: CSRF_TOKEN,
                                id: total_sizes_val
                            },
                            success: function(result) {
                                $('#prices_section' + id).remove();
                                var total = $('#total_sizes_val').val();
                                var total = parseInt(total) - 1;
                                $('#total_sizes_val').val(total);
                                //  location.reload();
                            }
                        });
                    } else {
                        $('#prices_section' + id).remove();
                        var total = $('#total_sizes_val').val();
                        var total = parseInt(total) - 1;
                        $('#total_sizes_val').val(total);
                    }

                } else {
                    swal("Cancelled", "Your Data is Safe!", "error");
                }
            });
    }

    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage" + no).files[0]);
        oFReader.onload = function(oFREvent) {
            document.getElementById("uploadPreview" + no).src = oFREvent.target.result;
        };
    }

    function save() {
        let form = $("form[name='product-form']");

        if (form.valid()) {
            $('form#product-form').submit();
        }
    }

    $(document).on('click', '.btn-plus-img', function() {
        let html = '<div class="row">';
        html += '<div class="col-md-6 form-group">';
        html += ' <div class="input-group control-group">';
        html += '<input type="file" name="filename[]" class="form-control">';
        html += '<div class="input-group-btn">';
        html += '<button class="btn btn-danger cross-img" type="button">-</button>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        $('.img-section').append(html);
    });

    $(document).on('click', '.cross-img', function() {
        var id = $(this).attr('id');
        $(this).parent().parent().parent().remove();
    });
</script>

@endpush