@extends('layouts.admin')

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<style>
    .hour-list {
        list-style-type: none;
        padding: 0;
    }
    .hour-list-item {
        padding: 10px;
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f9f9f9;
        cursor: pointer;
    }
    .hour-list-item:hover {
        background-color: #f1f1f1;
    }
</style>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        Video Scheduling
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div id='calendar'></div>
            </div>
            <div class="col-md-4">
                <h4 id="selected-date-header">Select a date</h4>
                <div id="hours-container" style="display: none;">
                    <ul id="hour-list" class="hour-list">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-labelledby="scheduleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scheduleModalLabel">Schedule Video</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ route('admin.video-schedule-items.store') }}" method="POST">
          @csrf
          <div class="modal-body">
            <input type="hidden" name="datetime" id="schedule-datetime">
            <input type="hidden" name="status" value="processed">
            <div class="form-group">
                <label for="video_id">Video</label>
                <select name="video_id" id="video_id" class="form-control" required>
                    @foreach($videos as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="repeat">Repeat</label>
                <select name="repeat" id="repeat" class="form-control">
                    <option value="0">No</option>
                    <option value="1">Yes</option>
                </select>
            </div>
            <div id="repeat-options" style="display: none;">
                <div class="form-group">
                    <label for="repeat_number">Repeat Number</label>
                    <input type="number" name="repeat_number" id="repeat_number" class="form-control" min="1" value="1">
                </div>
                <div class="form-group">
                    <label for="stop_datetime">Stop Time</label>
                    <input type="datetime-local" name="stop_datetime" id="stop_datetime" class="form-control">
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save Schedule</button>
          </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('scripts')
@parent
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var scheduleItems = @json($scheduleItems->map(function($item) {
        return [
            'datetime' => \Carbon\Carbon::parse($item->datetime)->format('Y-m-d H:i'),
            'video_name' => $item->video->name ?? 'Scheduled'
        ];
    }));

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        dateClick: function(info) {
            $('#selected-date-header').text('Hours for ' + info.dateStr);
            var hoursContainer = $('#hours-container');
            var hourList = $('#hour-list');
            hourList.empty();

            var schedulesForDate = scheduleItems.filter(function(item) {
                return item.datetime.startsWith(info.dateStr);
            });

            for (var i = 0; i < 24; i++) {
                var hour = i.toString().padStart(2, '0') + ':00';
                var listItem = $('<li class="hour-list-item" data-hour="' + i + '">' + hour + '</li>');

                var scheduleForHour = schedulesForDate.find(function(item) {
                    return parseInt(item.datetime.substr(11, 2)) === i;
                });

                if (scheduleForHour) {
                    listItem.css('background-color', '#d4edda');
                    listItem.append(' - ' + scheduleForHour.video_name);
                }

                hourList.append(listItem);
            }

            hoursContainer.show();

            $('.hour-list-item').on('click', function() {
                var clickedHour = $(this).data('hour');
                var date = new Date(info.dateStr);
                date.setHours(clickedHour);
                date.setMinutes(0);
                date.setSeconds(0);

                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0');
                var day = date.getDate().toString().padStart(2, '0');
                var hours = date.getHours().toString().padStart(2, '0');
                var minutes = date.getMinutes().toString().padStart(2, '0');

                var formattedDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
                var displayDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;

                $('#schedule-datetime').val(formattedDateTime);
                $('#scheduleModalLabel').text('Schedule Video for ' + displayDateTime);
                $('#scheduleModal').modal('show');
            });
        },
        events: scheduleItems.map(function(item) {
            return {
                title: item.video_name,
                start: item.datetime,
                allDay: false
            };
        })
    });
    calendar.render();

    $('#repeat').on('change', function() {
        if ($(this).val() == '1') {
            $('#repeat-options').show();
        } else {
            $('#repeat-options').hide();
        }
    });

    // When modal is shown, if repeat is yes, show options
    $('#scheduleModal').on('shown.bs.modal', function () {
        if ($('#repeat').val() == '1') {
            $('#repeat-options').show();
        } else {
            $('#repeat-options').hide();
        }
    });

    // Reset form on modal close
    $('#scheduleModal').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
        $('#repeat-options').hide();
    });
});
</script>
@endsection