@extends('layouts.admin')
@section("style")
    <link href="{{ asset('assets/plugins/select2/css/select2.min.css')}}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/select2/css/select2-bootstrap4.css')}}" rel="stylesheet" />
    <link rel="stylesheet" href="{{URL::asset('assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.min.css')}}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('event.events') }}</title>
@endsection

@section('content')

    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">{{ trans('event.events') }}</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ trans('global.create') }} {{ trans('event.event') }} </li>
                        </ol>
                    </nav>
                </div>
                
                <div class="ms-auto">
                    <div class="btn-group">
                        <a href="{{ route("admin.events.index") }}" class="btn btn-primary"> {{ trans('event.event') }} {{ trans('global.list') }}</a>
                        
                    </div>
                </div>
                
            </div>
            <!--end breadcrumb-->
            <hr/>
            
                    @include('layouts/notification')
                    <form action="{{ route("admin.events.store") }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">

                                <h3>{{trans('event.detail')}}</h3>
                                <hr/>
                                <div class="row">
                                    
                                    <div class="col-12">
                                        <div class="form-group {{ $errors->has('event_title') ? 'has-error' : '' }}">
                                            <label for="event_title">{{trans('new.title')}}<small class="text-danger">*</small></label>
                                            <input type="text" id="event_title" name="event_title" class="form-control" value="{{ old('event_title', isset($event) ? $event->event_title : '') }}" >
                                            @if($errors->has('event_title'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('event_title') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group {{ $errors->has('start_date') ? 'has-error' : '' }}">
                                            <label for="start_date">{{trans('new.start_date')}}<small class="text-danger">*</small></label>
                                            <input type="text" id="start_date" name="start_date" class="form-control " value="{{ old('start_date', isset($event) ? $event->start_date : '') }}" >
                                            @if($errors->has('start_date'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('start_date') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group {{ $errors->has('start_time') ? 'has-error' : '' }}">
                                            <label for="start_time">{{trans('new.start_time')}}<small class="text-danger">*</small></label>
                                            <input type="text" id="start_time" name="start_time" class="form-control " value="{{ old('start_time', isset($event) ? $event->start_time : '') }}" >
                                            @if($errors->has('start_time'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('start_time') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group {{ $errors->has('end_time') ? 'has-error' : '' }}">
                                            <label for="end_time">{{trans('new.end_time')}}<small class="text-danger">*</small></label>
                                            <input type="text" id="end_time" name="end_time" class="form-control " value="{{ old('end_time', isset($event) ? $event->end_time : '') }}" >
                                            @if($errors->has('end_time'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('end_time') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group {{ $errors->has('event_hours') ? 'has-error' : '' }}">
                                            <label for="event_hours">{{trans('event.no_of_hours')}}<small class="text-danger">*</small></label>
                                            <input type="number" min="" id="event_hours" name="event_hours" class="form-control " value="{{ old('event_hours', isset($event) ? $event->event_hours : '') }}" >
                                            @if($errors->has('event_hours'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('event_hours') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    
                                </div>
                                <div>
                                    <button class="btn btn-primary" type="submit" >{{ trans('global.next') }}</button>
                                    <a class="btn btn-secondary waves-effect waves-ripple mr-3" href="{{ url()->previous() }}">{{ trans('global.back_to_list') }}</a>
                                    
                                </div>
                            </div>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
    
@endsection
@section("script")
<script src="{{ asset('assets/plugins/select2/js/select2.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/bootstrap-material-datetimepicker/js/moment.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.min.js')}}"></script>
<script>

    function get_time_diff(){
        var start_time = $('#start_time').val();
        var end_time = $('#end_time').val();
        var start_date = $('#start_date').val();
        if(start_time && end_time){
            dt1 = new Date(start_date+' '+start_time);
            dt2 = new Date(start_date+' '+end_time);
            
            var diff =(dt2.getTime() - dt1.getTime()) / 1000;
              diff /= (60 * 60);
              $('#event_hours').val(Math.abs(Math.round(diff)));
              
        }
        //alert(+' - '+);
    }
    $(document).ready(function(){
        var dateNow = new Date();
        $('#start_date').bootstrapMaterialDatePicker({
            time: false,
            format: 'YYYY-MM-DD',
            minDate: moment(),
            //currentDate:dateNow
        }).on('change',function(e, date){
            var dd = new Date('YYYY-MM-DD',date);
            var first_date = moment(date).format('DD-MM-YYYY');
            //alert(first_date);
            //$('#start_time').bootstrapMaterialDatePicker('setMinDate', '2022-03-10 01:00:00');
            //$('#end_time').bootstrapMaterialDatePicker('setMinDate', '2022-03-10 01:00:00');
            //$('#start_time').bootstrapMaterialDatePicker('setMaxDate', date);
            //$('#end_time').bootstrapMaterialDatePicker('setMaxDate', date);
            
        });
        
        $('#start_time').bootstrapMaterialDatePicker({
            time: true,
            date: false,
            format: 'HH:mm',
            
            //currentDate:dateNow
        }).on('change',function(e, date){
            
            $('#end_time').bootstrapMaterialDatePicker('setMinDate', date);
            get_time_diff();
        });

        $('#end_time').bootstrapMaterialDatePicker({
            time: true,
             date: false,
            format: 'HH:mm',
            
            //currentDate:dateNow
        }).on('change',function(e, date){
            
            $('#start_time').bootstrapMaterialDatePicker('setMaxDate', date);
            get_time_diff();
        });
        
        
        
        
        
        
    });
    
</script>
@endsection