@extends('front.include.app')
@section('content')
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>
    {{-- @dd($content) --}}
    <section class="inner-banner p-0">
        <img src="{{ $data->getFirstMediaUrl('program_banner_img') }}" alt="image" class="img-fluid">
        <div class="container">
            <div class="inner-banner__content">
                <h1>
                    <a href="javascript:history.back()" class="back-arrow">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    {{ $content['main_heading'] ?? ''}}
                </h1>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><span>//</span></li>
                    <li><a href="">{{ $content['main_heading'] ?? ''}}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="event-calendar">
        <div class="container">
            <div class="training__title text-center mb-5">
                <h5 class="subhead">Time to Fitness</h5>
                <h2 class="mainhead">Classes Schedule</h2>
            </div>
            <div class="event__filter">
                <button type="button" class="themeBtn active" data-class-type="all">View All</button>
                @foreach ($classTypes as $classType)
                    <button type="button" class="themeBtn" data-class-type="{{ $classType->id ?? ''}}">
                        {{ $classType->name ?? ''}}
                    </button>
                @endforeach
            </div>
            <div class="event__table table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th><i class="far fa-clock"></i></th>
                            <th>Monday</th>
                            <th>Tuesday</th>
                            <th>Wednesday</th>
                            <th>Thursday</th>
                            <th>Friday</th>
                            <th>Saturday</th>
                            <th>Sunday</th>
                        </tr>
                    </thead>
                    <tbody id="scheduleTableBody">
                        @foreach ($uniqueSchedules as $classSchedule)
                            <tr>
                                <th>{{ \Carbon\Carbon::parse($classSchedule->start_time)->format('h:i') }}
                                    - {{ \Carbon\Carbon::parse($classSchedule->end_time)->format('h:i') }}</th>
                                <td class="{{ $classSchedule->day == 'Monday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Monday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                                <td class="{{ $classSchedule->day == 'Tuesday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Tuesday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                                <td class="{{ $classSchedule->day == 'Wednesday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Wednesday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                                <td class="{{ $classSchedule->day == 'Thursday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Thursday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                                <td class="{{ $classSchedule->day == 'Friday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Friday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                                <td class="{{ $classSchedule->day == 'Saturday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Saturday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                                <td class="{{ $classSchedule->day == 'Sunday' ? 'event-tag' : '' }}">
                                    @if ($classSchedule->day == 'Sunday')
                                        <h6>{{ $classSchedule->classType->name }}
                                            <span>{{ $classSchedule->trainer->name }}</span>
                                        </h6>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <x-motivation-section :compData="$compData" :compContent="$compContent" />

    <x-ideal-section :compData="$compData" :compContent="$compContent" />

    <x-testimonial-section :testimonials="$testimonials" />
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.event__filter button').on('click', function() {
                $('.event__filter button').removeClass('active');
                $(this).addClass('active');
                var classTypeId = $(this).data('class-type');
                $.ajax({
                    url: '{{ route('class.schedules') }}',
                    type: 'POST',
                    data: {
                        classType_id: classTypeId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log(response);
                        var tableBody = '';
                        $.each(response.classSchedules, function(index, schedule) {
                            var startTime = moment(schedule.start_time, 'HH:mm:ss')
                                .format('hh:mm');
                            var endTime = moment(schedule.end_time, 'HH:mm:ss').format(
                                'hh:mm');
                            tableBody += `
                            <tr>
                                <th>${startTime} - ${endTime}</th>
                                <td class="${schedule.day == 'Monday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Monday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                                <td class="${schedule.day == 'Tuesday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Tuesday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                                <td class="${schedule.day == 'Wednesday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Wednesday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                                <td class="${schedule.day == 'Thursday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Thursday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                                <td class="${schedule.day == 'Friday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Friday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                                <td class="${schedule.day == 'Saturday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Saturday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                                <td class="${schedule.day == 'Sunday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Sunday' ? `
                                                <h6>${schedule.class_type.name}
                                                    <span>${schedule.trainer.name}</span>
                                                </h6>
                                            ` : ''}
                                </td>
                            </tr>
                        `;
                        });
                        $('#scheduleTableBody').html(tableBody);
                    },
                    error: function() {
                        console.log('Error fetching class schedules.');
                    }
                });
            });
        });
    </script>
@endsection