Untitled

@extends('layouts.reservation_index')

@section('main')


    <div class="modal fade" role="dialog" tabindex="-1" id="modal1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Reservation</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                <div class="modal-body">
                    <p>The content of your modal.</p>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr></tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>From</td>
                                    <td><input type="datetime-local"></td>
                                </tr>
                                <tr>
                                    <td>To</td>
                                    <td><input type="datetime-local"></td>
                                </tr>
                                <tr>
                                    <td>Category</td>
                                    <td><select><optgroup label="This is a group"><option value="12" selected="">This is item 1</option><option value="13">This is item 2</option><option value="14">This is item 3</option></optgroup></select></td>
                                </tr>
                                <tr>
                                    <td>Facility</td>
                                    <td><select><optgroup label="This is a group"><option value="12" selected="">This is item 1</option><option value="13">This is item 2</option><option value="14">This is item 3</option></optgroup></select></td>
                                </tr>
                                <tr>
                                    <td>Name</td>
                                    <td><input type="text"></td>
                                </tr>
                                <tr>
                                    <td>Contact</td>
                                    <td><input type="number"></td>
                                </tr>
                                <tr>
                                    <td>Price</td>
                                    <td><input class="form-control-plaintext" type="text" value="Auto-generated" readonly=""></td>
                                </tr>
                                <tr>
                                    <td>Paid</td>
                                    <td><input type="number"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn btn-light" type="button" data-dismiss="modal">Close</button><button class="btn btn-primary" type="button" style="background-color:#563775;">Reserve</button></div>
            </div>
        </div>
    </div>


    <div class="modal fade" role="dialog" tabindex="-1" id="modal2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Reservation</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                <div class="modal-body">
                    <p>The content of your modal.</p>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr></tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>From</td>
                                    <td><input type="datetime-local"></td>
                                </tr>
                                <tr>
                                    <td>To</td>
                                    <td><input type="datetime-local"></td>
                                </tr>
                                <tr>
                                    <td>Category</td>
                                    <td><select><optgroup label="This is a group"><option value="12" selected="">This is item 1</option><option value="13">This is item 2</option><option value="14">This is item 3</option></optgroup></select></td>
                                </tr>
                                <tr>
                                    <td>Facility</td>
                                    <td><select><optgroup label="This is a group"><option value="12" selected="">This is item 1</option><option value="13">This is item 2</option><option value="14">This is item 3</option></optgroup></select></td>
                                </tr>
                                <tr>
                                    <td>Name</td>
                                    <td><input type="text"></td>
                                </tr>
                                <tr>
                                    <td>Contact</td>
                                    <td><input type="number"></td>
                                </tr>
                                <tr>
                                    <td>Price</td>
                                    <td><input class="form-control-plaintext" type="text" value="Auto-generated" readonly=""></td>
                                </tr>
                                <tr>
                                    <td>Paid</td>
                                    <td><input type="number"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn btn-light" type="button" data-dismiss="modal">Close</button><button class="btn btn-primary" type="button" style="background-color:#ff0f00;">Cancel Booking</button><button class="btn btn-primary" type="button" style="background-color:#563775;">Update</button></div>
            </div>
        </div>
    </div>


    <div>
        <div class="container">
            <div class="row">
                <div class="col-md-12"><button class="btn btn-primary" type="button" style="background-color:#563775;margin:15px;">Today</button>
                    <div class="btn-group" role="group" style="margin:15px;"><button class="btn btn-primary" type="button" style="background-color:#563775;">January (Delete?)</button><button class="btn btn-primary" type="button" style="background-color:#563775;">February (Delete?)</button></div><input type="datetime-local"
                        style="margin:15px;"><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal1">Release to book</button><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal2">Tap to edit</button></div>
            </div>
        </div>


        <div class="row">


            <div class="col-1">
                <div class="btn-group-vertical" role="group">
                    @foreach ($categories as $category)
                    <button class="btn btn-primary main_cat" type="button" style="background-color:#563775;" id = "{{'category'.$category->id}}">{{ $category->name }}</button>
                    <script type="text/javascript">
                        button = document.getElementById("{{'category'.$category->id}}");

                        button.onclick = function() {
                            var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
                            var rows = table.rows;
                            var i = rows.length;
                            while (i--) {
                                table.deleteRow(i);
                            }

                            var counter = 0;
                            var column_count = document.getElementById("myTable").getElementsByTagName('thead')[0].rows[0].cells.length - 1;

                            @foreach ($facilities_arr[$category->id] as $facility)
                            {
                                var row = table.insertRow(counter++);
                                var cell = row.insertCell(0);
                                cell.innerHTML = "{{ $facility->name }}";
                                @if($facility->status == "Closed")
                                    cell = row.insertCell(1);
                                    cell.colSpan = column_count;
                                    cell.innerHTML = "Facility Closed";
                                    cell.style.textAlign = "center";
                                    cell.style.backgroundColor = "grey";
                                @else
                                    var counterv2 = 1;
                                    @php
                                        $start_time = $period->start;

                                        //my stuff
                                        $current_time = $period->start;
                                        $current_rate;
                                        $slot = $current_time->format('H:i:s');
                                        $cellRate;
                                        //my stuff end

                                    @endphp


                                    @if(array_key_exists($facility->id, $reservations_arr))

                                        @foreach ($reservations_arr[$facility->id] as $reservation)
                                            @php

                                            $reservation_start_time = DateTime::createFromFormat("Y-m-d H:i:s", $reservation->start);

                                            $difference = $period->start->diff($reservation_start_time);
                                            $intervalInSeconds = (new DateTime())->setTimeStamp(0)->add($difference)->getTimeStamp();
                                            $reservation_start_time = $intervalInSeconds < 0 ? $period->start : $reservation_start_time;

                                            $timeInterval = $start_time->diff($reservation_start_time);
                                            $intervalInSeconds = (new DateTime())->setTimeStamp(0)->add($timeInterval)->getTimeStamp();
                                            $intervalInMinutes = $intervalInSeconds/60;
                                            $intervalInSpans = $intervalInMinutes/30;
                                            @endphp


                                            @for ($i = 0; $i < $intervalInSpans; $i++)
                                                @foreach($rates_arr[$facility->id] as $key => $rate)
                                                    @php
                                                        $convertToDateTime = DateTime::createFromFormat('H:i:s', $rate->sort_rates);
                                                        if ($current_time >= $convertToDateTime)
                                                        {
                                                            $cellRate = $rate->rate;
                                                            echo 'alert("latest ' . $cellRate . '");';
                                                            //but when to break if there's multiple past 24:00:00 rate?
                                                        }
                                                        else
                                                        {
                                                            echo 'alert("final ' . $cellRate . '");';
                                                            break;
                                                        }
                                                    @endphp
                                                @endforeach
                                                @php
                                                @endphp
                                                cell = row.insertCell(counterv2++);
                                                cell.innerHTML = 'potato';
                                                cell.classList.add('highlight');
                                                cell.setAttribute('value', '{{ $cellRate }}' );
                                                cell.setAttribute('curtime', '{{ $slot }}' );
                                                @php
                                                    $current_time->add(new DateInterval('PT30M'));
                                                    $slot = $current_time->format('H:i:s');
                                                    echo 'alert("then ' . $slot . '");';
                                                @endphp
                                            @endfor


                                            @php
                                            $reservation_end_time = DateTime::createFromFormat("Y-m-d H:i:s", $reservation->end);
                                            $timeInterval = ($reservation_start_time->diff($reservation_end_time));
                                            $intervalInSeconds = (new DateTime())->setTimeStamp(0)->add($timeInterval)->getTimeStamp();
                                            $intervalInMinutes = $intervalInSeconds/60;
                                            $intervalInSpans = $intervalInMinutes/30;
                                            @endphp

                                            cell = row.insertCell(counterv2++);
                                            cell.colSpan = "{{ $intervalInSpans }}";


                                            for(var i = 0; i < '{{ $intervalInSpans }}'; i++) {
                                                @php
                                                    $current_time->add(new DateInterval('PT30M'));
                                                    $slot = $current_time->format('H:i:s');
                                                @endphp
                                            }
                                            cell.setAttribute('value', '{{ $slot }}');


                                            cell.innerHTML = "big potato";
                                            cell.classList.add('reserved');
                                            cell.style.textAlign = "center";
                                            @if ($reservation->rate == $reservation->paid)
                                            {
                                                cell.style.backgroundColor = "lawngreen";
                                            }
                                            @else
                                            {
                                                cell.style.backgroundColor = "red";
                                            }
                                            @endif
                                            @php
                                                $current_time->add(new DateInterval('PT30M'));
                                                $slot = $current_time->format('H:i:s');
                                            @endphp

                                            //convert reservation->start to datetime form
                                            //minus start time of booking, get diff in minutes, divide by 30 min cell
                                            //create cell
                                            //get end time - start time divide 30 min, create special cell for booking
                                            //start_time = reservation->end


                                            @php
                                            $start_time = DateTime::createFromFormat("Y-m-d H:i:s", $reservation->end);
                                            @endphp
                                        @endforeach
                                    @endif


                                    @foreach($rates_arr[$facility->id] as $key => $rate)
                                        @php
                                            $convertToDateTime = DateTime::createFromFormat('H:i:s', $rate->sort_rates);
                                            if ($current_time >= $convertToDateTime)
                                            {
                                                $cellRate = $rate->rate;
                                                echo 'alert("latest ' . $cellRate . '");';
                                                //but when to break if there's multiple past 24:00:00 rate?
                                            }
                                            else
                                            {
                                                echo 'alert("final ' . $cellRate . '");';
                                                break;
                                            }
                                        @endphp
                                    @endforeach


                                    @php
                                    $timeInterval = ($start_time->diff($period->end));
                                    $intervalInSeconds = (new DateTime())->setTimeStamp(0)->add($timeInterval)->getTimeStamp();
                                    $intervalInMinutes = $intervalInSeconds/60;
                                    $intervalInSpans = $intervalInMinutes/30;
                                    @endphp
                                    @for ($i = 0; $i < $intervalInSpans; $i++)
                                        @foreach($rates_arr[$facility->id] as $key => $rate)
                                            @php
                                                $convertToDateTime = DateTime::createFromFormat('H:i:s', $rate->sort_rates);
                                                if ($current_time >= $convertToDateTime)
                                                {
                                                    $cellRate = $rate->rate;
                                                    echo 'alert("latest ' . $cellRate . '");';
                                                    //but when to break if there's multiple past 24:00:00 rate?
                                                }
                                                else
                                                {
                                                    echo 'alert("final ' . $cellRate . '");';
                                                    break;
                                                }
                                            @endphp
                                        @endforeach
                                        cell = row.insertCell(counterv2++);
                                        cell.innerHTML = "potato";
                                        cell.classList.add('highlight');
                                        cell.setAttribute('value', '{{ $cellRate }}');
                                        cell.setAttribute('curtime', '{{ $slot }}' );
                                        @php
                                            $current_time->add(new DateInterval('PT30M'));
                                            $slot = $current_time->format('H:i:s');
                                            echo 'alert("then ' . $slot . '");';
                                        @endphp
                                    @endfor


                                @endif
                            }
                            @endforeach


                            //generate table
                        }
                    </script>
                    @endforeach
                </div>
            </div>


            <div class="col-11">
                <div class="table-responsive">
                    <table class="table" id="myTable">
                        <thead>
                            <tr>
                                <th>
                                    <div class="dropdown"><button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button" style="background-color:#563775;"><i class="fa fa-star"></i></button>
                                        <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">First Item</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
                                    </div>
                                </th>

                                @foreach ($period as $dt)
                                    <th>{{ $dt->format("g:i A") }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        button = document.getElementById("{{'category'.$categories->first()->id}}");
        button.click();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

@endsection