@extends('layouts.admin')

@section('content')
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex">
            <h6 class="m-0 font-weight-bold text-success">
                Edit product ({{ $product->name }})
            </h6>
            <div class="ml-auto">
                <a href="{{ route('admin.products.index') }}" class="btn btn-success">
                    <span class="icon text-white-50">
                        <i class="fa fa-home"></i>
                    </span>
                    <span class="text">Back to products</span>
                </a>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="name" class="text-small text-uppercase">{{ __('Product Name') }}</label>
                            <input id="name" type="text" class="form-control " name="name"
                                   value="{{ old('name', $product->name) }}">
                            @error('name')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="col-6">

                        <div class="form-group">
                            <label for="price" class="text-small text-uppercase">{{ __('Price') }}</label>
                            <div class="input-group">
                                <input id="price" type="number" class="form-control " name="price"
                                       value="{{ old('price', $product->price) }}">
                                @error('price')<span class="text-danger">{{ $message }}</span>@enderror
                                <span class="input-group-prepend p-t-5">{{getSettingsOf("currency")}}</span>
                            </div>
                        </div>
                    </div>
{{--                    <div class="col-4">--}}
{{--                        <div class="form-group">--}}
{{--                            <label for="quantity" class="text-small text-uppercase">{{ __('quantity') }}</label>--}}
{{--                            <input id="quantity" type="number" max="10000" class="form-control "--}}
{{--                                   name="quantity"--}}
{{--                                   value="{{ old('quantity', $product->quantity) }}">--}}
{{--                            @error('quantity')<span class="text-danger">{{ $message }}</span>@enderror--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="category_id">Category</label>
                            <select name="category_id" id="category_id" class="form-control select2s" data-plugin-multiselect>
                                <option value="">---</option>
                                @forelse($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id', $product->category_id) == $category->id ? 'selected' : null }}>
                                        {{ $category->name }}
                                    </option>
                                @empty
                                @endforelse
                            </select>
                            @error('category_id')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="tags">Tags</label>
                            <select name="tags[]" id="tags" class="form-control select2s" multiple="multiple" data-plugin-multiselect>>
                                @forelse($tags as $tag)
                                    <option value="{{ $tag->id }}"
                                        {{ in_array($tag->id, $product->tags->pluck('id')->toArray()) ? 'selected' : null }}>
                                        {{ $tag->name }}
                                    </option>
                                @empty
                                @endforelse
                            </select>
                            @error('tags')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>


                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="featured">{{__("Featured")}}</label>
                            <select name="featured" id="featured" class="form-control select2" data-plugin-multiselectc>
                                <option value="1" {{ old('featured', $product->featured) == 1 ? 'selected' : null }}>
                                    {{__("Yes")}}
                                </option>
                                <option value="0" {{ old('featured', $product->featured) == 0 ? 'selected' : null }}>
                                    {{__('No')}}
                                </option>
                            </select>
                            @error('featured')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="active">Status</label>
                            <select name="active" id="active" class="form-control select2" data-plugin-multiselects>
                                <option value="1" {{ old('active', $product->active) == 1 ? 'selected' : null }}>
                                    {{__("Active")}}
                                </option>
                                <option value="0" {{ old('active', $product->active) == 0 ? 'selected' : null }}>
                                    {{__('Inactive')}}
                                </option>
                            </select>
                            @error('active')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label for="description" class="text-small text-uppercase">{{ __('Description') }}</label>
                            <textarea name="description" class="form-control summernote">
                                {!! old('description', $product->description) !!}
                            </textarea>
                            @error('description')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label for="details" class="text-small text-uppercase">{{ __('Details') }}</label>
                            <textarea name="details" class="form-control summernote">
                                {!! old('details', $product->details) !!}
                            </textarea>
                            @error('details')<span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label for="images">images</label>
                        <br>
                        <div class="file-loading">
                            <input type="file" name="images[]" id="product-images" class="file-input-overview"
                                   multiple="multiple">
                        </div>
                        @error('images')<span class="text-danger">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">
                        {{ __('Update') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

@endsection
@push('js')
    <script>
        $(document).ready(function () {
            // summernote
            $('.summernote').summernote({
                tabSize: 2,
                height: 200,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });

            // upload images
            $("#product-images").fileinput({
                theme: "fas",
                allowedFileTypes: ['image'],
                showCancel: true,
                showRemove: true,
                showUpload: false,
                overwriteInitial: false,
                showConsoleLogs: true,
                initialPreview: @json($product->files),
                initialPreviewAsData: true,
                initialPreviewFileType: 'image',
                initialPreviewConfig: @json($product->getInitialPreviewConfig())
            })

        .on('filesorted', function (event, params) {
               console.log(`filesorted [${params.previewId}] => `, params.oldIndex, params.newIndex, params.stack)
            })
            .on('filedeleted', function(event, id, req) {
                console.log("Image supprimée : ", id, req);
                // Vous pouvez ajouter ici une requête AJAX pour supprimer le fichier du serveur si nécessaire
            })
            ;


        })
    </script>
@endpush
