@extends('layout.structure')
@section('title-tab')
    Crea nuovo avviso
@endsection
@section('title-page')
    Crea nuovo avviso
@endsection
@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{route('announcement.store')}}" method="post">
                @csrf
                <div class="form-group">
                    <label for="title">Titolo</label>
                    <input type="text" class="form-control" name="title" value="{{old('title')}}">
                    @error('title')
                    <div class="alert alert-danger p-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="message">Messaggio</label>
                    <textarea class="form-control" name="message" >{{old('message')}}</textarea>
                    @error('message')
                    <div class="alert alert-danger p-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-6 p-1">
                                <div class="card-title bg-primary text-white p-1">Lista ECP</div>
                                <select multiple="multiple" id="ecps" name="ecps[]"  class="form-control" size="8">
                                    @foreach($ecps as $key=>$ecp)
                                        @if($ecp->users)
                                            <option  value="{{$ecp->id}}">
                                                {{$ecp->code}}
                                                @foreach($ecp->users as $rel)
                                                    ({{ $rel->user['firstname'] }} {{ $rel->user['lastname'] }})
                                                @endforeach
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                                <button type="button" id="ecps_rightAll" class="btn btn-info btn-block p-0" ><i class="fa fa-forward" aria-hidden="true"></i></button>
                            </div>
                            <div class="col-6 p-1">
                                <div class="card-title bg-warning text-white p-1">ECP selezionatI </div>
                                <select name="to[]" id="ecps_to" class="form-control" multiple="multiple" size="8"></select>
                                <button type="button" id="ecps_leftAll" class="btn btn-info btn-block p-0" ><i class="fa fa-backward" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                    @error('to')
                    <div class="alert alert-danger p-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12">
                    Allegati
                    <div id="container-attachments">

                    </div>
                    <div id="uploadAttachment" class="dropzone">

                    </div>
                </div>
                <div class="form-group mt-5">
                    <button class="btn btn-success btn-block text-center">INVIA MESSAGGIO</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('head')
    @parent
    <link rel="stylesheet" type="text/css" href="{{url('css/dropzone.css')}}"/>
@endsection
@section('footer')
    @parent
    <script src="{{url('js/multiselect-master/dist/js/multiselect.js')}}"></script>
    <script src="{{url('js/dropzone.js')}}"></script>
    <script>
        function ecpsMultiselect() {
            $('#ecps').multiselect({
                search: {
                    left: '<input type="text" name="q" class="form-control" placeholder="Cerca ECP" autocomplete="off"/>',
                    right: '<input type="text" name="q" class="form-control" placeholder="Cerca ECP selezionati" autocomplete="off"  />',
                },
                fireSearch: function(value) {
                    return value.length > 3;
                }
            });
        }

        $("#uploadAttachment").dropzone({
            url: "{{route('announcement.upload.attachment')}}",
            dictDefaultMessage :'Trascina qui un file da allegare',
            sending:function(file, xhr, formData){
                formData.append("_token", window.Laravel.csrfToken);
            },
            success:function(file,file_upload){
                $('#container-attachments').append('<input type="hidden" name="attachments[]" value="'+file_upload+'">');
            }
        });

        $(function(){
            ecpsMultiselect();


        });
    </script>
@endsection