@extends('admin.layout.app')

@section('main_title', 'Events')
@section('title', 'Create Event')
@section('sub_title', 'Control Panel')

@push('styles')
<link href="{{ asset('public/assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('public/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('public/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
<style>
    body{
        min-height: fit-content !important;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div id="rootwizard">
                    <ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3" role="tablist">
                        <li class="nav-item" data-target-form="#accountForm" role="presentation">
                            <a href="#first" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2 active" aria-selected="true" role="tab">
                                <i class="mdi mdi-account-circle me-1"></i>
                                <span class="d-none d-sm-inline">Event Details</span>
                            </a>
                        </li>
                    </ul>
                    <form class="create_event" method="post" action="{{route('event.store')}}" >
                        @csrf
                        <div class="tab-content mb-0 b-0 pt-0">
                            <div class="tab-pane active" id="first" role="tabpanel">
                                    <div class="row">
                                        <div class="col-3">
                                            <label class=" col-form-label" for="userName3">Event Name</label>
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" id="event_name" name="event_name" required="">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <label class="col-form-label" for="password3">Event Category</label>
                                            <div class="col-md-12">
                                                <select class="form-control" name="event_category" id="event_category">
                                                    <option value="">Please Select Category</option>
                                                    @foreach($eventCategory as $category)
                                                        <option value="{{$category}}">{{$category}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                         <div class="col-3">
                                            <label class="col-form-label" for="confirm3">Event Date</label>
                                            <div class="col-md-12">
                                                <!--<input type="date" id="event_date" name="event_date" class="form-control" required="">-->
                                                <input type="text" id="event_date" name="event_date" class="form-control" placeholder="Date and Time">
                                            </div>
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->
                              
                                    <h5 class="mb-3 mt-4 bg-light p-2"><i class="mdi mdi-plus me-1"></i> Add Performers</h5>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="col-md-6 col-form-label" for="name3"> Select Performer</label>
                                            <div class="col-md-6">
                                                <select name="performers[]" id="performers" placeholder="Select Performer" class="form-control select2-multiple performer_dropdown" multiple="multiple" data-toggle="select2" data-width="100%">
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <h5 class="mb-3 mt-4 bg-light p-2"><i class="mdi mdi-plus me-1"></i> Add Venue</h5>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="col-md-3 col-form-label" for="email3">Select Venue</label>
                                            <div class="col-md-6">
                                                <select name="venue" id="venue" class="form-control select2" >
                                                    <option>Please Select Venue</option>
                                                    @if(!empty($venues))
                                                        @foreach($venues as $venue)
                                                         <option value="{{$venue->id}}">{{$venue->name}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="col-md-6">
                                                <div class="venue_category_section">
                                                    <div class="dynamic_content">
                                                    </div>  
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end row -->
                            </div>
                        </div> <!-- tab-content -->
                        </br>
                        <div class="row">
                            <div class="col-md-6">
                                <button class="btn btn-primary" type="submit">Submit</button>
                                <button class="btn btn-primary" type="reset">Reset</button>
                            </div>
                        </div>
                    </form>
                </div> <!-- end #rootwizard-->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
 <!-- Plugins js-->
        <script src="{{ asset('public/assets/libs/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js') }}"></script>

        <!-- Init js-->
        <script src="{{ asset('public/assets/js/pages/form-wizard.init.js') }}"></script>
        <script src="{{ asset('public/assets/libs/multiselect/js/jquery.multi-select.js') }}"></script>
        <script src="{{ asset('public/assets/libs/select2/js/select2.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
        <script src="{{ asset('public/assets/js/pages/form-pickers.init.js') }}"></script>
        <script>
    $(document).ready(function() {
        $('.select2-multiple').select2();
        $("#event_date").flatpickr({enableTime:!0,dateFormat:"Y-m-d H:i"});
    });
</script>
        <script>
        function getPerformer(){
            $(document).find(".performer_dropdown").select2({
                  dropdownParent: $(".create_event"),
                  ajax: {
                    url: "{{route('fetch.performer')}}",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    type: "post",
                    dataType: 'json',
                    data: function (params) {
                       return {
                          q: params.term, // search term
                        page: params.page || 1
                       };
                    },
                    processResults: function(data, params) {
                         params.page = params.page || 1;

                      return {
                            results: $.map(data.items, function (item) { return {id: item.id, text: item.name}}),
                            pagination: {
                              more: (params.page * 10) < data.total_count
                            }
                        };
                    }
                  }
            });
        }
        
        $(document).ready(function(){
            getPerformer();
        });
        
        $(document).on('change','#venue',function(){
           var id = $(this).val();
           $.ajax({
                url: '{{route("get.venue.category.section")}}',
                type: 'post',
                data: {'id':id,'method':'stubhub_event_venue_get','_token':"{{csrf_token()}}","source_id":1,"manual_event":1},
                success: function(response){
                    
                    $('.venue_category_section').find('.dynamic_content').html(response.html);
                    
                    
                    var parent = $('#standard-modal').find('.modal-body');
                    $.fn.editableform.buttons = '<button type="submit" class="btn btn-primary editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button><button type="button" class="btn btn-danger editable-cancel btn-sm waves-effect"><i class="mdi mdi-close"></i></button>',
                    
                    $.fn.editable.defaults.mode = 'inline';
                    $(parent).find(".inline-category").editable({
                        display:function(value) {
                             $(this).html('<i class="mdi mdi-adjust me-1"></i>'+value + ' (category)');
                         }
                    });
                    $(parent).find(".inline-section").editable({
                         display:function(value) {
                             $(this).html('<i class="mdi mdi-menu-right-outline me-1"></i>'+value + ' (section)');
                         }
                    });
                }
            });
        });
        
        $(document).on('change','#event_date',function(){
            var event_date = $(this).val();
            
            var event_date_array = event_date.split(" ");
            var date = event_date_array[0];
            var time = event_date_array[1];
            date = date.split("-");
            console.log(date);
            time = time.split(":");
            console.log(time);
            const date1 = new Date(Date.UTC(date[0], date[1], date[2], time[0], time[1], 00));
            

            console.log(date1.toISOString());
            // console.log(event_date.toString());''
            // Sun Jun 20 2021 16:36:21 GMT+0500 (Pakistan Standard Time)
            
            // Date in UTC time zone
            // console.log(event_date.toUTCString());
        });
 
        $(document).on('click','.add_category',function(){
                   
                var category_parent = $(this).closest('.dynamic_content').find('.category_details_div');
                   
                $(category_parent).show();
                   
                $(category_parent).find('#category-select').removeClass('editable-unsaved').addClass('inline-add-category editable-empty');
                //   $(category_parent).find('#category-select').text('');
                   
                $(category_parent).find('.inline-add-category').editable({
                    success: function(response, newValue) {
                        
                        var copy_ele = $(this).closest('.dynamic_content').find('.sample_div_cat_section').clone();
                        
                        $(copy_ele).addClass('event_venue_detail_html_edit').removeClass('sample_div_cat_section').show();
                        $(copy_ele).find('#inline-category').attr('data-pk',newValue);
                        $(copy_ele).find('#newly_add_category').attr('pos',newValue).attr('name','newly_add_category['+newValue+']');
                        $(copy_ele).find('#newly_add_category').val(newValue);
                        $(copy_ele).find('#newly_add_category').removeAttr('disabled');
                        var text=newValue;
                        $(copy_ele).find('#inline-category').html('<i class="mdi mdi-adjust me-1"></i>'+text+' (category)');
                        $('.category_details_div').before($(copy_ele));
                        tippy('[data-plugin="tippy"]');
                        $('.category_details_div').hide();
                        $('.category_details_div').find('#category-select').removeClass('inline-add-category');
                        tippy('[data-plugin="tippy"]');
                    }    
            });
        });
    
        $(document).on('submit','form',function(e){
            e.preventDefault();
            var me = $(this);
            $(".text-danger").remove();
            var fd=new FormData($(this)[0]);
            $.ajax({
                url: me.attr('action'),
                type: me.attr('method'),
                data: fd,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                dataType: 'json',
                contentType: false,
                processData: false,
                beforeSend: function() {
                // setting a timeout
                $('.submit').prop('disabled', true);
                },
                success: function(response){
                    if(response.success == true){
                        $('.submit').prop('disabled', false);
                        Swal.fire("Done",response.msg,"success");
                        me[0].reset();
                    }
                    if(response.success == false){
                        Swal.fire("Error",response.msg,"error");
                    }
                },
                error:function(response){
                    $('.submit').prop('disabled', false);
                    $.each(response.responseJSON.errors, function(key, value) {
                    var element = $('#' + key);
                    element.closest('div.form-group')
                    .removeClass('.has-error')
                    .addClass(value.length > 0 ? 'has-error':'has-success' )
                    .find('.text-danger')
                    .remove();
                    element.after('<p class="text text-danger">'+value+'</p>');
                    });
                }
            });
        })
        
       </script>
@endpush