@extends('layouts.admin_layout')
@section('content')
<div class="container-fluid">
    <div class="row column_title">
        <div class="col-md-12">
            <div class="page_title">
                <h2>Manage Events</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="white_shd full margin_bottom_30">
                <div class="full graph_head">
                    <div class="heading1 margin_0">
                        <h2>Create New Event</h2>
                    </div>
                </div>
                <div class="padding_infor_info">
                    <form action="{{url('admin/manage-events')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Category Name</label>
                                    <select name="event_category_id" class="form-control" required
                                        id="event_category_id">
                                        <option value="">--select category--</option>
                                        @foreach($events_categories as $category)
                                        <option value="{{$category->id}}">{{$category->category_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Location Name</label>
                                    <select name="event_location_id" class="form-control" required
                                        id="event_location_id">
                                        <option value="">--select location--</option>
                                        @foreach($locations as $location)

                                        <option value="{{$location->id}}">{{$location->location_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input class="form-control" type="text" placeholder="Title" name="title" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Desktop Banner Image <span class="text-danger">[1440 * 350]</span></label>
                                    <input class="form-control" type="file" placeholder="Desktop Image"
                                        name="desktop_banner" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Mobile Banner Image <span class="text-danger">[390 * 486]</span></label>
                                    <input class="form-control" type="file" placeholder="Mobile Image"
                                        name="mobile_banner" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Location Name on Banner</label>
                                    <input class="form-control" type="text" placeholder="Location Name"
                                        name="location_name" required>
                                </div>
                            </div>


                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Start Date and Time</label>
                                    <input class="form-control" type="datetime-local" placeholder="Date and Time"
                                        name="start_date_time">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>End Date and Time</label>
                                    <input class="form-control" type="datetime-local" placeholder="Date and Time"
                                        name="end_date_time" onchange="getEventEndDate(this.value);">
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Banner Title</label>
                                    <input class="form-control" type="" placeholder="Banner Title"
                                        name="details_on_banner">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Register Button Enable/Disable</label>
                                    <div class="custom-control custom-radio mb-3">
                                        <input type="radio" id="customRadio8" class="custom-control-input" value="1"
                                            name="register_button" required>
                                        <label class="custom-control-label" for="customRadio8">Enable</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-5">
                                        <input type="radio" id="customRadio9" class="custom-control-input" value="0"
                                            name="register_button" required checked="">
                                        <label class="custom-control-label" for="customRadio9">Disable</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control ckEditor" placeholder="Description"
                                name="description"></textarea>
                        </div>
                        <div class="row ">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Description Image <span class="text-danger">[1440 * 350]</span></label>
                                    <input class="form-control" type="file" placeholder="Description Image"
                                        name="desc_img" >
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Mobile Description Image <span class="text-danger">[390 * 486]</span></label>
                                    <input class="form-control" type="file" placeholder="Mobile Description Image"
                                        name="mobile_desc_img" >
                                </div>
                            </div>
                        </div>
                        <div id="SpeakerDetails">
                            <div class="row mt-5">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Speakers salutation</label>
                                        <select name="salutation[]" class="form-control" id="salutation">
                                            <option value="">--choose select--</option>
                                            <option value="Dr.">Dr.</option>
                                            <option value="Mr.">Mr.</option>
                                            <option value="Ms.">Ms.</option>
                                            <option value="Shri.">Shri.</option>
                                            <option value="Smt.">Smt.</option>
                                            <option value="Prof.">Prof.</option>
                                            <option value="Lt.Gen.">Lt.Gen.</option>
                                            <option value="Gen.">Gen.</option>
                                            <option value="Col.">Col.</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Speakers Name</label>
                                        <input name="speaker_name[]" type="text" class="form-control"
                                            placeholder="Name" />

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>designation</label>
                                        <input name="speaker_designation[]" type="text" class="form-control"
                                            placeholder="designation" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Profile</label>
                                        <input name="image[]" type="file" class="form-control" placeholder="Image" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Profile</label>
                                        <input name="linkedin_profile[]" type="text" class="form-control"
                                            placeholder="LinkedIN Profile" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>speaker short description</label>
                                        <textarea name="speaker_description[]" type="text" class="form-control"
                                            placeholder="description"></textarea>
                                    </div>
                                </div>
                            </div>
                            <span class="btn bg-success text-white fs-18 mb-4" id="addSpeaker"
                                style="float:right;">Add</span>
                        </div>


                        <div id="AgendaDetails" class="mt-5">
                            <p><strong><b>Add Agenda</b></strong></p>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Date</label>
                                        <input name="date[]" id="eventDates" type="date" class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Start time</label>
                                        <input name="agenda_time[]" type="time" class="form-control"
                                            placeholder="times" />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>End time</label>
                                        <input name="end_time[]" type="time" class="form-control"
                                            placeholder="end time" />
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>activity</label>
                                        <input name="agenda_activity[]" type="text" class="form-control"
                                            placeholder="activity" />
                                    </div>
                                </div>
                            </div>
                            <span class="btn bg-success text-white fs-18 mb-4" id="addAgenda"
                                style="float:right;">Add</span>
                        </div>
                        <!-- <div class="form-group mt-5">
                    <label>Sorting</label>
                    <input class="form-control" type="number" placeholder="Number"  name="sorting" >
                </div> -->
                        <div class="form-group mt-5">
                            <label>Event Venue Details</label>
                            <textarea class="form-control" name="venue_details"
                                placeholder="Event Venue Details"></textarea>
                        </div>

                        <div class="form-group mt-5">
                            <label>Registration Link</label>
                            <input type="text" class="form-control" name="registration_link"
                                placeholder="Event Register Link" />
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mt-5">
                                    <label>Register form required <sup><span class="text-danger">
                                                *</span></sup></label>
                                    <input type="checkbox" value="1" name="register_form_status">
                                </div>
                            </div>
                            <div class="col-md-6 " id="report_file" style="display:none">
                                <label>Report file</label>
                                <input type="file" class="form-control" name="pdf_file" placeholder="PDF File" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Status</label>
                                    <div class="custom-control custom-radio mb-3">
                                        <input type="radio" id="customRadio1" class="custom-control-input" value="1"
                                            name="status">
                                        <label class="custom-control-label" for="customRadio1">Active</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-5">
                                        <input type="radio" id="customRadio2" class="custom-control-input" value="0"
                                            name="status" checked="">
                                        <label class="custom-control-label" for="customRadio2">In-Active</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Gallery Images [ multiple images can upload ]</label>
                                <input type="file" class="form-control" name="gallery_image[]" placeholder="Image File"
                                    multiple="true" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Publish Status</label>
                            <div class="custom-control custom-radio mb-3">
                                <input type="radio" id="customRadio3" class="custom-control-input" value="1"
                                    name="publish_status" checked="">
                                <label class="custom-control-label" for="customRadio3">Publish</label>
                            </div>
                            <div class="custom-control custom-radio mb-3">
                                <input type="radio" id="customRadio4" class="custom-control-input" value="0"
                                    name="publish_status">
                                <label class="custom-control-label" for="customRadio4">Not Publish</label>
                            </div>

                            <!-- <div class="custom-control custom-radio mb-3">
                        <input type="radio" id="customRadio5"  class="custom-control-input" value="2" name="publish_status" >
                        <label class="custom-control-label" for="customRadio5">Past</label>
                    </div> -->
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <a href="{{ url('admin/manage-events')}}" class="btn btn-danger">Cancel</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    var i = 0;
    $("#addSpeaker").click(function() {
        ++i;
        if (i == 1) {
            var pxl = '-10px';
        } else {
            var pxl = '0px';
        }
        $("#SpeakerDetails").append(
            `<div class="removeSpeakers">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group" style="margin-left:` + pxl + `;">
                            <label>Speakers salutation</label>
                            <select name="salutation[]" class="form-control" id="salutation">
                                <option value="">--choose select--</option>
                                 <option value="Dr." >Dr.</option>
                                <option value="Mr." >Mr.</option>
                                <option value="Ms." >Ms.</option>
                                <option value="Shri." >Shri.</option>
                                <option value="Smt." >Smt.</option>
                                <option value="Prof." >Prof.</option>
                                <option value="Lt.Gen." >Lt.Gen.</option>
                                <option value="Gen." >Gen.</option>
                                <option value="Col." >Col.</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Speakers Name</label>
                            <input name="speaker_name[]" type="text" class="form-control" placeholder="Name"/>
                            
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>designation</label>
                            <input name="speaker_designation[]" type="text" class="form-control" placeholder="designation"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Profile</label>
                            <input name="image[]" type="file" class="form-control" placeholder="Image" />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Profile</label>
                            <input name="linkedin_profile[]" type="text" class="form-control" placeholder="LinkedIN Profile"/>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>speaker short description</label>
                            <textarea name="speaker_description[]" type="text" class="form-control" placeholder="description"></textarea>
                        </div>
                    </div>
                </div>
                <div class="text-end mb-5 ">
                     <span class="btn bg-danger text-white fs-18 remove-input float-right" >- Remove</span>
                </div>
            </div>
            `
        );
    });

});
$(document).on('click', '.remove-input', function() {
    $(this).parents('.removeSpeakers').remove();
});
</script>

<script>
$(document).ready(function() {
    var i = 0;
    $("#addAgenda").click(function() {
        ++i;
        if (i == 1) {
            var pxl = '-10px';
        } else {
            var pxl = '0px';
        }
        $("#AgendaDetails").append(
            `<div class="removeAgenda mt-5">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group" style="margin-left:` + pxl + `;">
                            <label>Date</label>
                            <input name="date[]" id="eventDates" type="date" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Start time</label>
                            <input name="agenda_time[]" type="time" class="form-control" placeholder="times"/>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>End time</label>
                            <input name="end_time[]" type="time" class="form-control" placeholder="end time"/>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>activity</label>
                            <input name="agenda_activity[]" type="text" class="form-control" placeholder="activity"/>
                        </div>
                    </div>
                </div>
                <div class="text-end mb-5 ">
                     <span class="btn bg-danger text-white fs-18 remove-agenda-input float-right" >- Remove</span>
                </div>
            </div>
            `
        );
    });

});
$(document).on('click', '.remove-agenda-input', function() {
    $(this).parents('.removeAgenda').remove();
});
</script>
<!-- check Event Date -->
<script>
function getEventEndDate(value) {
    var today = new Date();
    var endDate = new Date(value);
    if (today < endDate) {
        $('#report_file').hide();
    } else {
        $('#report_file').show();
    }
}
</script>
@endsection