@extends('home_layout.master_sidebar')

@section('page_styles')
    <!-- Include FontAwesome and Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* Container */
        .container-fluid {
            max-width: 900px;
            margin-top: 20px;
        }
        /* Card Section Styling */
        .card-section {
            margin-bottom: 20px;
        }
        .card-section .card-header {
            background-color: #007bff;
            color: #fff;
            font-weight: 600;
            font-size: 1.2rem;
            padding: 0.75rem 1.25rem;
        }
        .card-section .card-body {
            padding: 1.25rem;
        }
        /* Form Controls */
        .form-label {
            font-weight: 500;
        }
        .form-control, .form-select {
            border-radius: 0.5rem;
            font-size: 0.95rem;
        }
        /* Color Picker */
        .color-picker .color-indicator {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #ced4da;
            cursor: pointer;
        }
        /* Save Button */
        .btn-save {
            background-color: #28a745;
            color: #fff;
            border-radius: 0.5rem;
            font-weight: 600;
            padding: 12px;
            font-size: 1rem;
        }
        .btn-save:hover {
            background-color: #218838;
        }
        /* Modern Switches (for toggles) */
        .form-switch .form-check-input {
            width: 2.5em;
            height: 1.5em;
        }
        .form-switch .form-check-input:checked {
            background-color: #28a745;
            border-color: #28a745;
        }
        /* Responsive User Grid */
        .user-grid .col {
            margin-bottom: 0.75rem;
        }
        /* Alert Overrides */
        .alert {
            margin-top: 1rem;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
        'title' => isset($event) ? 'Edit Service' : 'Create Service',
        'breadcrumbs' => [
            ['title' => 'Home', 'link' => '#'],
            ['title' => 'Events', 'link' => route('events.index')],
            ['title' => isset($event) ? 'Edit Service' : 'Create Service', 'link' => isset($event) ? route('events.edit', $event->id) : route('events.create')]
        ]
    ])
@stop

@section('content')
    <div class="container-fluid">
        <form action="{{ isset($event) ? route('events.upsert', $event->id) : route('events.upsert') }}" method="POST">
            @csrf

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

            <!-- Service Details Section -->
            <div class="card card-section">
                <div class="card-header">Service Details</div>
                <div class="card-body">
                    <!-- Service Name -->
                    <div class="mb-3">
                        <label for="event_name" class="form-label">Service Name *</label>
                        <input type="text" id="event_name" name="event_name" class="form-control" placeholder="Enter service name" value="{{ old('event_name', $event->event_name ?? '') }}" required>
                        @error('event_name')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Payment & Cancellation Options -->
                    <div class="row g-3 mb-3">
                        <!-- Payment Method Options -->
                        <div class="col-md-3">
                            <label class="form-label d-block">Payment Required?</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_paid" name="is_paid" value="1" {{ old('is_paid', $event->is_paid ?? true) ? 'checked' : '' }}>
                            </div>
                            @error('is_paid')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label d-block">Payment Method</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="payment_type" id="payment_stripe" value="stripe"
                                    {{ old('payment_type', $event->payment_type ?? 'stripe') == 'stripe' ? 'checked' : '' }}>
                                <label class="form-check-label" for="payment_stripe">Stripe Checkout</label>
                            </div>
                            <div class="form-check form-check-inline" style="display:none;">
                                <input class="form-check-input" type="radio" name="payment_type" id="payment_deposit" value="deposit"
                                    {{ old('payment_type', $event->payment_type ?? 'stripe') == 'deposit' ? 'checked' : '' }}>
                                <label class="form-check-label" for="payment_deposit">Deposit (Bank Transfer)</label>
                            </div>
                            @error('payment_type')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6" style="display: none;">
                            <label for="stripe_id" class="form-label">Stripe Product/Plan ID</label>
                            <input type="text" id="stripe_id" name="stripe_id" class="form-control" placeholder="Stripe ID" value="{{ old('stripe_id', $event->stripe_id ?? '') }}">
                            @error('stripe_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="col-md-3">
                            <label for="cancel_type" class="form-label">Cancellation Type</label>
                            <select id="cancel_type" name="cancel_type" class="form-select">
                                <option value="manual" {{ old('cancel_type', $event->cancel_type ?? 'manual') == 'manual' ? 'selected' : '' }}>Manual</option>
                                <option value="auto" {{ old('cancel_type', $event->cancel_type ?? 'manual') == 'auto' ? 'selected' : '' }}>Auto</option>
                            </select>
                            @error('cancel_type')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Price -->
                    <div class="mb-3">
                        <label for="price" class="form-label">Price *</label>
                        <input type="text" id="price" name="price" class="form-control" placeholder="Enter price" value="{{ old('price', $event->price ?? '') }}" required>
                        @error('price')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Color Picker & Duration -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label for="color" class="form-label">Color *</label>
                            <div class="d-flex align-items-center">
                                <div class="color-indicator me-2" id="color_indicator"></div>
                                <input type="color" id="color" name="color" class="form-control" style="max-width: 60px;" value="{{ old('color', $event->color ?? '#6a1b9a') }}">
                            </div>
                            @error('color')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="duration" class="form-label">Duration *</label>
                            <select id="duration" name="duration" class="form-select">
                                <option value="5" {{ old('duration', $event->duration ?? '30') == '5' ? 'selected' : '' }}>5 min</option>
                                <option value="10" {{ old('duration', $event->duration ?? '30') == '10' ? 'selected' : '' }}>10 min</option>
                                <option value="15" {{ old('duration', $event->duration ?? '30') == '15' ? 'selected' : '' }}>15 min</option>
                                <option value="30" {{ old('duration', $event->duration ?? '30') == '30' ? 'selected' : '' }}>30 min</option>
                                <option value="45" {{ old('duration', $event->duration ?? '30') == '45' ? 'selected' : '' }}>45 min</option>
                                <option value="60" {{ old('duration', $event->duration ?? '30') == '60' ? 'selected' : '' }}>60 min</option>
                                <option value="custom" {{ old('duration', $event->duration ?? '30') == 'custom' ? 'selected' : '' }}>Custom</option>
                            </select>
                            @error('duration')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

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

            <!-- Deposit Details Section (Shown only if Deposit is selected) -->
            <div class="card card-section" id="deposit_details_section" style="display: none;">
                <div class="card-header">Deposit Details</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="deposit_bank_name" class="form-label">Bank Name</label>
                        <input type="text" id="deposit_bank_name" name="deposit_bank_name" class="form-control" placeholder="Enter your bank name" value="{{ old('deposit_bank_name', $event->deposit_bank_name ?? '') }}">
                        @error('deposit_bank_name')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="deposit_account_number" class="form-label">Account Number</label>
                        <input type="text" id="deposit_account_number" name="deposit_account_number" class="form-control" placeholder="Enter your account number" value="{{ old('deposit_account_number', $event->deposit_account_number ?? '') }}">
                        @error('deposit_account_number')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="deposit_routing_number" class="form-label">Routing Number</label>
                        <input type="text" id="deposit_routing_number" name="deposit_routing_number" class="form-control" placeholder="Enter your routing number" value="{{ old('deposit_routing_number', $event->deposit_routing_number ?? '') }}">
                        @error('deposit_routing_number')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="deposit_instructions" class="form-label">Deposit Instructions</label>
                        <textarea id="deposit_instructions" name="deposit_instructions" rows="3" class="form-control" placeholder="Additional deposit instructions">{{ old('deposit_instructions', $event->deposit_instructions ?? '') }}</textarea>
                        @error('deposit_instructions')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Location Section -->
            <div class="card card-section" style="display: none;">
                <div class="card-header">Location</div>
                <div class="card-body">
                    <ul class="nav nav-tabs mb-3" id="locationTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ old('location_type', $event->location_type ?? 'meeting_link') == 'meeting_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="{{ old('location_type', $event->location_type ?? 'meeting_link') == 'meeting_link' ? 'true' : 'false' }}" data-location-type="meeting_link">Meeting Link</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ old('location_type', $event->location_type ?? '') == 'location' ? 'active' : '' }}" id="location-tab" data-bs-toggle="tab" data-bs-target="#location" type="button" role="tab" aria-controls="location" aria-selected="{{ old('location_type', $event->location_type ?? '') == 'location' ? 'true' : 'false' }}" data-location-type="location">Location</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="locationTabContent">
                        <div class="tab-pane fade {{ old('location_type', $event->location_type ?? 'meeting_link') == 'meeting_link' ? 'show active' : '' }}" id="meeting-link" role="tabpanel" aria-labelledby="meeting-link-tab">
                            <div class="mb-3">
                                <label for="meeting_link" class="form-label">Meeting Link *</label>
                                <input type="text" id="meeting_link" name="meeting_link" class="form-control" placeholder="Enter your meeting link (e.g., Zoom, Skype)" value="{{ old('meeting_link', $event->meeting_link ?? '') }}">
                                @error('meeting_link')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="tab-pane fade {{ old('location_type', $event->location_type ?? '') == 'location' ? 'show active' : '' }}" id="location" role="tabpanel" aria-labelledby="location-tab">
                            <div class="mb-3">
                                <label for="autocomplete" class="form-label">Location *</label>
                                <input type="text" id="autocomplete" name="location" class="form-control" placeholder="Enter location" value="{{ old('location', $event->location ?? '') }}">
                                @error('location')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Hosts and Invitees Section (Hidden as before) -->
            <div class="card card-section d-none">
                <div class="card-header">Hosts and Invitees</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Host</label>
                        <p class="mb-0">{{ Auth::user()->name }} (you)</p>
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input type="checkbox" class="form-check-input" id="allow_guests" name="allow_guests" {{ old('allow_guests', $event->allow_guests ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label" for="allow_guests">Allow invitees to add guests</label>
                    </div>
                </div>
            </div>

            <!-- Scheduling Settings Section -->
            <div class="card card-section">
                <div class="card-header">Scheduling Settings</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="date_range" class="form-label">Date Range</label>
                        <select id="date_range" name="date_range" class="form-select">
                            <option value="60" {{ old('date_range', $event->date_range ?? '') == '60' ? 'selected' : '' }}>60 calendar days</option>
                            <option value="30" {{ old('date_range', $event->date_range ?? '') == '30' ? 'selected' : '' }}>30 days</option>
                            <option value="indefinite" {{ old('date_range', $event->date_range ?? '') == 'indefinite' ? 'selected' : '' }}>Indefinitely into the future</option>
                        </select>
                        @error('date_range')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Hours and Calendar Settings</label>
                        <p class="mb-0">Weekdays, 9 am - 5 pm</p>
                    </div>
                </div>
            </div>

            <!-- Event Limits Section -->
            <div class="card card-section">
                <div class="card-header">Event Limits</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="buffer_time_before" class="form-label">Buffer Time (Before)</label>
                        <select id="buffer_time_before" name="buffer_time_before" class="form-select">
                            <option value="0" {{ old('buffer_time_before', $event->buffer_time_before ?? '0') == '0' ? 'selected' : '' }}>None</option>
                            <option value="10" {{ old('buffer_time_before', $event->buffer_time_before ?? '0') == '10' ? 'selected' : '' }}>10 minutes</option>
                            <option value="15" {{ old('buffer_time_before', $event->buffer_time_before ?? '0') == '15' ? 'selected' : '' }}>15 minutes</option>
                        </select>
                        @error('buffer_time_before')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="buffer_time_after" class="form-label">Buffer Time (After)</label>
                        <select id="buffer_time_after" name="buffer_time_after" class="form-select">
                            <option value="0" {{ old('buffer_time_after', $event->buffer_time_after ?? '0') == '0' ? 'selected' : '' }}>None</option>
                            <option value="10" {{ old('buffer_time_after', $event->buffer_time_after ?? '0') == '10' ? 'selected' : '' }}>10 minutes</option>
                            <option value="15" {{ old('buffer_time_after', $event->buffer_time_after ?? '0') == '15' ? 'selected' : '' }}>15 minutes</option>
                        </select>
                        @error('buffer_time_after')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="min_notice" class="form-label">Minimum Notice</label>
                        <select id="min_notice" name="min_notice" class="form-select">
                            <option value="4" {{ old('min_notice', $event->min_notice ?? '') == '4' ? 'selected' : '' }}>4 hours</option>
                            <option value="24" {{ old('min_notice', $event->min_notice ?? '') == '24' ? 'selected' : '' }}>1 day</option>
                        </select>
                        @error('min_notice')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="daily_limit" class="form-label">Daily Limit</label>
                        <input type="number" id="daily_limit" name="daily_limit" class="form-control" placeholder="Enter maximum events per day" value="{{ old('daily_limit', $event->daily_limit ?? '') }}">
                        @error('daily_limit')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

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

            <!-- Category Selection Section -->
            <div class="card card-section">
                <div class="card-header">Category Selection</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="category_id" class="form-label">Category *</label>
                        <select id="category_id" name="category_id" class="form-select" required>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $event->category_id ?? '') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                            @endforeach
                        </select>
                        @error('category_id')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Display Order Section -->
            <div class="card card-section">
                <div class="card-header">Display Order</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="order" class="form-label">Display Order</label>
                        <input type="number" id="order" name="order" class="form-control" placeholder="Enter display order" value="{{ old('order', $event->order ?? '') }}">
                        @error('order')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- User Assignment Section -->
            <div class="card card-section">
                <div class="card-header">Users Who Can Support This Service</div>
                <div class="card-body">
                    <fieldset>
                        <legend class="mb-3 fw-bold">Select Users <span class="text-danger">*</span></legend>
                        <div class="row row-cols-2 row-cols-md-3 g-3 user-grid">
                            @foreach($users as $user)
                                <div class="col">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="user_{{ $user->id }}" name="user_ids[]" value="{{ $user->id }}" {{ (isset($event) && $event->users->contains($user->id)) || (is_array(old('user_ids')) && in_array($user->id, old('user_ids'))) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="user_{{ $user->id }}">{{ $user->name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @error('user_ids')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </fieldset>
                </div>
            </div>

            <!-- Hidden Location Type Input -->
            <input type="hidden" name="location_type" id="location_type" value="{{ old('location_type', $event->location_type ?? 'meeting_link') }}">

            <!-- Save Button -->
            <div class="d-grid">
                <button type="submit" class="btn btn-save">{{ isset($event) ? 'Update Service' : 'Save Service' }}</button>
            </div>
        </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 functionality
            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', updateLocationType);
            });
            updateLocationType(); // Initialize on page load

            // Toggle Deposit Details Section based on Payment Method selection
            function toggleDepositDetails() {
                const selectedPayment = document.querySelector('input[name="payment_type"]:checked').value;
                const depositSection = document.getElementById('deposit_details_section');
                if (selectedPayment === 'deposit') {
                    depositSection.style.display = 'block';
                } else {
                    depositSection.style.display = 'none';
                }
            }
            const paymentRadios = document.querySelectorAll('input[name="payment_type"]');
            paymentRadios.forEach(function(radio) {
                radio.addEventListener('change', toggleDepositDetails);
            });
            toggleDepositDetails(); // 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', loadGooglePlacesScript);
    </script>
@stop