@extends('home_layout.master_sidebar')

@section('page_styles')
    <!-- Include FontAwesome -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .container-fluid {
            max-width: 900px;
            margin-top: 20px;
        }
        .section-title {
            font-weight: bold;
            font-size: 1.5em;
            margin-bottom: 30px;
            color: #343a40;
        }
        .form-group {
            margin-bottom: 25px;
        }
        .form-group label {
            font-weight: 600;
            display: block;
            margin-bottom: 10px;
            color: #495057;
        }
        .form-group input[type="text"],
        .form-group input[type="url"],
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            font-size: 1em;
            color: #495057;
        }
        .form-group textarea {
            resize: vertical;
        }
        .color-picker {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .color-picker .color-indicator {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #6a1b9a;
            border: 2px solid #ced4da;
            cursor: pointer;
        }
        .btn-save {
            display: block;
            width: 100%;
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 15px;
            font-size: 1.1em;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            border-radius: 6px;
            margin-top: 30px;
            transition: background-color 0.3s;
        }
        .btn-save:hover {
            background-color: #218838;
        }
        .sub-section {
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid #dee2e6;
        }
        /* Styles for Bootstrap nav-tabs */
        .nav-tabs {
            margin-bottom: 25px;
        }
        .nav-tabs .nav-link {
            border: 1px solid #dee2e6;
            border-bottom: none;
            border-radius: 0.25rem 0.25rem 0 0;
            color: #495057;
            padding: 10px 20px;
            font-size: 1em;
            background-color: #f8f9fa;
        }
        .nav-tabs .nav-link.active {
            color: #007bff;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }
        .tab-content {
            border: 1px solid #dee2e6;
            padding: 20px;
            border-radius: 0 0 0.25rem 0.25rem;
            background-color: #fff;
        }
        /* Additional styles for error messages */
        .text-danger {
            color: #dc3545 !important;
            font-size: 0.875em;
            margin-top: 5px;
        }
        /* Style for alert messages */
        .alert {
            margin-top: 20px;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Create Service',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Events', 'link' => route('events.index')],
           ['title' => 'Create Service', 'link' => route('events.create')]
       ]
   ])
@stop

@section('content')
    <div class="container-fluid">
        <form action="{{ route('events.store') }}" method="POST">
            @csrf

            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>There were some problems with your input:</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Event Details Section -->
            <div class="section-title">Service Details</div>

            <div class="form-group">
                <label for="event_name">Service Name *</label>
                <input type="text" id="event_name" name="event_name" placeholder="Enter event name" value="{{ old('event_name') }}" required>
                @error('event_name')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group color-picker">
                <label for="color">Service Color *</label>
                <div class="color-indicator" id="color_indicator"></div>
                <input type="color" id="color" name="color" value="{{ old('color', '#6a1b9a') }}" hidden>
                @error('color')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label for="duration">Duration *</label>
                <select id="duration" name="duration">
                    <option value="5" {{ old('duration') == '5' ? 'selected' : '' }}>5 min</option>
                    <option value="10" {{ old('duration') == '10' ? 'selected' : '' }}>10 min</option>
                    <option value="15" {{ old('duration') == '15' ? 'selected' : '' }}>15 min</option>
                    <option value="30" {{ old('duration', '30') == '30' ? 'selected' : '' }}>30 min</option>
                    <option value="45" {{ old('duration') == '45' ? 'selected' : '' }}>45 min</option>
                    <option value="60" {{ old('duration') == '60' ? 'selected' : '' }}>60 min</option>
                    <option value="custom" {{ old('duration') == 'custom' ? 'selected' : '' }}>Custom</option>
                </select>
                @error('duration')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label for="description">Description/Instructions</label>
                <textarea id="description" name="description" rows="4" placeholder="Write a summary and any details your invitee should know about the event.">{{ old('description') }}</textarea>
                @error('description')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <!-- Location Section -->
            <div class="sub-section">
                <div class="section-title">Location</div>
                <ul class="nav nav-tabs" id="locationTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="meeting-link-tab" data-bs-toggle="tab" data-bs-target="#meeting-link" type="button" role="tab" aria-controls="meeting-link" aria-selected="true" data-location-type="meeting_link">Meeting Link</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location" type="button" role="tab" aria-controls="location" aria-selected="false" data-location-type="location">Location</button>
                    </li>
                </ul>
                <div class="tab-content" id="locationTabContent">
                    <div class="tab-pane fade show active" id="meeting-link" role="tabpanel" aria-labelledby="meeting-link-tab">
                        <div class="form-group">
                            <label for="meeting_link">Meeting Link *</label>
                            <input type="url" id="meeting_link" name="meeting_link" placeholder="Enter your meeting link (e.g., Zoom, Skype)" value="{{ old('meeting_link') }}">
                            @error('meeting_link')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                        <div class="form-group">
                            <label for="autocomplete">Location *</label>
                            <input type="text" id="autocomplete" name="location" placeholder="Enter location" value="{{ old('location') }}">
                            @error('location')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Hosts and Invitees Section -->
            <div class="sub-section">
                <div class="section-title">Hosts and Invitees</div>
                <div class="form-group">
                    <label>Host</label>
                    <p>{{ Auth::user()->name }} (you)</p>
                </div>
                <div class="form-group">
                    <input type="checkbox" id="allow_guests" name="allow_guests" {{ old('allow_guests') ? 'checked' : '' }}>
                    <label for="allow_guests">Allow invitees to add guests</label>
                </div>
            </div>

            <!-- Scheduling Settings Section -->
            <div class="sub-section">
                <div class="section-title">Scheduling Settings</div>
                <div class="form-group">
                    <label for="date_range">Date Range</label>
                    <select id="date_range" name="date_range">
                        <option value="60" {{ old('date_range') == '60' ? 'selected' : '' }}>60 calendar days</option>
                        <option value="30" {{ old('date_range') == '30' ? 'selected' : '' }}>30 days</option>
                        <option value="indefinite" {{ old('date_range') == 'indefinite' ? 'selected' : '' }}>Indefinitely into the future</option>
                        <!-- Add more options as needed -->
                    </select>
                    @error('date_range')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="availability">Hours and Calendar Settings</label>
                    <p>Weekdays, 9 am - 5 pm</p>
                    <!-- You might want to make this dynamic or editable -->
                </div>
            </div>

            <!-- Event Limits Section -->
            <div class="sub-section">
                <div class="section-title">Event Limits</div>
                <div class="form-group">
                    <label for="buffer_time_before">Buffer Time (Before)</label>
                    <select id="buffer_time_before" name="buffer_time_before">
                        <option value="0" {{ old('buffer_time_before') == '0' ? 'selected' : '' }}>None</option>
                        <option value="10" {{ old('buffer_time_before') == '10' ? 'selected' : '' }}>10 minutes</option>
                        <option value="15" {{ old('buffer_time_before') == '15' ? 'selected' : '' }}>15 minutes</option>
                        <!-- Add more options as needed -->
                    </select>
                    @error('buffer_time_before')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="buffer_time_after">Buffer Time (After)</label>
                    <select id="buffer_time_after" name="buffer_time_after">
                        <option value="0" {{ old('buffer_time_after') == '0' ? 'selected' : '' }}>None</option>
                        <option value="10" {{ old('buffer_time_after') == '10' ? 'selected' : '' }}>10 minutes</option>
                        <option value="15" {{ old('buffer_time_after') == '15' ? 'selected' : '' }}>15 minutes</option>
                        <!-- Add more options as needed -->
                    </select>
                    @error('buffer_time_after')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="min_notice">Minimum Notice</label>
                    <select id="min_notice" name="min_notice">
                        <option value="4" {{ old('min_notice') == '4' ? 'selected' : '' }}>4 hours</option>
                        <option value="24" {{ old('min_notice') == '24' ? 'selected' : '' }}>1 day</option>
                        <!-- Add more options as needed -->
                    </select>
                    @error('min_notice')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="daily_limit">Daily Limit</label>
                    <input type="number" id="daily_limit" name="daily_limit" placeholder="Enter maximum events per day" value="{{ old('daily_limit') }}">
                    @error('daily_limit')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <!-- Additional Options Section -->
            <div class="sub-section">
                <div class="section-title">Additional Options</div>
                <div class="form-group">
                    <label for="timezone">Time Zone Display</label>
                    <select id="timezone" name="timezone">
                        <option value="invitee" {{ old('timezone') == 'invitee' ? 'selected' : '' }}>Use invitee's time zone</option>
                        <option value="account" {{ old('timezone') == 'account' ? 'selected' : '' }}>Use account time zone</option>
                    </select>
                    @error('timezone')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="start_increment">Start Time Increments</label>
                    <select id="start_increment" name="start_increment">
                        <option value="15" {{ old('start_increment') == '15' ? 'selected' : '' }}>15 min</option>
                        <option value="30" {{ old('start_increment', '30') == '30' ? 'selected' : '' }}>30 min</option>
                        <option value="60" {{ old('start_increment') == '60' ? 'selected' : '' }}>1 hour</option>
                    </select>
                    @error('start_increment')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <!-- Hidden Location Type Input -->
            <input type="hidden" name="location_type" id="location_type" value="meeting_link">

            <!-- Save Button -->
            <button type="submit" class="btn-save">Save Event</button>
        </form>
    </div>
@stop

@section('page_scripts')
    <!-- Include Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Color picker
            const colorIndicator = document.getElementById('color_indicator');
            const colorInput = document.getElementById('color');

            colorIndicator.style.backgroundColor = colorInput.value;

            colorIndicator.addEventListener('click', function () {
                colorInput.click();
            });

            colorInput.addEventListener('change', function () {
                colorIndicator.style.backgroundColor = this.value;
            });

            // Location Type Handling
            const locationTabs = document.querySelectorAll('#locationTab button');
            const locationTypeInput = document.getElementById('location_type');

            function updateLocationType() {
                const activeTab = document.querySelector('#locationTab .nav-link.active');
                locationTypeInput.value = activeTab.getAttribute('data-location-type');
            }

            locationTabs.forEach(function(tab) {
                tab.addEventListener('shown.bs.tab', function () {
                    updateLocationType();
                });
            });

            updateLocationType(); // Initialize on page load
        });

        // Initialize Google Places Autocomplete
        function initAutocomplete() {
            var autocomplete = new google.maps.places.Autocomplete(
                document.getElementById('autocomplete'),
                {
                    types: ['geocode']
                });
        }

        // Load the Google Places API script
        function loadGooglePlacesScript() {
            var script = document.createElement('script');
            script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete';
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }

        document.addEventListener('DOMContentLoaded', function () {
            loadGooglePlacesScript();
        });
    </script>
@stop