@extends('layouts.app')

@section('content')



    <div class="container">




        <div class="row justify-content-center">
            <div class="col-md-8 mt-2">
                <div class="card mt-4">

                    <div class="card-header"><h5>{{ $tour->name }}</h5>
                    </div>

                    <div class="card-body">

                        <form style="background-color: #fff;" class="text-dark" method="post" action="" enctype="multipart/form-data">
                            @csrf

                            <div class="" style="display:flex;">
                                <!-- label class="ml-2 mt-4 col-form-label col-form-label-sm" style="width:150px; text-align:left;" for="name"><h4>Name:</h4></label> -->
                                <label class="ml-2" style="width:180px; text-align:left;font-size:18px;" for="name">Name:</label>
                                <input class="mr-1 form-control" type="text" id="name" name="name" value="{{ old('name') ?? $tour->name }}" readonly  >
                            </div>

                            <div class="mt-1" style="display:flex;">
                                <label class="ml-2" style="width:180px; text-align:left;font-size:18px;" for="name">Start:</label>
                                <input class="mr-1 form-control" type="text" id="start" name="start" value="{{ old('start') ?? $tour->start }}" readonly >
                            </div>

                            <div class="mt-1" style="display:flex;">
                                <label class="ml-2" style="width:180px; text-align:left;font-size:18px;" for="creator">Ansprechpartner:</label>
                                <input class="mr-1 form-control" type="text" id="creator" name="creator" value="{{ old('creator') ?? $creator->name }}" readonly >
                            </div>

                            <div class="mt-1" style="display:flex;">
                                <label class="ml-2" style="width:180px; text-align:left;font-size:18px;" for="name">Anmeldeschluss:</label>
                                <input class="mr-1 form-control" type="text" id="anmeldeschluss"  style="font-size:16px;"  name="deadline" value="{{ old('anmeldeschluss') ?? $tour->deadline }}" readonly >
                            </div>

                            <div class="mt-1" style="display:flex;">
                                <label class="ml-2" style="width:180px; text-align:left;font-size:18px;" for="name">Max Teilnehmer:</label>
                                <input class="mr-1 form-control" type="text" id="max_participants"  style="font-size:16px;"  name="max_participants" value="{{ old('max_participants') ?? $tour->max_participants }}" required >
                            </div>

                            @if(App\Tour::has_participant($tour->id, Auth::user()->id))
                                <label>Du nimmst teil.</label>
                            @else
                                <label>Du nimmst nicht teil.</label>
                            @endif


                            @if(file_exists (public_path ('img/tour/'.$tour->id.'.jpg')))
                            <!--File exists -->
                                <a href="/img/tour/{{$tour->id}}_gross.jpg" data-lightbox="{{$tour->id}}_gross.jpg" data-title="{{ $tour->name }}">
                                    <img src="/img/tour/{{$tour->id}}.jpg" class="mt-3 ml-3" >
                                </a>
                            @else
                                <img src="/img/placeholder/tour128x100.jpg"  class="mt-3 ml-3" >
                            @endif

                            <div class="mt-1" style="display:flex;">
                                <label class="ml-2" style="width:140px; text-align:left;font-size:18px;" for="is_cancelled">Storniert:</label>
                                <input class="mr-1 form-control" type="checkbox" id="is_cancelled"  style="font-size:10px;width:20px;"  name="is_cancelled"
                                       @if($tour->is_cancelled)
                                           checked
                                       @endif
                                       onclick="return false;"
                                >
                            </div>

                            <div class="mt-1">
                                <textarea class="col-12" name="beschreibung" rows="10" cols="50" readonly>{{ $tour->beschreibung }}
                                </textarea>
                            </div>

                            <!-- TODO: Only if owner or admin -->
                            <a href="/tour/{{$tour->id}}/edit"><div type="submit" class="btn btn-danger col-3 mb-2 float-left mr-2">Bearbeiten</div></a>
                            <a href="/tour" type="submit" class="btn btn-success col-3 mb-2 float-right mr-2">Ok</a>

                            @if(!App\Tour::has_participant($tour->id, Auth::user()->id))
                                <!-- Connected to Modal -->
                                <button id="myBtn" class="btn btn-danger float-left">Teilnehmen</button>
                            @else
                                <a href="/tour/{{$tour->id}}/cancelBooking" type="submit" class="btn btn-danger col-3 mb-2 float-right mr-2">Absagen</a>
                            @endif

                        </form>
                        <!-- Modal Anzeige start -->







                        <!-- The Modal -->
                        <div id="myModal" class="modal">

                        <!-- Modal content -->
                            <div class="modal-content">
                                <span class="close">&times;</span>
                                <h2>Bitte Zimmer auswählen</h2>
                                <!-- Teilnehmer+Raum Anzeige/Auswahl: Nur buchbare -->
                                <div class="card-body">
                                    <ul>
                                        <!-- Intentional Assignment ! -->
                                        @if ($room_id="") @endif
                                        @foreach($rooms as $room)
                                            @if( $room->room_id != 0 and $room->free_slots >0) <!-- Dont show "Ungebucht", room_id=0 and only with available slots -->
                                                @if ($room_id != $room->room_id)
                                                    @if(strlen($room_id))
                                                        <hr/>
                                                    @endif
                                                    <p style="list-style-type: none;">[{{$room->room_id}}]
                                                        <span>{{$room->room_name}}
                                                        </span><b><a href="/tour/{{$tour->id}}/join/{{$room->room_id}}"> ==> Buchen</a></b>
                                                    </p>

                                                    <!-- Intentional Assignment ! -->
                                                    @if ($room_id=$room->room_id) @endif
                                                @endif

                                                @if(strlen($room->user_name))
                                                    <li> {{ $room->user_name}}
                                                    </li>
                                                @endif
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>


                            </div>

                        </div>

                        <!--Modal Anzeige end -->
                    </div>
                </div>
            </div>

            <div class="col-md-3 mt-2">
                <div class="card mt-4">
                    <div class="card-header"><h5>Teilnehmer</h5></div>

                    <!-- Teilnehmer+Raum Anzeige -->
                    <div class="card-body">
                        <ul>
                            <!-- Intentional Assignment ! -->
                            @if ($room_id="") @endif
                            @foreach($rooms as $room)
                                @if ($room_id != $room->room_id)
                                    @if(strlen($room_id))
                                        <p>-------------------------</p>
                                    @endif
                                    <p><b>[{{$room->room_id}}] {{$room->room_name}}</b></p>

                                    <!-- Intentional Assignment ! -->
                                    @if ($room_id=$room->room_id) @endif
                                @endif

                                @if(strlen($room->user_name))
                                    <li style="list-style:none"> {{ $room->user_name}}
                                        @if(Auth::user()->role=="ADMIN")
                                            <a href="/tour/{{$tour->id}}/cancelBookingAdmin/{{$room->user_id}}" class="text-primary ts_tooltip">(X)
                                                <span class="ts_tooltiptext">Stornieren</span>
                                            </a>
                                        @endif
                                    </li>
                                @endif

                            @endforeach
                        </ul>
                    </div>

                </div>
            </div>


        </div>




    </div>






    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on the button, open the modal
        btn.onclick = function(e) {
            e.preventDefault();
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function(e) {
            e.preventDefault();
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            event.preventDefault();
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>

@endsection