@extends('pages.admin.layout')
@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header mb-4">
        <h1>
            Edit Product
        </h1>

        <div class="az-content-breadcrumb">
            <span><a href="/admin/home"><i class="fa fa-dashboard"></i> Home</a></span>
            <span><a href="{{ route('admin.products.index') }}">Products</a></span>
        </div>
    </section>

    <form role="form" enctype="multipart/form-data" novalidate method="post" action="{{ route('admin.products.update', $product->id) }}">
        {{ method_field('PUT') }}
        @csrf
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <!-- left column -->
                <div class="col-md-4">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">Edit Product</h3>
                        </div>

                        @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        <!-- /.box-header -->
                        <!-- form start -->
                        <div class="box-body">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Enter product name" value="{{ $product->name }}">
                            </div>
                            <div class="form-group">
                                <label for="name">Description</label>
                                <textarea class="form-control" name="description" id="description">{{$product->description}}</textarea>
                            </div>
                            <div class="row">
                                <div class="col-6">

                                    <div class="form-group">
                                        <label for="name">SKU - Product code</label>
                                        <input type="text" class="form-control" name="sku" id="sku" placeholder="Enter product sku" value="{{ $product->sku }}">
                                    </div>
                                </div>
                                <div class="col-6">

                                    <div class="form-group">
                                        <label for="name">Default Price</label>
                                        <input type="text" class="form-control" name="default_price" id="default_price" placeholder="Enter product default price" value="{{ $product->default_price }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">Ingredients</label>
                                <textarea class="form-control" name="ingredients" id="ingredients">{{$product->ingredients}}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="name">Allergen Information</label>
                                <textarea class="form-control" name="allergen_info" id="allergen_info">{{$product->allergen_info}}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="name">Shelf Life</label>
                                <textarea class="form-control" name="shelf_life" id="shelf_life">{{$product->shelf_life}}</textarea>
                            </div>
                            <div class="row">
                                <div class="col-6">

                                    <div class="form-group">
                                        <label for="suppliers">Supplier(s)</label>
                                        <select name="suppliers[]" id="suppliers" multiple class="form-control">
                                            @foreach(\App\Supplier::all() as $supplier)
                                            <option value="{{ $supplier->id }}" {{ $product->suppliers->contains('id', $supplier->id) ? ' selected' : '' }}>{{ ($supplier->company_name) ? $supplier->company_name : $supplier->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-6">

                                    <div class="form-group">
                                        <label for="brand">Categories</label>
                                        <select class="form-control" name="category">
                                            @foreach(\App\Category::all() as $Category)
                                            <option value="{{ $Category->id }}" {{ $product->categories->contains('id', $Category->id) ? ' selected' : '' }}>{{ $Category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <h5>Feature information</h5>

                                    <div class="checkbox">
                                        <label class="ckbox">
                                            <input type="checkbox" name="featured" value="1" {{ $product->featured ? ' checked' : '' }}/><span>Featured</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label class="ckbox">
                                            <input type="checkbox" name="active" value="1" {{ $product->active ? ' checked' : '' }}><span>Active</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <h5>Available on which site</h5>

                                    <div class="checkbox">
                                        <label class="ckbox">
                                            <input type="checkbox" name="min_site" value="1" {{ $product->min_site ? ' checked' : '' }}/><span>MIN Online</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label class="ckbox">
                                            <input type="checkbox" name="edible_site" value="1" {{ $product->edible_site ? ' checked' : '' }}><span>Edible 16</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </div>
                    <!-- /.box -->
                </div>
                <div class="col-md-4">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">Image</h3>
                        </div>
                        <div class="box-body mb-2">

                            <div class="">

                                <div class="images">
                                    @if($product->getFirstMediaUrl('images','thumb'))
                                    @foreach($product->getMedia('images') as $image)
                                    <div class="product_image">
                                        <img src="{{ $image->getUrl('thumb') }}"/>
                                        <div class="image-footer">
                                            <label class="ckbox">
                                            <input type="checkbox" name="remove_image[]" value="{{ $image->getKey() }}"> <span>Remove?</span>
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif

                                    <div class="product_image">

                                        <div class="addImage">
                                            <i class="fa fa-upload"></i>
                                            <label for="image">Add Image</label>
                                        </div>
                                        <div class="form-group">
                                            <input type="file" name="image" id="image" value="{{ old('image') }}" class="form-control"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div class="box-footer pull-right">
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                            <a href="https://demo.edible.fuelled.co/products/{{$product->id}}" class="btn btn-success">View on Website</a>
                        </div>

                        <div class="clearfix"></div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box  box-primary">

                        <div class="box-header with-border">
                            <h3 class="box-title">Product Options</h3>
                        </div>

                        <div class="box-body">
                            <div class="clearfix"></div>
                            <div class="tableOptionsContainer">

                                @include('pages.admin.products._product_options_table')
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#productOptions" data-productItemID="new">
                                Add product options
                            </button>

                        </div>
                    </div>

                    @if(env('IS_MIN_ONLINE') == 0)
                    <div class="box box-success">
                        <div class="row ecoBox">
                        <div class="col-12">
                            <h3>EcoVillage Information</h3>
                        </div>
                        <div class="col-6">

                            <h5>Availablity on ePos (if checked - it will not be on ePos)</h5>
                            <div class="checkbox">
                                <label class="ckbox">
                                    <input type="checkbox" name="non_eco_village" value="1" {{ $product->non_eco_village ? ' checked' : '' }}/><span>Non Eco Village Product</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-6">
                            <h5>For Products that are Weighed</h5>
                            <div class="form-group">
                                <label for="name">Price per unit</label>
                                <input type="text" class="form-control" name="price_per_unit" id="price_per_unit" placeholder="Price per unit" value="{{ $product->price_per_unit }}">
                            </div>
                            <div class="form-group">
                                <label for="name">Unit Measurement ie KG</label>
                                <input type="text" class="form-control" name="unit_measurement" id="unit_measurement" placeholder="Unit Measurement ie KG" value="{{ $product->unit_measurement }}">
                            </div>
                        </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-outline-success btn-block">Save Changes</button>
                            </div>
                    </div>
                    </div>
                    @endif
                </div>
            </div>
        </section>
    </form>
</div>
                            @include('pages.admin.products._product_options_modal')
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.5.1/dist/dropzone.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#productOptions').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var recipient = button.data('productitemid'); // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            if (recipient !== "new") {

                $.ajax({
                    method: "GET",
                    url: "/admin/product-items/" + recipient, success: function (result) {
                        if (result && result.ProductItem) {
                            modal.find("#item-id").val(result.ProductItem.id);
                            modal.find("#item-name").val(result.ProductItem.name);
                            modal.find("#item-ingredients").val(result.ProductItem.ingredients);
                            modal.find("#item-price").val(result.ProductItem.price);
                            modal.find("#item-stock").val(result.ProductItem.stock);

                            if (result.ProductItem.active) {
                                modal.find("#item-active").attr("checked", "checked");
                            } else {
                                modal.find("#item-active").attr("checked", null);
                            }
                        }

                    }, error: function (err, body) {
                        return swal({
                            type: 'error',
                            title: err.responseJSON.error
                        })
                    }
                });
            } else {

                modal.find("#item-id").val('');
                modal.find("#item-name").val('');
                modal.find("#item-ingredients").val('');
                modal.find("#item-price").val('');
                modal.find("#item-stock").val('');
                modal.find("#item-active").attr("checked", "checked");
            }
        });

        function reloadProductTable() {

            $.ajax({
                method: "GET",
                url: "/admin/getproductoptions/{{$product->id}}", success: function (result) {
                    $(".tableOptionsContainer").html(result);
                }
            });
        }

        $(document).on('click', '.deleteProductItem', function(e) {
            var button = $(this);

            swal({
                title: "Are you sure you want to delete " + button.data('name') + " from {{$product->name}}?",
                text: "You will not be able to recover this product option if you delete it!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
                .then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/admin/product-items/'+button.data('productitemid'), success: function (result) {

                                swal("Your product option has been deleted", {
                                    icon: "success",
                                });

                                reloadProductTable();

                            }, error: function (err, body) {
                                return swal({
                                    type: 'error',
                                    title: err.responseJSON.error
                                })
                            }
                        });
                    } else {
                        swal("Your product option is safe!");
                    }
                });
        });

        $(document).on('click', '#item-save', function(e) {
            e.preventDefault();

            var data = {
                'name': $("#item-name").val(),
                'ingredients': $("#item-ingredients").val(),
                'price': $("#item-price").val(),
                'stock': $("#item-stock").val(),
                'active': $("#item-active").val(),
                'product_id': '{{ $product->id }}'
            };

            if($("#item-name").val() == '') {
                return swal({
                        type: 'error',
                        title: 'You need to provide a name for the product option'
                    })
            }
            if($("#item-price").val() == '') {
                return swal({
                        type: 'error',
                        title: 'You need to provide a price for the product option'
                    })
            }

            var id = $("#item-id").val();

            var method = "POST";

            var url = "/admin/product-items";

            if (id) {
                data.id = id;
                method = "PUT";
                url += "/"+id;
            }

            data._method = method;

            $.ajax({
                method: method,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: url, success: function (result) {

                    swal("Your product option has been saved!", {
                        icon: "success",
                    });
                    $('#productOptions').trigger('click')
                    reloadProductTable();

                }, error: function (err, body) {
                    return swal({
                        type: 'error',
                        title: err.responseJSON.error
                    })
                }
            });
        })
    })
</script>
<style>
    .row.ecoBox {
    border: 1px solid #3bb000;
    margin-top: 20px;
    padding: 20px;
        margin-left: 0px;
        margin-right: 0px;
}

.row.ecoBox h3 {
    background: #3bb000;
    color: white;
    text-align: center;
    padding: 9px;
}
</style>
@append