@extends('layouts.'.$namespaceName.'.master')
@section('title')
{{$title}}
@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')
        <div class="row m-1">
            <div class="col d-flex">
                <div class="card main_card  flex-fill">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bx-note'></i> {{__($namespaceName.'/'.$modelName.'.event_details')}}</strong>
                    </div>
                    <div class="card-body">
                        <div class="border p-3 rounded">
                            <div class="row ">
                                <div class="col-12">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.event_code')}}</span> : {{$data->event_code}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.name')}}</span> : {{$data->name}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.description')}}</span> : {{$data->description}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.location')}}</span> : {{$data->location}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.start_date')}}</span> : {{humanDateTime($data->start_date)}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.end_date')}}</span> : {{humanDateTime($data->end_date)}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col d-flex">
                <div class="card main_card  flex-fill">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bx-note'></i> {{__($namespaceName.'/'.$modelName.'.other_details')}}</strong>
                    </div>
                    <div class="card-body">
                        <div class="border p-3 rounded">
                            <div class="row ">
                                <div class="col-12">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.host_name')}}</span> : {{$data->host->name}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.server')}}</span> : {{$data->server->endpoint}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.subscription_code')}}</span> : {{$data->subscription_code}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.status')}}</span> : {{$data->status->display_value}}</li>
                                        <li class="list-group-item"><span style="font-weight: bold" >{{__($namespaceName.'/'.$modelName.'.event_visitor_types')}}</span> :
                                            @foreach($data->visitorTypes as $visitorType)
                                                <span class="badge bg-primary">{{$visitorType->display_value}}</span>
                                            @endforeach
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row m-1">
            <div class="col d-flex">
                <div class="card main_card flex-fill">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bx-note'></i> {{ __($namespaceName.'/'.$modelName.'.event-photo') }}</strong>
                    </div>
                    <div class="card-body d-flex justify-content-center align-items-center" style="height: 100%;">
                        <img src="{{ asset($data->image_relative_path) }}" style="width: auto; height: 100%; max-height: 420px;" alt="photo">
                    </div>
                </div>
            </div>
            <div class="col d-flex">
                <div class="card main_card flex-fill">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bx-photo-album'></i> {{ __($namespaceName.'/'.$modelName.'.event_gallery') }}</strong>
                    </div>
                    <div id="carouselExampleControls" class="carousel slide">
                        <div class="carousel-inner">
                            @if($gallery && $gallery->count() > 0)
                                @foreach($gallery as $index => $image)
                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                        <img src="{{ asset($image->image_relative_path) }}" class="d-block w-100" style="width: auto; height: 100%; max-height: 420px;" alt="Event Image">
                                    </div>
                                @endforeach
                            @else
                                <p>{{ __('No images available') }}</p>
                            @endif
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>



        <div class="row m-1">
            <div class="col">
                <div class="card main_card">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bx-note'></i> {{__($namespaceName.'/'.$modelName.'.event-location')}}</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4 mb-3">
                                <input type="hidden" class="form-control" name="lng" id="lng" value="{{ $data->map_location['lng'] }}"/>
                            </div>
                            <div class="col-4 mb-3">
                                <input type="hidden"  class="form-control"name="lat" id="lat" value="{{ $data->map_location['lat'] }}"/>
                            </div>
                        </div>
                        @if(configuration_hlp('map','activate_map'))
                            <div id="map" class="gmaps"></div>
                        @else
                            <img src="{{asset('default/disabled_map3.jpg')}}" class="img-responsive" style="height: 100%;width: 100%">
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="row m-1">
            <div class="col">
                <div class="card main_card">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bxs-category'></i> {{__($namespaceName.'/'.$modelName.'.event_visitors')}}</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="table-responsive">
                                <table id="serviceLimits" class="table table-striped table-bordered text-center">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{trans($namespaceName.'/'.$modelName.'.'.'name')}}</th>
                                        <th>{{trans($namespaceName.'/'.$modelName.'.'.'email')}}</th>
                                        <th>{{trans($namespaceName.'/'.$modelName.'.'.'mobile')}}</th>
                                        <th>{{trans($namespaceName.'/'.$modelName.'.'.'pin')}}</th>
                                        <th>{{trans($namespaceName.'/'.$modelName.'.'.'QR-code')}}</th>
                                        <th>{{trans($namespaceName.'/'.$modelName.'.'.'card_num')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($data->Eventvisitors as $visitor)
                                        <tr>
                                            <td>{{$loop->iteration}}</td>
                                            <td>{{$visitor->name}}</td>
                                            <td>{{$visitor->email}}</td>
                                            <td>{{$visitor->mobile}}</td>
                                            <td>{{$visitor->pivot->pin}}</td>
                                            <td>{!! QrCode::size(100)->gradient (150, 85, 155, 55, 10, 150,'vertical')->generate($visitor->pivot->cardNo); !!}</td>
                                            <td>{{$visitor->pivot->cardNo}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row m-1">
            <div class="col">
                <div class="card main_card">
                    <div class="card-header">
                        <strong class="h6"><i class='bx bxs-category'></i> {{__($namespaceName.'/'.$modelName.'.event_speakers')}}</strong>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="roles" class="table table-striped table-bordered text-center">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'speaker_name')}}</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'speaker_email')}}</th>
                                    {{-- <th>{{trans($namespaceName.'/'.$modelName.'.'.'speaker_email')}}</th> --}}
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'speaker_phone')}}</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'position')}}</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'speak_days')}}</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'linked_in_url')}}</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'speaker_photo')}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($speakers as $row)
                                    <tr id="row_{{$row->id}}">
                                        <td>{{$loop->iteration}}</td>
                                        <td>{{$row->speaker_name}}</td>
                                        <td>{{$row->speaker_email}}</td>
                                        <td>{{$row->speaker_phone}}</td>
                                        <td>{{$row->position}}</td>
                                        {{-- <td>{{$row->description}}</td> --}}
                                        <td>{{$row->days}}</td>
                                        <td>{{$row->linked_in_url}}</td>
                                        <td>
                                            <img src="{{asset($row->photo)}}" class="product-img-2" alt="speaker photo"></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script>

// $('.carousel').carousel()
    let map_key='{{configuration_hlp('map','geo_map_key')}}';
    function load_js()
    {
        var lang="{{ App()->getLocale() }}";
        var head= document.getElementsByTagName('head')[0];
        var script= document.createElement('script');
        script.src= "https://maps.googleapis.com/maps/api/js?key="+map_key+"&language="+lang+"&callback=initMap&libraries=places&v=weekly";
        head.appendChild(script);
    }
    load_js();
    let map;
    function initMap()
    {
        let long =parseFloat( document.getElementById('lng').value);
        let lati =parseFloat( document.getElementById('lat').value);
        let coord = { lat: lati , lng:long };
        map=new google.maps.Map(document.getElementById('map'),{
            zoom:17,
            center:coord ,
            scrollwheel:true
        });
        let marker = new google.maps.Marker({
            position:coord,
            map:map,
        });
    }
</script>
@endpush