@extends('layouts.admin')
@section('content')

<div class="card">

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('global.categories.title_singular') }}
    </div>
    <div class="card-body">
        <form action="{{ route("admin.category.store") }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('name_en') ? 'has-error' : '' }}">
                        <label for="name_en">{{ trans('global.categories.fields.name_en') }}*</label>
                        <input type="text" id="name_en" name="name_en" class="form-control" value="{{ old('name_en', isset($category) ? $category->name_en : '') }}">
                        @if($errors->has('name'))
                            <p class="help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('name_mm') ? 'has-error' : '' }}">
                        <label for="name_mm">{{ trans('global.categories.fields.name_mm') }}*</label>
                        <input type="text" id="name_mm" name="name_mm" class="form-control" value="{{ old('name_mm', isset($category) ? $category->name_mm : '') }}">
                        @if($errors->has('name'))
                            <p class="help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('category') ? 'has-error' : '' }}">
                        <label for="category">{{ trans('global.categories.fields.parent_category') }}</label>
                        <select name="category_id" id="category_id" class="form-control">
                            <option value="">Choose</option>
                            @foreach($categories as $id => $value)
                                {{--  <option value="{{ $id }}" {{ (isset($category) && $category->ParentCategory ? $category->ParentCategory->id : old('category_id')) == $id ? 'selected' : '' }} >{{ $value }}</option>
                                  --}}
                                <option class="{{ isset($value['has_child'])?'text-danger':'' }}" value="{{ $id }}" {{ (isset($category) && $category->ParentCategory ? $category->ParentCategory->id : old('category_id')) == $id ? 'selected' : '' }} {{ isset($value['has_child'])?'disabled':'' }} >{{ $value['name'] }} {{ isset($value['has_child'])?'('.$value['has_child'].')':'' }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('slug') ? 'has-error' : '' }}">
                        <label for="slug">{{ trans('global.categories.fields.slug') }}*</label>
                        <input type="text" id="slug" name="slug" class="form-control" value="{{ old('slug', isset($category) ? $category->slug : '') }}" required="">
                        @if($errors->has('slug'))
                            <p class="help-block">
                                {{ $errors->first('slug') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('positon_display') ? 'has-error' : '' }}">
                        <label for="positon_display">{{ trans('global.categories.fields.positon_display') }}*</label>
                        <input type="number" id="positon_display" name="positon_display" class="form-control" value="{{ old('positon_display', isset($category) ? $category->positon_display : '') }}">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group{{ $errors->has('sub_banner_image') ? ' has-error' : '' }}">
                        <label for="sub_banner_image">{{ trans('global.categories.fields.sub_banner_image') }}</label><br>
                        {!! Form::file('sub_banner_image', ['class' => 'form-control','required', 'accept' => 'image/*']) !!} <br>
                        <small class="text-danger">{{ $errors->first('sub_banner_image') }}</small>
                    </div>
                </div>
            </div>
            <div class="row monthly_pick_up">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('monthly_pick_up') ? 'has-error' : '' }}">
                        <label for="monthly_pick_up">{{ trans('global.categories.fields.monthly_pick_up') }}</label>
                        <input type="number" id="monthly_pick_up" name="monthly_pick_up" class="form-control" value="{{ old('monthly_pick_up', isset($category) ? $category->monthly_pick_up : '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('monthly_pick_up_name') ? 'has-error' : '' }}">
                        <label for="monthly_pick_up_name">{{ trans('global.categories.fields.monthly_pick_up_name') }}</label>
                        <input type="text" id="monthly_pick_up_name" name="monthly_pick_up_name" class="form-control" value="{{ old('monthly_pick_up_name') }}">
                        @if($errors->has('monthly_pick_up_name'))
                            <p class="help-block">
                                {{ $errors->first('monthly_pick_up_name') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row home_category">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('home_section') ? 'has-error' : '' }}">
                        <label for="home_section">{{ trans('global.categories.fields.home_section') }}</label>
                        <input type="number" id="home_section" name="home_section" class="form-control" min="1" max="5" value="{{ old('home_section', isset($category) ? $category->home_section : '') }}">
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('description_en') ? 'has-error' : '' }}">
                        <label for="description_en">{{ trans('global.categories.fields.description_en') }}</label>
                        <textarea id="description_en" name="description_en" class="form-control ">{{ old('description_en', isset($category) ? $category->description_en : '') }}</textarea>
                        @if($errors->has('description'))
                            <p class="help-block">
                                {{ $errors->first('description') }}
                            </p>
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('description_mm') ? 'has-error' : '' }}">
                        <label for="description_mm">{{ trans('global.categories.fields.description_mm') }}</label>
                        <textarea id="description_mm" name="description_mm" class="form-control ">{{ old('description_mm', isset($category) ? $category->description_mm : '') }}</textarea>
                        @if($errors->has('description'))
                            <p class="help-block">
                                {{ $errors->first('description') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
            {{-- <div class="form-group {{ $errors->has('category_image') ? ' has-error' : '' }}">
                <label for="category_image">{{ trans('global.categories.fields.category_image') }}</label><br>
                <div class="needsclick dropzone {{ $errors->has('category_image') ? 'is-invalid' : '' }}" id="category_image-dropzone">
                </div>
                @if($errors->has('category_image'))
                    <p class="help-block">
                        {{ $errors->first('category_image') }}
                    </p>
                @endif
                <span class="help-block">{{ trans('global.categories.fields.category_image_helper') }}</span>
            </div> --}}
            <div class="col-md-6">
                <div class="form-group {{ $errors->has('category_image') ? ' has-error' : '' }}">
                    <label for="category_image">{{ trans('global.categories.fields.category_image') }}</label><br>
                    <input class="form-control" type="file" name="category_image" id="category_image">
                    @if($errors->has('category_image'))
                        <p class="help-block">
                            {{ $errors->first('category_image') }}
                        </p>
                    @endif
                    <span class="help-block">{{ trans('global.categories.fields.category_image_helper') }}</span>
                    <br>
                    <div>
                        <img id="preview_category_image" height="150" alt="Preview Image" style="display: none;">
                    </div>
                </div>
            </div>

            <div class="text-right">
                <input class="btn btn-info" type="submit" value="{{ trans('global.save') }}">
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
    // category image 
    var inputImage = document.getElementById('category_image');
    var previewImage = document.getElementById('preview_category_image');

    // Add an event listener to the input element
    inputImage.addEventListener('change', function() {
        if (inputImage.files && inputImage.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';
            };
            reader.readAsDataURL(inputImage.files[0]);
        }
    });


    Dropzone.options.categoryImageDropzone = {
    url: '{{ route('admin.category.storeMedia') }}',
    maxFilesize: 2, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif,.webp',
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2,
      width: 4096,
      height: 4096
    },
    success: function (file, response) {
      $('form').find('input[name="category_image"]').remove()
      $('form').append('<input type="hidden" name="category_image" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="category_image"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($category) && $category->category_image)
      var file = {!! json_encode($category->category_image) !!}
          this.options.addedfile.call(this, file)
      this.options.thumbnail.call(this, file, file.preview)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="category_image" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
    error: function (file, response) {
        if ($.type(response) === 'string') {
            var message = response //dropzone sends it's own error messages in string
        } else {
            var message = response.errors.file
        }
        file.previewElement.classList.add('dz-error')
        _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
        _results = []
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i]
            _results.push(node.textContent = message)
        }

        return _results
    }
}
$(document).ready(function(){
    $(".home_category").hide();
    $(".monthly_pick_up").hide();
    $("#category_id").click(function(){
        var parentCategory = $("#category_id").val();
        if(parentCategory == 41 || parentCategory == 104 || parentCategory == 49) {
            $(".home_category").show();
        }else{
            $(".home_category").hide();
            $("#home_section").val(null);
        }
        if(parentCategory == 41 || parentCategory == 104 || parentCategory == 1 || parentCategory == 116 || parentCategory == 6 || parentCategory == 64) {
            $(".monthly_pick_up").show();
            if(parentCategory == 6) {
                $("#monthly_pick_up").attr("min",2);
                $("#monthly_pick_up").attr("max",4);
            }else{
                $("#monthly_pick_up").attr("min",1)
                $("#monthly_pick_up").attr("max",5);
            }

            if (parentCategory == 116 || parentCategory == 1 || parentCategory == 64) {
                $("#monthly_pick_up").attr("max",1);
            }

        }else{
            $(".monthly_pick_up").hide();
            $("#monthly_pick_up").val(null);
            $("#monthly_pick_up_name").val(null);
        }
    });
});
</script>
@endsection