@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>
        .card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }
        .header, .section-header {
            font-weight: bold;
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        .btn {
            border-radius: 6px;
            margin-right: 5px;
        }
        .badge {
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9em;
        }
        .attendees-list, .action-points-table, .meeting-details {
            width: 100%;
            margin-top: 10px;
        }
        .action-points-table th, .action-points-table td {
            padding: 10px;
            border-bottom: 1px solid #e9ecef;
        }
        .meeting-info {
            color: #6c757d;
            font-size: 0.9em;
        }
        .timeline-item {
            margin-top: 15px;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            color: #6c757d;
        }
        .timeline-icon {
            font-size: 1.2em;
            margin-right: 10px;
        }
    </style>
@stop

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

@section('content')
    <div class="container-fluid">
        <!-- Meeting Overview Card -->
        <div class="card">
            <div class="header">Project Kick-Off Meeting</div>
            <p class="meeting-info">
                Meeting Date: Oct. 24, 2021 | Start Time: 9:15 PM | <span class="badge">45 minutes</span><br>
                Kick-off meeting with the client to discuss ideas around the airtable bases. We need to share our suggestions for the database design and get feedback from the client.
            </p>
            <button class="btn btn-secondary">Edit Meeting</button>
            <button class="btn btn-primary">Send Meeting Invite to Attendees</button>
        </div>

        <!-- Attendees and Action Points Section -->
        <div class="card">
            <div class="row">
                <div class="col-md-6">
                    <div class="section-header">Meeting Attendees</div>
                    <button class="btn btn-outline-secondary btn-sm">Add Meeting Attendees</button>
                    <table class="attendees-list">
                        <thead>
                        <tr>
                            <th>Name Surname</th>
                            <th>Email Address</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Bertha Kgokong</td>
                            <td>bertha.kgokong@tatisoftware.com</td>
                            <td><button class="btn btn-outline-danger btn-sm">Delete Attendee</button></td>
                        </tr>
                        <tr>
                            <td>Matshidiso Jones</td>
                            <td>matshidisi@gmail.com</td>
                            <td><button class="btn btn-outline-danger btn-sm">Delete Attendee</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <div class="section-header">Meeting Action Points</div>
                    <button class="btn btn-outline-secondary btn-sm">Add New Meeting Action Point</button>
                    <table class="action-points-table">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Create YouTube Video<br><small>Create a video of testing, happiness, and joy.</small></td>

                            <td><button class="btn btn-link"><i class="fas fa-ellipsis-h"></i></button></td>
                        </tr>
                        <tr>
                            <td>Testing Action 3<br><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small></td>

                            <td><button class="btn btn-link"><i class="fas fa-ellipsis-h"></i></button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Additional Meeting Information -->
        <div class="card">
            <div class="section-header">Additional Meeting Details</div>
            <div class="row">
                <div class="col-md-6">
                    <p><strong>Email:</strong> premiereveteransllc@gmail.com</p>
                    <p><strong>Location:</strong> +1 858-212-3828</p>
                    <p><strong>Additional Guests:</strong> booking@realtimemarketing.com</p>
                    <p><strong>Text Reminder Number:</strong> +1 858-212-3828</p>
                    <p><strong>Invitee Time Zone:</strong> Eastern Time - US & Canada</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Meeting Hosts:</strong> Hosts will attend this meeting</p>
                    <p><strong>Email Follow-Up:</strong> Scheduled to send at 2:00am - Saturday, 2 November 2024</p>
                    <button class="btn btn-outline-primary btn-sm">Add Meeting Notes</button>
                    <button class="btn btn-link btn-sm">Edit Event Type</button>
                    <button class="btn btn-link btn-sm">Schedule Invitee Again</button>
                </div>
            </div>
        </div>

        <!-- Timeline -->
        <div class="card">
            <div class="section-header">Timeline</div>
            <div class="timeline-item">
                <i class="fas fa-circle timeline-icon"></i> New event booked: Giannis Dones booked a Real Time Marketing Discovery Call on 26 Oct 2024 at 2:22am +08
            </div>
            <div class="timeline-item">
                <i class="fas fa-circle timeline-icon"></i> Ran on 1 Nov 2024 at 12:02am +08
            </div>
            <div class="timeline-item">
                <i class="fas fa-envelope timeline-icon"></i> Email reminder to invitee scheduled for 2:00am - Saturday, 2 November 2024
            </div>
        </div>

        <!-- Back Button -->
        <a href="#" class="btn btn-outline-primary">Go Back</a>
    </div>
@stop

@section('page_scripts')
    <script>
        // Add any necessary interactivity scripts here
    </script>
@stop