@extends('layouts.app')

@section('page_css')
    @parent
    <style>
        .tabulator .tabulator-tableHolder{
            overflow: unset !important;
        }        
        td:first-child, th:first-child  {
            position:sticky;
            left:0;
            z-index:1;
            background-color: white;

        }
        td:last-child, th:last-child {
            position:sticky;
            right:0;
            z-index:1;
            background-color: white;
        }
        thead tr th {
            position:sticky;
            top:0;
        }
    </style>
@endsection

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

@section('content')

    <h2 class="intro-y text-lg font-medium mt-10">Event</h2>
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
            <div class="hidden md:block mx-auto text-gray-600"></div>
        </div>
    </div>
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
            <a class="btn btn-primary shadow-md mr-2" href="{!! route('admin.master.events.add') !!}">Add New</a>
            <div class="hidden md:block mx-auto text-gray-600"></div>
            {!! Form::open(['url' => route('admin.master.startup_launch'), 'method' => 'get', 'class' => 'table-form']) !!}
            @if(request('status'))
                <input type="hidden" name="status" value="{{ request('status') }}">
            @endif
                {{--<div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
                    <div class="w-56 relative text-gray-700 dark:text-gray-300">
                        <input type="search" name="search_text" class="form-control w-56 box pr-10 placeholder-theme-13" placeholder="Search..." value="{{ request('search_text') }}">
                        <i class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0" data-feather="search"></i>
                    </div>
                </div>--}}
            {!! Form::close() !!}
        </div>       
    </div>

    <div class="intro-y box mt-5" style="overflow-y: auto;">
        <table class="table"> 
            <thead> 
                <tr> 
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Event name</th>
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Event Type</th>
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Event From</th>
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Event To</th>
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Description</th>
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Url</th>
                    <th class="border-b-2 dark:border-dark-5 whitespace-nowrap">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($events as $_events)
                <tr >
                    <td class="border-b whitespace-nowrap">{{ $_events["name"] }}</td>
                    <td class="border-b whitespace-nowrap">{{ $_events["event_type"] }}</td>
                    <td class="border-b whitespace-nowrap">{{ date("d/m/Y", strtotime($_events["date_from"])) }}</td>
                    <td class="border-b whitespace-nowrap">{{ date("d/m/Y", strtotime($_events["date_to"])) }}</td>
                    <!-- <td class="border-b ">{{ $_events["description"]=="" ?'--':$_events["description"] }}</td> -->

                    <!--start-->
                    <td class="border-b whitespace-nowrap">
                        @if($_events["description"]!='' && strlen($_events["description"]) > 50)
                                    {!! substr($_events["description"],0,50)  !!}
                                    </br>      
                                    <a href="javascript:;" data-toggle="modal" data-target="#about_event_description_modal{{$loop->iteration}}" class="btn btn-sm w-24">Read More</a>

                                    <div id="about_event_description_modal{{$loop->iteration}}" 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">{{ $_events["name"] }}</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" style="max-height: 10rem;overflow-y:auto;"> 
                                                        {!! $_events["description"]  !!} 
                                                    </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> <!-- END: Large Modal Content -->
                                    @else
                                        {!! $_events["description"] ?? '--' !!}
                                    @endif
                    </td>
                    <!--end-->
                    <td class="border-b whitespace-nowrap">{{ $_events["url"]=="" ?'--':$_events["url"] }}</td>
                    <td class="border-b whitespace-nowrap">
                        <a class="btn btn-primary py-1 px-2 mr-2" href="{!! tokenize_url(route('admin.master.events.edit'),['id' => $_events['id']]) !!}">Edit</a>
                        <a href="javascript:void(0);" data_url="{!! tokenize_url(route('admin.master.events.destroy'),['id' => @$_events['id']]) !!}" data-toggle="modal" data-target="#delete_confirm_modal_preview" class="btn btn-danger inline-block py-1 px-2 mr-2 delete_confirm">Delete</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>



@endsection

@section('modals')
    @parent
    <!-- BEGIN: Modal Content delete confirmation -->
 <div id="delete_confirm_modal_preview" class="modal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body p-0">
                 <div class="p-5 text-center"> 
                     <!-- <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i> --> 
                    <div class="text-3xl mt-5">Are you sure?</div>
                    <div class="text-gray-600 mt-2">
                        <span id="alert_message"> Do you really want to delete?</span>
                    </div>
                 </div>
                 <div class="px-5 pb-8 text-center"> 
                    <button type="button" data-dismiss="modal" class="btn btn-outline-secondary w-24 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>
                    <a id="delete_confirm_modal_yes" data-dismiss="modal"  href="javascript:void(0);" class="btn btn-success w-24 dark:border-dark-5 dark:text-gray-300 mr-1" data_url="">Yes </a>
                </div>
             </div>
         </div>
     </div>
 </div> 
 <!-- END: Modal Content delete confirmation -->
@endsection

@section('plugin_scripts')

@endsection

@section('page_scripts')
    @parent


<script>

$(document).ready(function(){
    var status=@JSON(session()->get('status'));
    if(status=='deleted')
        showMessage("Deleted Sucessfully");
    else if(status=='inserted')
        showMessage("Inserted Sucessfully");
    else if(status=='updated')
        showMessage("updated Sucessfully");

    $('.delete_confirm').click(function(){
            var data_url=$(this).attr('data_url');
            $('#delete_confirm_modal_yes').attr('href',data_url);
        });

    function showMessage(msg, type) 
    {
        if(type=='error'){
        cash("#error-notification-content").find('.error-message-section').html(msg);
            Toastify({
                node: cash("#error-notification-content")
                    .clone()
                    .removeClass("hidden")[0],
                duration: 1500,
                newWindow: true,
                close: true,
                gravity: "top",
                position: "center",
                stopOnFocus: true,
            }).showToast();
        }else{
            cash("#success-notification-content").find('.success-message-section').html(msg);
            Toastify({
                node: cash("#success-notification-content")
                    .clone()
                    .removeClass("hidden")[0],
                duration: 1500,
                newWindow: true,
                close: true,
                gravity: "top",
                position: "center",
                stopOnFocus: true,
            }).showToast();
        }
    }           
});
</script>
@endsection
<!--/ END PAGE CONTENT -->