@extends('frontend.layouts.app_minimal')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )

@push('after-scripts')
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script type="text/javascript">
        var currenteditingid = -1;
        var currentdeletingid = -1;
        Dropzone.autoDiscover = false;
        // the user uploaded image upload functionality


        $(document).ready(function () {
            $('select').select2({
                placeholder: 'Select an option'
            });

            $("div#user_image").dropzone({
                maxFiles: 3,
                acceptedFiles: "image/*",
                autoProcessQueue: false,
                addRemoveLinks: true,
                uploadMultiple:true,
                parallelUploads: 10,
                url: "{{route('frontend.customgraphicsrequest.store')}}",
                headers: {"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')},
                init: function () {
                    var myDropzone = this;
                    // Update selector to match your button
                    $('#newrequestform').submit( (e)=> {
                        e.preventDefault();
                        myDropzone.processQueue();
                    });
                    this.on('sending', function(file, xhr, formData) {
                        // Append all form inputs to the formData Dropzone will POST
                        var data = $('#newrequestform').serializeArray();
                        $.each(data, function(key, el) {
                            formData.append(el.name, el.value);
                        });
                    });
                }
            });


            $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
                currenteditingid = $(this).data('id');
                switch ($(this).data('target')) {
                    case '#addrequestthreaddialog':
                        break;
                    case '#editthreaddialog':
                        if ($(this).data('id') > -1) {
                            getThreadDetails($(this).data('id'));
                        }
                        break;
                    default:
                        currenteditingid = -1;
                        currentdeletingid = -1;
                        break;
                }


            });

        });


        function submitNewForm(form) {
            console.log(form)
            var data = new FormData(form);
            axios.post('{!! route('frontend.customgraphicsrequest.store')!!}',
                data
            ).then(function (response) {
                console.log(response);
                if (response.data.status == 0) {
                    location.reload();
                } else {
                    alert('something went wrong with the update');
                }
            })
                .catch(function (error) {
                    console.log(error);
                    alert('something went wrong with the update');
                })
                .finally(function () {
                    // always executed
                    wait(false)
                });

        }


        // populates a form with data returned from Laravel
        function populate(frm, data) {
            $.each(data, function (key, value) {
                var $ctrl = $('[name=' + key + ']', frm);

                if ($ctrl.is("select")) {
                    if (Array.isArray(value)) {
                        if (value.length > 0) {
                            value.forEach(function (val) {

                                $ctrl.val(val.id).trigger('change');

                            })
                        } else {
                            $ctrl.val(-1).trigger('change');
                        }

                    } else {
                        $ctrl.val(value).trigger('change');
                    }

                    //    console.log('select2 value is: ' + value[0].id);
                } else {
                    switch ($ctrl.attr("type")) {
                        case "text" :
                        case "hidden":
                            $ctrl.val(value);
                            break;
                        case "radio" :
                        case "checkbox":
                            $ctrl.each(function () {
                                if ($(this).attr('value') == value) {
                                    $(this).attr("checked", value);
                                }
                            });
                            break;

                        default:
                            $ctrl.val(value);
                    }

                }
            });
        }
    </script>
@endpush

@section('content')
    <button class="dashboard_nav_btn dashboard_nav_btn_board"
            onclick=" return window.location.href='{{URL::to('/')}}'">Back to<br>Dashboard<i
            class="fas fa-arrow-left"></i></button>
    {{--    Top row: user info, icons of lab groups--}}
    <div class="d-flex">


    </div>

    <div class="row" style="margin-top: 10px; min-height: 500px">
        <div class="col"
             style="margin-left:20px; background-color: whitesmoke; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px; margin-right: 5px">
            <div class="d-flex w-100 pb-1" style="border-bottom: 1px solid grey; ">
                <h4 class="flex-grow-1 bd-highlight g_et_al_header2">My custom requests </h4>

                <div>
                    <button class="btn btn-outline-primary" data-toggle="modal"
                            data-target="#addrequestdialog"
                    >New
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                             fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                            <path
                                d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                    </button>
                </div>


            </div>

            <div>
                @foreach($custom_graphics_requests as $i => $thread)
                    <div class="row w-100" style="border-bottom: 1px solid grey; ">
                        <div class="d-flex flex-row w-100">
                            <div class="notification-time">
                                <h5>{{date('h:m A'),strtotime($thread->created_at)}}</h5>
                                <h5>{{date('d-m-y'),strtotime($thread->created_at)}}</h5>
                            </div>
                            <div class="post_section">
                                <a href="{{route('frontend.customgraphicsrequest.view', $thread->id)}}">
                                    <div class="post_content">
                                        <h5 class="post_content_title">{!! $thread->name!!}
                                            <span class="p-2 g_et_al_paragraph2">

                                                                                <a href="noresurl#replies"> <i
                                                                                        class="far fa-comment text-primary"></i><span
                                                                                        class="text-muted"> {{$thread->notes->count()}}</span></a>
                                                                           </span>
                                            <br/>@foreach($thread->tags as $tag)
                                                #{{$tag->text}}
                                            @endforeach
                                        </h5>

                                        <p class="post_content_para"> {!! \Illuminate\Support\Str::highlightSearch(\App\Helpers\General\StringHelper::truncateWithoutTags($thread->body, 100), urldecode(request()->query('search'))) !!}</p>

                                    </div>
                                </a>
                            </div>


                        </div>

                    </div>

                @endforeach

            </div>
        </div>
    </div>





    {{--                </div>--}}
    {{--            </div>--}}


    {{--    </div>--}}
@endsection
@section('dialogs')
    <div id="addrequestdialog" class="modal fade" role="dialog">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">New custom graphics request</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {!! Form::open( ['class'=>'form-horizontal', 'id'=>'newrequestform'])!!}
                    @include('frontend.custom_graphics_request.form.new_custom_graphics_request', ['submitButtonText'=>'New request'])
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>


@endsection