@extends('layouts.app')

@section('content')

<div id="main-content">
    <div style="width: 100%;height: auto;position:relative" >
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 px-0">
                    <div style="position:relative;margin-top:25px; margin-bottom:25px">
                        <img src="{{asset('event-data/booth-designs/'.$booth->boothDesign->image)}}" alt="Snow" style="width:100%; height:auto;">

                        @foreach ($booth->boothDesign->mappings as $boothMapping)

                            @if ($boothMapping->type == 'screen')
                            <a href="#" onclick="uploadVideo({{$booth->id}},{{$boothMapping->id}})">
                                <div style="{{ $boothMapping->mapping }}">
                                    @if($booth->getAsset($boothMapping->id))
                                    <a href="#" class="btn btn-primary" id="play-video" style="margin-left: 30%; margin-bottom: 4%;">Play</a>
                                    <a href="#" class="btn btn-primary" onclick="uploadVideo({{$booth->id}},{{$boothMapping->id}})" style="margin-left: 30%;">Change</a>
                                    @endif
                                </div>
                            </a>

                            <div class="modal video-play-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Video</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div id="form-errors"></div>
                                            <div>
                                                <iframe width="100%" height="auto" src="{!! str_replace("&","?",str_replace("&start_radio=1","",str_replace("watch?v=","embed/",$booth->getAsset($boothMapping->id,false)))) !!}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                            </div>
                                        </div>
                                        <div class="modal-footer">

                                        </div>
                                    </div>

                                </div>
                            </div>
                            @else
                            <a href="#" onclick="uploadImage({{$booth->id}},{{$boothMapping->id}})">
                                <div style="{{ $boothMapping->mapping }}">
                                    <div style="position:relative;height:100%;width:100%;">
                                        <img id="boothAssetMap{{$boothMapping->id}}" src="@if($booth->getAsset($boothMapping->id)){{ asset($booth->getAsset($boothMapping->id, $exhibitor->id)) }}@else {{ asset('fallback/fallback-placeholder.png') }} @endif" alt="" style="width:100%;height:100%">
                                    </div>
                                </div>
                            </a>
                            @endif

                            @endforeach
                        {{-- <a href="#" style="z-index: 999999">
                            <div id="rack1" class="yellow2-rack">
                                <div id="rack1" style="height: 100%">
                                </div>
                            </div>
                        </a> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('exhibition.main_footer')
</div>

<div class="modal image-upload-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" enctype="multipart/form-data" id="imageUpload" action="javascript:void(0)">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Upload Image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="form-errors"></div>
                <input type="hidden" name="imagePosition" id="imagePosition" value="">
                <input type="hidden" name="companyBoothImage" id="companyBoothImage" value="">
                <input name="imageToUpload" type="file" class="dropify">
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-round btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-round btn-success">Upload</button>
            </div>
        </div>
        </form>
    </div>
</div>


<div class="modal video-upload-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" enctype="multipart/form-data" id="videoUpload" action="javascript:void(0)">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Upload Video</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="form-errors-video"></div>
                    <input type="hidden" name="videoPosition" id="videoPosition" value="">
                    <input type="hidden" name="companyBoothVideo" id="companyBoothVideo" value="">
                    <input name="videoToUpload" type="text" class="">
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-round btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-round btn-success">Embed Video</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        let assetBaseUrl = "{{ URL::asset('/booth-data/company-booth-') }}";
        let assetBaseUrlVideo = "{{ URL::asset('/booth-data/company-booth-') }}";
        let postRoute = "{{ route('booth.image.upload') }}";
        let postRouteVideo = "{{ route('booth.video.upload') }}";
    </script>
    <script src="{{ asset('assets/js/booth/booth_images_upload.js')}}"></script>
@endsection