@extends('layouts.admin')
@section('content-title')
	{{ __('Abonnement') }}
@endsection
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css" media="screen">
	/* Date Range Picker */
    .datepicker-calendar{
        height: auto;
    }
    .datepicker-calendar > .fa{
        font-size: inherit;
        margin: auto;
    }
</style>
@endsection
@section('content-breadcrumbs')

@endsection
@section('content')
<div class="card-box tilebox-one noradius">
	<section>
		<h2 class="page-header">Ajouter une abonnement a {{  $data->name }} </h2>

		{!!Form::open()->locale('abonnement')->post()->route('admin.abonnements.store')!!}
		<input type="hidden" name="userID" value="{!! $data->id !!}">
		<div class="row mb-3">
			<div class="col-sm-6">
				<div class="form-group">
					<label for="types">{{ __('Abonnement.Select types') }}</label>
					<select name="types_id" id="types" class="form-control">
					@foreach($types as $key => $type)
						<option value="{{ $type->id }}">{{ $type->name }}</option>
					@endforeach
					</select>
				</div>
			</div> 
		</div>

		<div class="row mb-3">
			<div class="col-sm-6">
				<div class="form-group">
					<label for="etat">{{ __('Abonnement.Select etat') }}</label>
					<select name="etat_id" id="etat" class="form-control">
						<option value="valide">Valide</option>
						<option value="suspendu">Suspendu</option>
					
					</select>
				</div>
			</div> 
		</div>


		<div class="row mb-3">
	        <div class="col-md-5">
	            {{-- {!!Form::text('abonnementDates', 'Abonnement Period', '')->attrs(['class' => 'form-control', 'style' => 'width:35%;'])->placeholder(__('abonnements.Enter period!'))!!} --}}
	            <label for="abonnementDate">{{ __('abonnements.Abonnement period!') }}</label>
	            <div class="form-group">
	                <div class="input-group">                  
	                    <input type="text" class="form-control" autocomplete="off" name="abonnementDates" placeholder="{{ __('abonnements.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>
		

		{!!Form::submit('Save')->id('my-btn')!!}
		{!!Form::close()!!}
	</section>
</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() {
    	var mdate;
	 	@if ($end)
	 		mdate = new Date('{{$end}}');
        @else
        	mdate = moment();
        @endif
    	console.log(moment());
        $('input[name="abonnementDates"]').daterangepicker({
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            // startDate: moment(),
            // endDate: moment().startOf('hour').add(24, 'hour'),
            timePicker: true,
            autoUpdateInput: false,
            // diff: abs( $end->date_end - date("Y-m-d")),
            minDate: mdate,
           

            locale: {
                cancelLabel: 'Clear',
                format: 'DD/MM/YYYY H:mm',
                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 H:mm'));
            $('#_To').val(end.format('YYYY-MM-DD H:mm'));
        });

        $('input[name="abonnementDates"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY H:mm') + ' - ' + picker.endDate.format('DD/MM/YYYY H:mm'));
        });
        
        //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
        $('#sectors').select2({
            placeholder : '{{ __("events.Please select sectors")}}',
            tags: true,
        });

    });  
</script>
@endsection