@extends('layouts.app')
@section('content')
<div id="main-content">
    <div class="sponser" style="margin-top: 50px !important">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="booth-image">
                    <a href="#" id="boothImage1">
                        <div class="sponser-box-1">
                                @if(isset($images[1]))
                                    <img src="{{asset('/booth_images/'.$images[1])}}" alt="">
                                @endif
                        </div>
                    </a>
                    <a href="#" id="boothVideo1">
                        <div class="sponser-video-1">
                            @if(isset($videos[1]))
                            <a href="#" class="btn btn-primary" id="play-video" style="margin-left: 30%; margin-bottom: 4%; margin-top: 5%;">Play</a>
                            <a href="#" class="btn btn-primary" id="change-video" style="margin-left: 30%;">Change</a>
                            @endif
                        </div>
                    </a>
                    <a href="#" id="boothImage2">
                        <div class="sponser-box-2">

                                @if(isset($images[2]))
                                    <img src="{{asset('/booth_images/'.$images[2])}}" alt="">
                                @endif

                        </div>
                    </a>
                    <a href="#"  id="boothImage3">
                        <div class="sponser-box-3">
                                @if(isset($images[3]))
                                    <img src="{{asset('/booth_images/'.$images[3])}}" alt="">
                                @endif
                        </div>
                    </a>
                    <a href="#" id="boothImage4" >
                        <div class="sponser-box-4">
                                @if(isset($images[4]))
                                    <img src="{{asset('/booth_images/'.$images[4])}}" alt="">
                                @endif
                        </div>
                    </a>
                    <a href="#" id="boothImage5">
                        <div class="sponser-box-5">
                            @if(isset($images[5]))
                            <img src="{{asset('/booth_images/'.$images[5])}}" alt="">
                        @endif
                        </div>
                    </a>
                    <a href="#" id="boothImage6">
                        <div class="sponser-box-6">
                            @if(isset($images[6]))
                            <img src="{{asset('/booth_images/'.$images[6])}}" alt="">
                        @endif
                        </div>
                    </a>

                    <a href="#" id="boothImage7">
                        <div class="sponser-box-7">
                            @if(isset($images[7]))
                            <img src="{{asset('/booth_images/'.$images[7])}}" alt="">
                        @endif
                        </div>
                    </a>

                    <img src="{{asset('assets/images/image/sponsor.jpg')}}" alt="Snow" style="width:100%;">
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="container-fluid">
        <div class="block-header">
            <div class="row clearfix">
                <div class="col-md-4 col-sm-12">
                    <a href="{{route('sponsor.booth.right', $company->id)}}" class="btn btn-sm btn-primary btn-round" title="">Prev</a>
                </div>

                <div class="col-md-4 col-sm-12 text-center">
                    <h4>Booth Back</h4>
                </div>
                <div class="col-md-4 col-sm-12 text-right">
                    <a href="{{route('sponsor.booth.left', $company->id)}}" class="btn btn-sm btn-success btn-round" title="">Next</a>
                </div>
            </div>
            <div class="mb-3">
                @if($errors->any())
                    <div class="col-md-12 alert alert-danger">
                        <strong>{{$errors->first()}}</strong>
                    </div>
                @endif
            </div>
            @include('flash::message')
        </div>

    </div>

    @include('exhibition.main_footer')
</div>

<div class="modal image-upload-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 9999999">
    <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="boothId" id="boothId" value="back">
                    <input type="hidden" name="imagePosition" id="imagePosition" 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="boothId" id="boothId" value="back">
                    <input type="hidden" name="videoPosition" id="videoPosition" 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>

<div class="modal video-play2-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>
                @if(isset($videos[1]))
                    <iframe id="boothVideo1" width="100%" height="100%" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            @endif
            </div>
            <div class="modal-footer">

            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/booth/sponsor_booths.js')}}"></script>
    <script>
        let assetBaseUrl = '{{ URL::asset('/booth_images/') }}';
        let assetBaseUrlVideo = '{{ URL::asset('/booth_videos/') }}';
        let postRoute = '{{ route("sponsor.booth.image.upload") }}';
        let postRouteVideo = '{{ route("sponsor.booth.video.upload") }}';
    </script>
    <script src="{{ asset('assets/js/booth/sponsor_booth_images_upload.js')}}"></script>
@endsection