@extends('admin.layouts.app')

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

                <div class="row">
                    <div class="col-lg-12 mx-auto">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Upload Category 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" data-default-file="{{asset($entity->displayimage)}}"/>
                            </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") ?? $entity->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="exampleInputEmail2">Type</label>

                            <select class="form-control" id="exampleInputEmail2" name="type">
                                @foreach(\App\Entities\Categories\Category::$TYPES as $type => $class)
                                    <option value="{{$class}}"  {{$entity->type == $class ? 'selected' : ''}}>{{$type}}</option>
                                @endforeach
                            </select>

                        </div>

                        <div class="row">
                            <div class="col-12"><p class="font-weight-bold">Status</p></div>

                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="customRadio0" name="status" value="1" class="custom-control-input" {{$entity->status == 'Displayed' ? 'checked' : ''}}>
                                    <label class="custom-control-label" for="customRadio0">True</label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="customRadio1" name="status" value="0" class="custom-control-input" {{$entity->status == 'Not Displayed' ? 'checked' : ''}}>
                                    <label class="custom-control-label" for="customRadio1">False</label>
                                </div>
                            </div>

                            @error("status")
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>


                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> Update Category</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