@extends('home_layout.master_sidebar')

@section('page_styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .filter-section, .view-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .meeting-list-view, .meeting-table-view {
            display: none;
        }
        .meeting-list-view.active, .meeting-table-view.active {
            display: block;
        }
        .date-separator {
            font-weight: bold;
            color: #333;
            padding: 10px 0;
            border-bottom: 1px solid #e9ecef;
            margin-top: 20px;
        }
        .meeting-card {
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            background-color: #ffffff;
        }
        .meeting-time {
            color: #007bff;
            font-weight: bold;
        }
        .meeting-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #6c757d;
        }
        .meeting-table {
            width: 100%;
            border-collapse: collapse;
        }
        .meeting-table th, .meeting-table td {
            padding: 10px;
            border: 1px solid #e9ecef;
            text-align: left;
        }
        .meeting-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Meetings',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Meetings', 'link' => '#']
       ]
   ])
@stop

@section('content')
    <div class="container-fluid">
        <!-- Filter Section -->
        <div class="filter-section">
            <select class="form-select" style="width: 200px;">
                <option selected>Real Time Marketing Sales</option>
            </select>
            <span>Displaying {{ count($meetings) }} of {{ count($meetings) }} Events</span>
            <button class="btn btn-outline-secondary">Export</button>
            <button class="btn btn-outline-secondary">Filter</button>
            <button class="btn btn-outline-primary view-toggle" id="toggleView">Switch to Table View</button>
        </div>

        <!-- List View -->
        <div class="meeting-list-view active">
            @php $currentDate = ''; @endphp
            @foreach($meetings as $meeting)
                @if ($currentDate !== $meeting['date'])
                    @php $currentDate = $meeting['date']; @endphp
                    <div class="date-separator">{{ $currentDate }}</div>
                @endif
                <div class="meeting-card">
                    <div class="meeting-time">{{ $meeting['time'] }}</div>
                    <div class="meeting-details">
                        <div>
                            <strong>{{ $meeting['user'] }}</strong> with {{ $meeting['team_members'] }} team members<br>
                            Event type: <span class="text-primary">{{ $meeting['event_type'] }}</span>
                        </div>
                        <div>
                            {{ $meeting['hosts'] }} hosts | {{ $meeting['non_hosts'] }} non-hosts
                        </div>
                        <button class="btn btn-link">Details</button>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Table View -->
        <div class="meeting-table-view">
            <table class="meeting-table">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th>User</th>
                    <th>Team Members</th>
                    <th>Event Type</th>
                    <th>Hosts</th>
                    <th>Non-hosts</th>
                    <th>Details</th>
                </tr>
                </thead>
                <tbody>
                @foreach($meetings as $meeting)
                    <tr>
                        <td>{{ $meeting['date'] }}</td>
                        <td>{{ $meeting['time'] }}</td>
                        <td>{{ $meeting['user'] }}</td>
                        <td>{{ $meeting['team_members'] }}</td>
                        <td>{{ $meeting['event_type'] }}</td>
                        <td>{{ $meeting['hosts'] }}</td>
                        <td>{{ $meeting['non_hosts'] }}</td>
                        <td><button class="btn btn-link">Details</button></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('page_scripts')
    <script>
        document.getElementById('toggleView').addEventListener('click', function() {
            var listView = document.querySelector('.meeting-list-view');
            var tableView = document.querySelector('.meeting-table-view');
            var toggleButton = document.getElementById('toggleView');

            // Toggle active class
            listView.classList.toggle('active');
            tableView.classList.toggle('active');

            // Update button text
            if (listView.classList.contains('active')) {
                toggleButton.textContent = 'Switch to Table View';
            } else {
                toggleButton.textContent = 'Switch to List View';
            }
        });
    </script>
@stop