@extends('layouts.app')

@section('page_css')
    @parent

@endsection

@section('theme_css')
@endsection
<!-- START @PAGE CONTENT -->

@section('content')

    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 lg:col-span-9">
            <div class="intro-y box">
                <div class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5">
                    <h2 class="font-medium text-base mr-auto ml-6">Update Event</h2>
                </div>
                <form  id="events_form" action="{!! tokenize_url(route('admin.master.events.update'),['id' => @$events[0]['id']]) !!}" method="post" enctype="multipart/form-data">
                 @csrf
                    <div class="grid grid-cols-12 gap-4 gap-y-5 mt-5 px-5">
                        <div class="col-span-12"> 
                            <label for="events_name" class="form-label">Event Name
                                <span id="events_name_error" class="asterisk">*@error('events_name')please provide event name @enderror</span>
                            </label> 
                            <input id="events_name" name="events_name" type="text" class="form-control" placeholder="Event Name" value="{{$events[0]['name']}}"> 
                        </div>
                        <div class="col-span-12"> 
                            <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 data-placeholder="Select type of event" id="events_event_type" name="events_event_type" class="tom-select w-full">
                                <option value= "{{$events[0]['event_type_id']}}" >{{ $events[0]['event_type'] }}</option>
                                @foreach($event_type as $_event_type)
                                    <option value= "{{$_event_type['id']}}" >{{ $_event_type['title'] }}</option>
                                @endforeach
                            </select> 
                        </div>
                        <div class="col-span-12">
                            @php
                                $date_from=$events[0]['date_from'];
                                $date_to=$events[0]['date_to'];
                                $event_date_range=date("d/m/Y", strtotime($date_from))." - ".date("d/m/Y", strtotime($date_to));
                            @endphp
                            <div class="control-group">
                                <label for="events_date_range" class="form-label">Event Date Range
                                    <span id="events_date_range_error" class="asterisk">*@error('events_date_range')please provide date range @enderror</span>
                                </label>
                                <input data-daterange="true" id="events_date_range" name="events_date_range" class="datepicker form-control w-64 block" value="{{$event_date_range}}">
                            </div>
                        </div>
                        <div class="col-span-12">
                            <div class="form-check">
                                <label class="form-label">profile pic<span id="events_profile_pic_error" class="asterisk">@error('events_profile_pic') please provide valid image @enderror</span></label>
                            </div>
                            <div class="control-group mt-2">
                                <input id="events_profile_pic" name="events_profile_pic" type="file"/>
                                 <a id="events_profile_pic_view" href="javascript:;" data-toggle="modal" data-target="#event_profile_pic_modal" class="btn btn-outline-primary inline-block mb-2 w-24" event_pic_name="{{ $events[0]['profile_pic'] }}" style="margin-right: 10rem;">View Pic</a>
                            </div>

                        </div>
                        <div class="col-span-12"> 
                            <label for="events_description" class="form-label">Description
                            </label> 
                            <textarea id="events_description" name="events_description" rows="3" cols="50" class="form-control">{{ $events[0]['description'] }}</textarea>
                        </div>
                        <div class="col-span-12"> 
                            <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">{{ $events[0]['url'] }}</textarea>
                        </div>

                        <div class="intro-y col-span-12 flex items-center mt-5 mb-10 margin-center">
                            <a href="{!! route('admin.master.events') !!}" class="btn btn-primary w-44 ml-2">Cancel</a>
                            <button type="submit" id="events_form_submit"  class="btn btn-primary w-44 ml-2">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- profile pic models start -->
    <div id="event_profile_pic_modal" class="modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="font-medium text-base mr-auto">Event Pic</h2>
                </div> <!-- END: Modal Header -->
                <div class="modal-body grid grid-cols-12 gap-4 gap-y-3">
                    <div class="col-span-12 sm:col-span-12 px-5 mx-auto"> 
                        <img id="event_profile_pic_img" src="" style="height:16rem;object-fit: contain;"/>
                    </div>
                </div>
                <!-- BEGIN: Modal Footer -->
                <div class="modal-footer text-right"> 
                    <button type="button" data-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1">Close</button> 
                </div> <!-- END: Modal Footer -->
            </div>
        </div>
    </div>                                     
    <!--profile pic models end -->
      
@endsection


@section('plugin_scripts')

@endsection

@section('page_scripts')
    @parent
 <script>
 
    $(document).ready(function(){
        function event_name_validation()
        {
            var events_name_db=@JSON($events[0]['name']);
            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_db)
                        {
                            continue;
                        }

                        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");   
            }

            var isDuplicate=event_name_validation();
            if(isDuplicate=="Y")
            {
                e.preventDefault();
            }
        });  

        $('#events_profile_pic_view').click(function(){
            var pic_name=$('#events_profile_pic_view').attr("event_pic_name");
            var full_path="{{asset('uploads/events_profile_pic')}}"+"/"+pic_name;
            $('#event_profile_pic_img').attr('src',full_path);
        });           
    });
</script>
    
@endsection
<!--/ END PAGE CONTENT -->