@extends('admin.layouts.app')

@section('breadcrumb-link')
    <li class="breadcrumb-item active">
        <a href="{{route($breadcrumbs['create']['link'])}}">{{$breadcrumbs['create']['text']}}</a>
    </li>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <form action="{{route('products.store')}}" class="floating-labels m-t-40" enctype="multipart/form-data" method="POST">
                @csrf

                <div class="row">
                    <div class="col-lg-6 mx-auto">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Upload Product Display Image</h4>
                                <label for="input-file-now">For Optimum Presentation, use <span class="text-danger"> 500px * 500px </span> Image!</label>
                                <input type="file" id="input-file-now" class="dropify" name="image" data-max-file-size="2M"/>
                            </div>
                            <div class="card-footer">
                                @error("image")
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 mx-auto">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Upload Product Alt Image</h4>
                                <label for="input-file-now">For Optimum Presentation, use <span class="text-danger"> 500px * 500px </span> Image!</label>
                                <input type="file" id="input-file-now" class="dropify" name="alt_image" data-max-file-size="2M"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Name</label>
                            <input type="text" name="name" class="form-control  @error("name") is-invalid @enderror" id="exampleInputEmail1" value='{{old("name")}}' aria-describedby="emailHelp" placeholder="Enter Name">

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

                        <div class="form-group">
                            <label for="price">Price</label>
                            <input type="text" name="price" class="form-control  @error("price") is-invalid @enderror" id="price" value='{{old("price")}}' placeholder="Enter Price">

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

                        <div class="form-group">
                            <label for="kg">Kg</label>
                            <input type="text" name="kg" class="form-control  @error("kg") is-invalid @enderror" id="kg" value='{{old("kg")}}' placeholder="Enter kg">

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

                        <div class="form-group">
                            <label for="price">Description</label>
                            <textarea type="text" name="description" class="form-control  @error("description") is-invalid @enderror" placeholder="Enter Description" rows="5">{{old("description")}}</textarea>

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


                        <div class="form-group">
                            <label for="category">Category</label>

                            <select class="form-control" id="category" name="category_id">
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                @endforeach
                            </select>

                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> Create Product</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Basic
            $('.dropify').dropify();

            // Translated
            $('.dropify-fr').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                    remove: 'Supprimer',
                    error: 'Désolé, le fichier trop volumineux'
                }
            });

            // Used events
            var drEvent = $('#input-file-events').dropify();

            drEvent.on('dropify.beforeClear', function(event, element) {
                return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
            });

            drEvent.on('dropify.afterClear', function(event, element) {
                alert('File deleted');
            });

            drEvent.on('dropify.errors', function(event, element) {
                console.log('Has Errors');
            });

            var drDestroy = $('#input-file-to-destroy').dropify();
            drDestroy = drDestroy.data('dropify')
            $('#toggleDropify').on('click', function(e) {
                e.preventDefault();
                if (drDestroy.isDropified()) {
                    drDestroy.destroy();
                } else {
                    drDestroy.init();
                }
            })
        });
    </script>
@endpush