@extends('layouts.app')

<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row clearfix">
                <div class="col-md-6 col-sm-12">
                    <h2>Event</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">{{config('app.event.name')}}</a></li>
                        <li class="breadcrumb-item"><a href="#">Event</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Event Profile</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 col-sm-12 text-right hidden-xs">
                    <a href="javascript:void(0);" class="btn btn-sm btn-primary btn-round" title="">Add New</a>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12">
                <div class="card social">
                    <div class="d-flex justify-content-between justify-content-center">
                        <img src="{{ asset('events_logo/'.$event->event_logo)}}" class="rounded" alt="" width="1200px" height="250px">
                    </div>
                </div>
            </div>

            <div class="col-xl-8 col-lg-8 col-md-7">
                <div class="card">
                    <div class="header">
                        <h2>Event Information</h2>
                        <ul class="header-dropdown dropdown">
                            <li><a href="javascript:void(0);" class="full-screen"><i class="icon-frame"></i></a></li>
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0);">Action</a></li>
                                    <li><a href="javascript:void(0);">Another Action</a></li>
                                    <li><a href="javascript:void(0);">Something else</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="body">
                        <div class="row clearfix">
                            <div class="d-flex">
                                <div class="mr-3">
                                    <img src="{{ asset('events_logo/'.$event->event_logo)}}" class="rounded" alt="">
                                </div>
                                <div class="details">
                                    <h5 class="mb-0">{{$event->title}}</h5>
                                    <span class="text-light">Ui UX Designer</span>
                                    <p class="mb-0"><span>Total Exhibitors: <strong>{{$event->total_exhibitors}}</strong></span> <span>Followers: <strong>4,230</strong></span> <span>Following: <strong>560</strong></span></p>
                                </div>
                            </div>
                            <!-- <div>
                                <button class="btn btn-primary btn-sm">Follow</button>
                                <button class="btn btn-success btn-sm">Message</button>
                            </div> -->
                            <div class="col-lg-6 col-md-12">
                                <div class="form-group">
                                    <p>Start Date : <strong class="m-l-10">
                                            {{date('d-m-Y', strtotime($event->start_date))}}
                                        </strong></p>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12">
                                <div class="form-group">
                                    <p>End Date : <strong class="m-l-10">{{date('d-m-Y', strtotime($event->end_date))}}</strong></p>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-12">
                                <div class="form-group">
                                    <p>Daily Start Time : <strong class="m-l-10">{{$event->daily_start_time}}</strong></p>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-12">
                                <div class="form-group">
                                    <p>Daily End Time : <strong class="m-l-10">{{$event->daily_end_time}}</strong></p>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-12">
                                <div class="form-group">
                                    <p>Time Zone : <strong class="m-l-10">{{$event->timezone}}</strong></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-lg-4 col-md-5">
                <div class="card">
                    <div class="header">
                        <h2>Info</h2>
                        <ul class="header-dropdown dropdown">
                            <li><a href="javascript:void(0);" class="full-screen"><i class="icon-frame"></i></a></li>
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0);">Action</a></li>
                                    <li><a href="javascript:void(0);">Another Action</a></li>
                                    <li><a href="javascript:void(0);">Something else</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="body">
                        <small class="text-muted">Address: </small>
                        <p>795 Folsom Ave, Suite 600 San Francisco, 94107</p>
                        <div>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1923731.7533500232!2d-120.39098936853455!3d37.63767091877441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan+Francisco%2C+CA%2C+USA!5e0!3m2!1sen!2sin!4v1522391841133" width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                        <hr>
                        <small class="text-muted">Email address: </small>
                        <p>louispierce@example.com</p>
                        <hr>
                        <small class="text-muted">Mobile: </small>
                        <p>+ 202-222-2121</p>
                        <hr>
                        <small class="text-muted">Birth Date: </small>
                        <p class="m-b-0">October 17th, 93</p>
                        <hr>
                        <small class="text-muted">Social: </small>
                        <p><i class="fa fa-twitter m-r-5"></i> twitter.com/example</p>
                        <p><i class="fa fa-facebook  m-r-5"></i> facebook.com/example</p>
                        <p><i class="fa fa-github m-r-5"></i> github.com/example</p>
                        <p><i class="fa fa-instagram m-r-5"></i> instagram.com/example</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>