@extends('layouts.admin')
@section('content-title')
	{{ __('events.New Event') }}
@endsection
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
<style>
    /* Date Range Picker */
    .datepicker-calendar{
        height: auto;
    }
    .datepicker-calendar > .fa{
        font-size: inherit;
        margin: auto;
    }
    /* Upload File */
    .custom-file-label{
        font-size: 1rem; 
        color: #747d86;
        font-weight: 400;
    }
    .custom-file-label::after {
        content: '{{__("events.Browse")}}';
    }
    /* Image Preview  */
    #img-upload{
        width: 150px;
        height: 150px;
    }
    /* Select2 Categories */
    .select2 {
        width: 100% !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #0f9df7;
        border-color:  #0f9df7;
        color: white;
        padding-bottom: 4px;
        font-weight: 700;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        color: white;
    }
    /* Save button */
    #my-btn {
        padding-top: 4px;
    }
</style>
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.event.create')}}
@endsection
@section('content')
<div class="card-box tilebox-one noradius">
    <div class="row mb-3">
        <div class="col-md-12">
            <h2 class="page-header">{{ __('events.New Event') }}</h2>
        </div>
    </div>   
    {!!Form::open()->locale('events')->post()->multipart()->route('admin.event.store')!!}
    <div class="row mb-3">
        <div class="col-md-10">
            {!!Form::text('title', 'Event Title')->placeholder(__('events.Event Title Placeholder...'))!!}
        </div>      
    </div> 
    <div class="row mb-3">
        <div class="col-md-5">
            <label for="event-image">{{ __('events.Event Image') }}</label>
            <div id="event-image" class="input-group">          
                {{-- <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroupFileAddon01">{{ __('events.Upload') }}</span>
                </div> --}}
                <div class="custom-file">
                    <span class="btn-file">
                        {!!Form::file('image')->attrs(['class' => 'custom-file-input', 'aria-describedby' => 'inputGroupFileAddon01'])->id("inputGroupFile01")!!}
                        <label class="custom-file-label" for="inputGroupFile01">{{ __('events.Edit file') }}</label>
                    </span>
                </div>
            </div>              
        </div>            
    </div>
    <div class="row mb-3">
        <div class="col-md-5 pl-3">
            <img id='img-upload'/>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-5">
            {{-- {!!Form::text('eventDates', 'Event Period', '')->attrs(['class' => 'form-control', 'style' => 'width:35%;'])->placeholder(__('events.Enter period!'))!!} --}}
            <label for="eventDate">{{ __('events.Event period!') }}</label>
            <div class="form-group">
                <div class="input-group">                  
                    <input type="text" class="form-control" name="eventDates" placeholder="{{ __('events.Enter period!') }}">
                    <div class="input-group-prepend">
                        <span class="input-group-text datepicker-calendar"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            {!!Form::hidden('_From')!!}
            {!!Form::hidden('_To')!!} 
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-12">
            {!!Form::textarea('description', 'Description')->attrs(['style' => 'height: 200px;'])!!}
        </div>
    </div>   
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="form-group">
                <label for="categories">{{ __('events.Select categories') }}</label>
                <select name="categories_id[]" id="categories" class="form-control" multiple="multiple">
                @foreach($categories as $key => $category)
                    <option value="{{ $category->id }}">{{ $category->libelle }}</option>
                @endforeach
                </select>
            </div>
        </div>            
    </div>
    <div class="row mb-3">
        <div class="col-md-4">
            {!!Form::submit('Save')->id('my-btn')!!}
        </div>
    </div>
    {!!Form::close()!!}
</div>
@endsection
@section('javascript')
{{-- Date Range Picker --}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
{{-- Select2 --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    $(function() {      
        $('input[name="eventDates"]').daterangepicker({
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            // startDate: moment().startOf('hour'),
            // endDate: moment().startOf('hour').add(24, 'hour'),
            autoUpdateInput: false,
            minDate: moment(),
            locale: {
                cancelLabel: 'Clear',
                format: 'DD/M/Y hh:mm A',
                daysOfWeek: [
                    '{{ __("daysOfWeek.Su")}}',
                    '{{ __("daysOfWeek.Mo")}}',
                    '{{ __("daysOfWeek.Tu")}}',
                    '{{ __("daysOfWeek.We")}}', 
                    '{{ __("daysOfWeek.Th")}}', 
                    '{{ __("daysOfWeek.Fr")}}',
                    '{{ __("daysOfWeek.Sa")}}'],
                monthNames: [
                    '{{ __("months.January")}}',
                    '{{ __("months.February")}}',
                    '{{ __("months.March")}}',
                    '{{ __("months.April")}}',
                    '{{ __("months.May")}}',
                    '{{ __("months.June")}}',
                    '{{ __("months.July")}}',
                    '{{ __("months.August")}}',
                    '{{ __("months.September")}}',
                    '{{ __("months.October")}}',
                    '{{ __("months.November")}}',
                    '{{ __("months.December")}}'],
            },
        }, function(start, end) {
            $('#_From').val(start.format('YYYY-MM-DD hh:mm'));
            $('#_To').val(end.format('YYYY-MM-DD hh:mm'));
        });

        $('input[name="eventDates"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/M/Y hh:mm A') + ' - ' + picker.endDate.format('DD/M/Y hh:mm A'));
        });
        
        //Upload File JS
        $(document).on('change', '.btn-file :file', function() {
		var input = $(this),
			label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
		    input.trigger('fileselect', [label]);
		});

		function readURL(input) {
		    if (input.files && input.files[0]) {
		        var reader = new FileReader();
		        
		        reader.onload = function (e) {
		            $('#img-upload').attr('src', e.target.result);
		        }
		        
		        reader.readAsDataURL(input.files[0]);
		    }
		}

		$("#inputGroupFile01").change(function(){
		    readURL(this);
		});
        // 

        // Select2
        $('#categories').select2({
            placeholder : '{{ __("events.Please select category")}}',
            tags: true,
        });

    });  
</script>
@endsection