@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('artist.artist') }}</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('artist.artists') }}</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('artist.artist') }} </li>
                        </ol>
                    </nav>
                </div>
                
                <div class="ms-auto">
                    <div class="btn-group">
                        <a href="{{ route("admin.artists.index") }}" class="btn btn-primary"> {{ trans('artist.artist') }} {{ trans('global.list') }}</a>
                    </div>
                </div>
                <hr/>
            </div>
            <!--end breadcrumb-->
            
                    @include('layouts/notification')
                    <form action="{{ route("admin.artists.store") }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">

                                <h3>{{trans('artist.detail')}}</h3>
                                <hr/>
                                <div class="row">
                                    
                                    <div class="col-12">
                                        <div class="form-group {{ $errors->has('artist_title') ? 'has-error' : '' }}">
                                            <label for="artist_title">{{trans('new.title')}}<small class="text-danger">*</small></label>
                                            <input type="text" id="artist_title" name="artist_title" class="form-control" value="{{ old('artist_title', isset($artist) ? $artist->artist_title : '') }}" >
                                            @if($errors->has('artist_title'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('artist_title') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group {{ $errors->has('slug') ? 'has-error' : '' }}">
                                            <label for="slug">{{trans('new.slug')}}<small class="text-danger">*</small></label>
                                            <input type="text" id="slug" name="slug" class="form-control" value="{{ old('slug', isset($artist) ? $artist->slug : '') }}" >
                                            @if($errors->has('slug'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('slug') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group {{ $errors->has('artist_desc') ? 'has-error' : '' }}">
                                            <label for="artist_desc">{{trans('new.desc')}}<small class="text-danger">*</small></label>
                                            <textarea type="artist_desc" id="artist_desc" name="artist_desc" class="form-contro textarea_editor"  >{{ old('artist_desc', isset($event) ? $event->artist_desc : '') }}</textarea>
                                            @if($errors->has('artist_desc'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('artist_desc') }}
                                                </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="{{ route('admin.artists.index') }}">{{ trans('global.back_to_list') }}</a>
                                    
                                </div>
                            </div>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
    
@endsection
@section("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(){

        $('#artist_title').on('blur',function(){
            var opp_name = $(this).val();
            var slug = opp_name.replace(/\s+/g, '-');
            if($('#slug').val().length == 0){
                $('#slug').val(slug.toLowerCase());
            }
        });

        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