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

@extends('admin.layout', ['title' => 'Mass Booking'])
@include('admin.navbar')
@section('content')
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
@if (session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif
@if (session('status'))
<div class="alert alert-success">
    {{ session('status') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-info">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div style="max-width: 700px;" class="me-auto m-3">
    <form method="POST">
        @csrf
        <div class="mt-2">
            <label class="form-label">Item(s)*</label>
            <select class="form-select" multiple required name="items[]">
                @foreach ($items as $item)
                <option value="{{$item->id}}">{{$item->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="mt-2">
            <label class="form-label">Book by:</label>
            <select onchange="changeInput()" class="form-select" autocomplete="false" id="typeSelect">
                <option value="period">Periods</option>
                <option value="block">Blocks</option>
            </select>
        </div>
        <div class="mt-2" id="blocks" style="display: none;">
            <label class="form-label">Blocks*</label>
            <select class="form-select" multiple name="blocks[]" id="blockSelection">
                <option value="1">8:00am - 9:00am</option>
                <option value="2">9:05am - 10:05am</option>
                <option value="3">10:15am - 11:15am</option>
                <option value="4">11:15am - 12:00pm</option>
                <option value="5">12:00pm - 1:00pm</option>
                <option value="6">1:10pm - 2:10pm</option>
            </select>
        </div>
        <div class="mt-2" id="periods">
            <label class="form-label">Periods*</label>
            <select class="form-select" multiple name="periods[]" id="periodSelection">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <hr>
        {{-- User picks a way of inputting date range --}}

        <h5>Pick one way of choosing days</h5>
        <div class="mt-2">
            <label class="form-label">Select day input format:</label>
            <select onchange="changeFormatInput()" class="form-select" autocomplete="false" id="formatSelect">
                <option>-- Select an input format --</option>
                <option value="days">Day(s)</option>
                <option value="dateRange">Date Range</option>
                <option value="entireYear">Entire Year</option>
            </select>
        </div>
        <div class="mt-2 border p-2 formatDiv" style="display: none;" id="days">
            <label class="form-label">Day(s)*</label>
            <input type="text" class="form-control date formatOption" name="days" maxlength="1000" />
        </div>
        <div class="mt-2 border p-2 formatDiv" style="display: none;" id="dateRange">
            <h6>Date Range</h6>
            <label class="form-label">From</label>
            <input type="text" class="form-control date formatOption" name="from" maxlength="1000" />
            <label class="form-label">To</label>
            <input type="text" class="form-control date formatOption" name="to" maxlength="1000" />
        </div>
        <div class="mt-2 border p-2 formatDiv" style="display: none;" id="entireYear">
            <label for="book_entire_year">Book entire year</label>
            <input type="checkbox" id="bookentireyear" class="formatOption form-checkbox" name="book_entire_year">
        </div>
        <hr>

        {{-- End of choice --}}
        <div class="mt-2">
            <label class="form-label">Comment</label>
            <textarea name="comment" class="form-control" maxlength="255"></textarea>
        </div>
        <div class="mt-2">
            <label class="form-label">Room</label>
            <input type="number" name="room_num" placeholder="Room Number" class="form-control" max="999" min="0" />
        </div>
        <div class="mt-2">
            <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>
        </div>
        <div class="mt-4">
            <button type="submit" class="btn btn-primary">Book</button>
        </div>
    </form>
</div>

<script>
    $(document).ready(function() {
        $('.date').datepicker({
            format: 'dd/mm/yyyy',
            multidate: true
        });
    });

    var periodDiv = document.getElementById('periods');
    var blockDiv = document.getElementById('blocks');
    var typeSelect = document.getElementById('typeSelect');
    var periodSelection = document.getElementById('periodSelection');
    var blockSelection = document.getElementById('blockSelection');

    var formatInputs = document.querySelectorAll('.formatOption');
    var formatDiv = document.querySelectorAll('.formatDiv');

    function changeInput() {
        if (typeSelect.value == 'period') {
            blockSelection.selectedIndex = -1;
            periodDiv.style.display = "block";
            blockDiv.style.display = "none";
        } else {
            periodSelection.selectedIndex = -1;
            periodDiv.style.display = "none";
            blockDiv.style.display = "block";
        }
    }

    function changeFormatInput() {
        var formatSelect = document.getElementById('formatSelect');

        // Set all inputs to empty and hide all options
        formatInputs.forEach(input => {
            if (input.type == 'checkbox') {
                input.checked = false;
            } else {
                input.value = null;
            }
        });
        formatDiv.forEach(div => {
            div.style.display = 'none';
        });

        let selectedFormat = formatSelect.value;

        // Set the selected format input to the value of the selected format

        var selectedDiv = document.getElementById(selectedFormat);
        if (selectedDiv) {
            selectedDiv.style.display = 'block';
        }
    }
</script>
@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" integrity="sha512-34s5cpvaNG3BknEWSuOncX28vz97bRI59UnVtEEpFX536A7BtZSJHsDyFoCl8S7Dt2TPzcrCEoHBGeM4SUBDBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endsection