{{--
    Copyright (c) 2024 Duncan McQuat
    All rights reserved.
--}}

@extends('admin.layout', ['title' => 'Bookings'])
@include('admin.navbar')
@section('css')
@vite(['resources/css/adminBooking.css'])
@endsection
@section('content')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
    });
</script>

<div id="loadOverlay" style="background-color:black; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;">Loading</div>
<div id="legend" class="m-3">
    <span style="background-color: lightgreen; color: black" class="p-2">Available</span>
    <span style="color: white; font-size: 20px">|</span>
    <span style="background-color: lightgray; color: black" class="p-2">Booked</span>
    <span style="color: white; font-size: 20px">|</span>
    <span style="color:black; background-color: #3498db" class="p-2">Your Booking</span>
</div>
@if (session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-info">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif
<div class="mb-2 mx-auto" id="bookingTableContainer">
    <label>Group</label>
    <select id="groupSelector" class="mb-2">
        <option value="all">All</option>
        @foreach ($groups as $group)
        <option value="{{$group->id}}">{{$group->name}}</option>
        @endforeach
    </select>


    <table id="bookingTable" class="table table-bordered">
        <thead>
            <tr>
                @php
                // Initialize the default query parameters
                $defaultParams = ['week' => 0, 'group' => 'all']; // You can adjust the default values as needed

                // Function to generate a query string from an array of parameters
                function buildQueryString($params) {
                $query = http_build_query($params);
                return $query ? '?' . $query : '';
                }

                use Illuminate\Support\Carbon;


                // Get the current query parameters
                $currentParams = request()->query();

                $params = array_merge($defaultParams, $currentParams);

                $linkUrlBack = buildQueryString(['week' => ($params['week'] - 1), 'group' => $params['group']]);
                $linkUrlForward = buildQueryString(['week' => ($params['week'] + 1), 'group' => $params['group']]);
                @endphp
                <th colspan="100%" id="weekSelector">
                    <a href="{{ $linkUrlBack }}" id="backArrow" style="text-decoration: none; width:90px;" class="btn btn-primary me-1">Back</a>
                    <span style="font-size: 20px">{{date("M d Y" , strtotime($dateRange[0]))}} - {{date("M d Y" , strtotime($dateRange[4]))}}</span>
                    <a href="{{ $linkUrlForward }}" id="forwardArrow" style="text-decoration: none; width: 90px;" class="btn btn-primary ms-1">Forward</a>
                </th>
            </tr>
            <tr style="text-align: center;">
                <th style="width: 10%">Time</th>
                <th style="width: 10%">Items</th>
                <th>Monday <br>{{ Carbon::parse($dateRange[0])->toFormattedDateString() }}</th>
                <th>Tuesday <br>{{ Carbon::parse($dateRange[1])->toFormattedDateString() }}</th>
                <th>Wednesday <br>{{ Carbon::parse($dateRange[2])->toFormattedDateString() }}</th>
                <th>Thursday <br>{{ Carbon::parse($dateRange[3])->toFormattedDateString() }}</th>
                <th>Friday <br>{{ Carbon::parse($dateRange[4])->toFormattedDateString() }}</th>
            </tr>
        </thead>
        @for ($i = 0; $i <= 5; $i++) <tr>
            <td class="p-2">{{$periods[$i]}}</td>
            <td>
                <ul>
                    @foreach ($itemNames as $name)
                    <li style="text-align: left;">{{$name}}</li>
                    @endforeach
                </ul>
            </td>
            @for ($j = 0; $j <= 4; $j++) <td>
                <ul>
                    @foreach ($tableData[$i][$j] as $item)
                    @if ($item[0])
                    <li style='background-color: lightgreen; color: black;' class='available' id="tableEntryId{{ $item[1] }}" data-bs-toggle="modal" data-bs-target="#bookingModal">&#10003; (Per {{$item[5]}})</li>
                    @elseif ($item[2])
                    <li style='background-color: #3498db; color: black;' class='booked userbooked' id="bookingEntryId{{ $item[4] }}" data-bs-toggle='modal' data-bs-target="#editBookingModal">Your Booking (Per {{$item[5]}})</li>
                    @else
                    <li style=' background-color: lightgray; color: black;' class='booked' id="bookingEntryId{{ $item[4] }}" data-bs-toggle="modal" data-bs-target="#editBookingModal">{{ $item[3] }} (Per {{$item[5]}})</li>
                    @endif
                    @endforeach
                </ul>
                </td>
                @endfor

                </tr>
                @endfor
    </table>
</div>
<div class=" modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="bookingModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Item Description</label>
                <textarea class="form-control" id="descField" disabled></textarea>
                <form method="POST" id="bookingForm">
                    @method('PUT')
                    @csrf

                    <input type="hidden" name="date" value="" id="bookingFormDate">
                    <input type="hidden" name="block" id="formBlock">
                    <label class="form-label">Comment (Optional, 255)</label>
                    <input type="text" name="comment" class="form-control" maxlength="255">
                    <label class="form-label">Room Number (Optional)</label>
                    <input type="number" name="room_num" class="form-control" placeholder="Room Number" min="0" max="999">
                    <label class="form-label">User</label>
                    <select class="form-select" name="user">
                        <option value="{{$user->getEmail()}}">{{$user->getEmail()}}</option>
                        @foreach ($users as $otherUser)
                        @if (!($otherUser['email'] == $user->getEmail()))
                        <option value="{{$otherUser['email']}}">{{$otherUser['email']}}</option>
                        @endif
                        @endforeach
                    </select>
                </form>
            </div>
            <div class="modal-footer">
                <p hidden id="dateRangeStart">{{$dateRange[0]}}</p>
                <div class="me-auto" id="formDate"></div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="bookingForm" class="btn btn-primary">Book</button>
            </div>
        </div>
    </div>
</div>
<div class=" modal fade" id="editBookingModal" tabindex="-1" aria-labelledby="editBookingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="editBookingModalLabel">USER</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Comment</label>
                <textarea id="editBookingComment" class="form-control" readonly disabled></textarea>
                <label class="form-label">Room Number</label>
                <input type="number" id="editBookingRoomNumber" class="form-control" readonly disabled>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                <form method="POST" id="editBookingForm">
                    @csrf
                    @method('delete')
                    <button type="submit" class="btn btn-danger">Remove Booking</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
@vite(['resources/js/admin/table.ts'])
@endsection