@extends('admin.master.index')

@section('title', 'Description Edit')

@section('content')

<div class="main-content">
    <section class="section">
      <div class="section-body">
        <div class="row">
          <div class="col-12 col-md-12 col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4> Edit Description </h4>
              </div>
                <form action="{{ route('description-service-update') }}" method="post" id="updateblogsFrm" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="role" class="form-control-label font-weight-300">Language Type<span class="text-danger">*</span></label>

                                    <select name="language_type" class="form-control">
                                        <option value="en" {{ $description->language_type == 'en' ? 'selected' : '' }}>English</option>
                                        <option value="fr" {{ $description->language_type == 'fr' ? 'selected' : '' }}>French</option>
                                        <option value="ar" {{ $description->language_type == 'ar' ? 'selected' : '' }}>Arabic</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="role" class="form-control-label font-weight-300">Categorye Service<span class="text-danger">*</span></label>
                                <select name="cate_service_id" id="" class="form-control">
                                    <option value="">-Select-</option>
                                    @foreach ($services as $service)
                                        <option value="{{ $service->id }}" {{ $service->id == $description->cate_service_id ? 'selected' : '' }}>{{ $service->name }}</option>
                                    @endforeach
                                </select>
                                {{-- <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-title"></p> --}}
                                <p id="cate_service_id_error" class="text-danger error-p"></p>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="hidden" name="id" value="{{base64_encode($description->id)}}" id="">
                                    <label for="role" class="form-control-label font-weight-300">Title<span class="text-danger">*</span></label>
                                    <input type="text" name="title" id="title" class="form-control" value="{{ $description->title}}" placeholder="Title">
                                    <p id="title_error" class="text-danger error-p"></p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="role" class="form-control-label font-weight-300">Slug<span class="text-danger">*</span></label>
                                    <input type="text" id="slug" name="slug" value="{{ $description->slug }}" class="form-control" readonly >
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="role" class="form-control-label font-weight-300">Image<span class="text-danger">*</span></label>
                                    <input type="file" name="image"  class="form-control" placeholder="Image">
                                    <p id="image_error" class="text-danger error-p"></p>
                                </div>
                            </div>
                            @if($description->image!=NULL && file_exists(public_path('uploads/description/'.$description->image)))
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <a href="{{asset('uploads/description/'.$description->image)}}" target="_blank">
                                            <img src="{{asset('uploads/description/'.$description->image)}}" width="100px" height="100px">
                                        </a>
                                    </div>
                                </div>
                            @endif

                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="role" class="form-control-label font-weight-300">Description<span class="text-danger">*</span></label>
                                <textarea name="description" id="" class="form-control summernote" cols="30" rows="10">{{ $description->description}}</textarea>
                                <p id="description_error" class="text-danger error-p"></p>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button class="btn btn-primary mr-1 submit" type="submit">Submit</button>

                    </div>
                </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

@endsection

@push('customjs')
    <script src="{{asset('admin/assets/bundles/summernote/summernote-bs4.js')}}"></script>
    <script>
        $('.summernote').summernote({
            toolbar: [
                ['style', ['style', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                ['font', ['fontname', 'fontsize', 'color', 'forecolor', 'backcolor']],
                ['para', ['ul', 'ol', 'paragraph', 'height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']],
                ['misc', ['undo', 'redo']]
            ]
        });
    </script>

    <script>
        $(document).ready(function () {
            let isSlugManuallyEdited = false;

            $('#slug').on('input', function () {
                isSlugManuallyEdited = true;
            });

            $('#title').on('input', function () {
                let title = $(this).val();
                if (!isSlugManuallyEdited) {
                    let slug = title
                        .toLowerCase()
                        .replace(/[^a-z0-9\s-]/g, '')
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-');

                    $('#slug').val(slug);
                }
            });

            $('#slug').on('blur', function () {
                if ($(this).val().trim() === '') {
                    isSlugManuallyEdited = false;
                }
            });
        });


    </script>
@endpush
{{-- @push('customjs')
    <script>
            $(document).on('submit', 'form#updateblogsFrm', function (event) {
                event.preventDefault();
                //clearing the error msg
                $('p.error_container').html("");

                var form = $(this);
                var data = new FormData($(this)[0]);
                var url = form.attr("action");
                var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
                $('.submit').attr('disabled',true);
                $('.form-control').attr('readonly',true);
                $('.form-control').addClass('disabled-link');
                $('.error-control').addClass('disabled-link');
                if ($('.submit').html() !== loadingText) {
                    $('.submit').html(loadingText);
                }
                    $.ajax({
                        type: form.attr('method'),
                        url: url,
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (response) {
                            window.setTimeout(function(){
                                $('.submit').attr('disabled',false);
                                $('.form-control').attr('readonly',false);
                                $('.form-control').removeClass('disabled-link');
                                $('.error-control').removeClass('disabled-link');
                                $('.submit').html('Save');
                            },2000);
                            console.log(response);
                            if(response.success==true) {
                                toastr.success("Blog Update Successfully");
                                window.setTimeout(function() {
                                    window.location.href = "{{URL::to('blogs-list')}}"
                                }, 2000);
                            }
                            //show the form validates error
                            if(response.success==false ) {
                                for (control in response.errors) {
                                var error_text = control.replace('.',"_");
                                $('#error-'+error_text).html(response.errors[control]);
                                // $('#error-'+error_text).html(response.errors[error_text][0]);
                                // console.log('#error-'+error_text);
                                }
                                // console.log(response.errors);
                            }
                        },
                        error: function (response) {
                            // alert("Error: " + errorThrown);
                            console.log(response);
                        }
                    });
                    event.stopImmediatePropagation();
                    return false;
            });

    </script>
@endpush --}}