@extends('admin.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <form>
        <div class="side-title">
            <div class="row">
                <div class="col-lg-6">
                    <h3>{{ $title ?? 'Courses' }}</h3>
                </div>
            </div>
        </div>

        <!-- ------------ data table ------------- -->
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th scope="col">{{ __('subscribers.name') }}</th>
                <th scope="col" colspan="2">{{ __('dashboard.created_at') }}</th>
                <th scope="col">{{ __('dashboard.processes') }}</th>
            </tr>
            </thead>

            <tbody class="response">
            <tr class="search_filter_form">
                <th scope="row">
                    <input type="text" name="name" value="{{ $request->name ?? '' }}" class="form-control" placeholder="">
                </th>
                <td>
                    <input type="text" placeholder="{{ __('dashboard.date_from') }}" name="date_from" value="{{ $request->date_from ?? '' }}" class="date_from form-control">
                </td>
                <td>
                    <input type="text" placeholder="{{ __('dashboard.date_to') }}" name="date_to" value="{{ $request->date_to ?? '' }}" class="date_to form-control">
                </td>
                <th scope="col"><button type="button" class="butn color small search"><span><i class="fas fa-search"></i></span></button></th>
            </tr>
            </tbody>


        </table>
        <!-- ------------ sidemenu links ------------- -->
    </form>
@endsection

<!-- Course Modal -->
<div class="modal fade" id="courseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Course finish</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('subscribers.store')}}" method="post" enctype="multipart/form-data" class="course_done_form">
                    @csrf()
                    <input type="hidden" name="user_id" class="user_id">
                    <input type="hidden" name="course_id" class="course_id">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="checkbox" value="1" id="hours_passed" name="hours_passed">
                                <label for="hours_passed"><h6>Course Done</h6></label>
                            </div>
                        </div>
                    </div>

                    {{--Start image container--}}
                    <div class="form-group col-lg-12">
                        <label>{{ __('courses.certified') }} </label>
                        <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="certification" value="{{old("certification")}}"/>

                        <div class="photos main_photo {{ old('certification') ? ' wow fadeInUp' : 'hide' }}">
                            <div class="col-lg-4">
                                <div class="items">
                                    <div class="img">
                                        <a href="#" id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" class="lfm" data-hide=".pick_button">
                                            <img src="{{asset(old('certification'))}} "  id="image_holder" class="image_holder"/>
                                        </a>
                                    </div>
                                    <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail" data-hide=".main_photo" data-show=".pick_button"><i class="fas fa-times"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>
                        <span class="input-group-btn pick_button {{ old('certification') ? 'hide' : '' }} ">
                            <a id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_photo" data-hide=".pick_button" class="lfm btn btn-primary text-light">
                                <i class="fas fa-camera-retro"></i> Choose
                            </a>
                        </span>
                    </div>
                    {{--End image container--}}

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary course_done_button">Save changes</button>
            </div>
        </div>
    </div>
</div>


<script>
    /**
     * Importat to handle ajax requests for filters, deletes, trash and any proccess done on the table's data
     */
    var dataTable={
        route: '{{ route("subscribers.coursesGrid", $subscriber) }}'
    }
</script>
@section('inner_js')

    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    {{--    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{getCurrentLocale()}}",
            imageTitle = "{{meta('image_title', getCurrentLocale()) ?? null}}",
            imageUrl = "{{meta('image_url', getCurrentLocale()) ?? null}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/website_galleries.js') }}"></script>

    <script>
        /**
         * Set local storage photoGallery key to null
         * it means add new photo success
         */
        $(document).ready(function () {
            localStorage.setItem('websiteGalleryPhoto', 'null');
            localStorage.setItem('oldWebsiteGalleryPhoto', 'null');
        })
    </script>

    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>


    <script>
        $(document).ready(function () {
            $("input[name='certification']").change(function() {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $('.certification_preview').attr('src', e.target.result);
                    };

                    reader.readAsDataURL(this.files[0]);
                }
            });

            $('.course_done_button').click(async function () {

                let form = $('.course_done_form'),
                    data = new FormData(form[0]),
                    url = form.attr('action'),
                    method = form.attr('method');
                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method,
                    contentType: false,
                    processData: false,
                });

                if (response.errors) {
                    toastr.options.closeButton = true;
                    toastr.options.showMethod = 'slideDown';
                    toastr.options.hideMethod = 'slideUp';
                    toastr.options.closeMethod = 'slideUp';
                    toastr.options.closeDuration = 200;
                    toastr.error(response.errors);
                }
                if (response.message) {
                    toastr.options.closeButton = true;
                    toastr.options.showMethod = 'slideDown';
                    toastr.options.hideMethod = 'slideUp';
                    toastr.options.closeMethod = 'slideUp';
                    toastr.options.closeDuration = 200;
                    toastr.success(response.message);

                    $('.user_id').val('');
                    $('.course_id').val('');
                    $('.pick_button').show();
                    $('.main_photo').hide();
                    $('.image_holder').attr('src', '');
                    $('.image_thumbnail').val('');
                    $('input[name="hours_passed"]').prop('checked', false);
                    setTimeout(function () {
                        $('.modal').modal('hide')
                    }, 500);

                }
            });
        })
    </script>
@endsection