@extends('layouts.app')

@section('page_css')
    @parent
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/pickr/pickr-themes.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/dropzone/dropzone.css') }}" />
    <style>
        .asterisk
        {
            color:red;
        }
    </style>
@endsection

@section('content')
     <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- breadcrumb start -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="#">Master</a>
                </li>
                <li class="breadcrumb-item active">Events</li>
                <li class="breadcrumb-item active">Add</li>
            </ol>
        </nav>
        <!-- breadcrumb end -->
        <!-- Sticky Actions -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div
                      class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row"
                    >
                      <h5 class="card-title mb-sm-0 me-2">Add New Event</h5>
                      <div class="action-btns">
                        <a href="{!! route('admin.master.events') !!}" class="btn btn-sm btn-label-primary me-3">
                            <span class="align-middle">
                                Back to Listing
                            </span>
                        </a>
                        <button type="submit" id="events_form_submit" form="events_form" class="btn btn-sm btn-primary">   
                            Save
                        </button>
                      </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-8 mx-auto">      
                                <form id="events_form" action={{ route('admin.master.events.store') }} method="post" enctype="multipart/form-data">
                                 @csrf
                                    <div class="mb-3">
                                        <label class="form-label" for="events_name">Event Name</label>
                                        <span id="events_name_error" class="asterisk">
                                            *@error('events_name')please provide title @enderror
                                        </span>
                                        <div class="input-group input-group-merge">
                                            <span id="events_name2" class="input-group-text"
                                              ><i class="ti ti-user"></i
                                            ></span>
                                            <input
                                              type="text"
                                              class="form-control"
                                              id="events_name"
                                              name="events_name"
                                              placeholder="Event Name"
                                              aria-label="Event Name"
                                              aria-describedby="events_name2"
                                            />
                                        </div>
                                    </div>    
                                    <div class="col-md-12 mb-3">
                                        <label for="events_event_type" class="form-label">Event Type
                                            <span id="event_type_error" class="asterisk">*@error('events_event_type')please provide event type @enderror</span>
                                        </label>
                                        <select id="events_event_type" name="events_event_type" class="select2 form-select form-select-lg" data-allow-clear="true">
                                            @foreach($event_type as $_event_type)
                                                <option value= "{{$_event_type['id']}}" >{{ $_event_type['title'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>   
                                    <div class="mb-3">
                                        <label for="events_date_range" class="form-label">Event Date Range</label>
                                         <span id="events_date_range_error" class="asterisk">*@error('events_date_range')please provide date range @enderror</span>
                                        <input type="text" id="events_date_range" name="events_date_range" class="form-control date_range" />
                                    </div>   
                                    <div class="mb-3">
                                        <label class="form-label">Image
                                            <span id="events_profile_pic_error" class="asterisk">@error('events_profile_pic') please provide valid image @enderror</span>
                                        </label>
                                        <div class="input-group input-group-merge">
                                            <input id="events_profile_pic" name="events_profile_pic" type="file" class="form-control" />
                                        </div>
                                    </div> 
                                    <div class="mb-3">
                                        <label for="events_description" class="form-label">
                                            Description
                                        </label> 
                                        <textarea id="events_description" name="events_description" rows="3" cols="50" class="form-control"></textarea>
                                    </div>   
                                    <div class="mb-3">
                                        <label for="events_url" class="form-label">url
                                            <span id="events_url_error" class="asterisk">@error('events_url') *please provide valid url @enderror</span>
                                        </label> 
                                        <textarea id="events_url" name="events_url" rows="3" cols="50" class="form-control"></textarea>
                                    </div> 
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Sticky Actions -->
    </div>
    <!-- / Content -->  
@endsection

@section('page_scripts')
@parent
<script src="{{ asset('assets/js/form-layouts.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/pickr/pickr.js') }}"></script>
<script>
    $(document).ready(function(){
        $(".date_range").daterangepicker();
        function event_name_validation()
        {
            var events_name=$('#events_name').val();
            var isDuplicate="N";
            $.ajax({
                type: "post",
                url:"{{route('admin.master.events.get_events_validation')}}",
                data: {"_token": "{{ csrf_token() }}"},
                async: false,
                success:function(events)
                {
                    for(var _events of events)
                    {
                        if(_events.name==events_name)
                        {
                            $("#events_name_error").text("* event name already exist");
                            isDuplicate='Y';
                            break;
                        }   
                    }
                }
            }).done(function(){
            });
            return isDuplicate;
        }

        $("#events_form_submit").click(function(e){
            if($("#events_name").val()=="")
            {
                e.preventDefault();
                $("#events_name_error").text("* please provide event name");   
            }
            if($("#events_date_range").val()=="")
            {
                e.preventDefault();
                $("#events_date_range_error").text("* please provide date range");   
            }


            // if($("#events_profile_pic").val()=="")
            // {
            //     e.preventDefault();
            //     $("#events_profile_pic_error").text("* please provide valid image");
            // }
            
            var isDuplicate=event_name_validation();
            if(isDuplicate=="Y")
            {
                e.preventDefault();
            }
        });            
    });
</script>
 
@endsection
<!--/ END PAGE CONTENT -->