@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('categories.store')}}" class="floating-labels m-t-40" enctype="multipart/form-data" method="POST">
                @csrf

                <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"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="exampleInputName">Name</label>
                            <input type="text" name="name" class="form-control  @error("name") is-invalid @enderror" id="exampleInputName" value='{{old("name")}}' 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}}">{{$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" 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">
                                    <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> Create 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