@extends('admin.layouts.app')

@section('title', 'Add Activity - ' . $tripTemplate->title)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-800">Add Activity</h1>
            <p class="text-sm text-gray-500">{{ $tripTemplate->title }} - {{ $tripTemplate->destination->name }}</p>
        </div>
        <a href="{{ route('admin.trip-templates.show', $tripTemplate) }}"
           class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 rounded-md">
            ← Back to Template
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Form -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b">
                    <h2 class="text-lg font-medium text-gray-800">Activity Details</h2>
                </div>
                <div class="p-6">
                    <form action="{{ route('admin.template-activities.store', $tripTemplate) }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Title -->
                        <div class="mb-4">
                            <label for="title" class="block text-sm font-medium text-gray-700">Activity Title <span class="text-red-500">*</span></label>
                            <input type="text" id="title" name="title"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('title') border-red-500 @enderror"
                                value="{{ old('title') }}" required>
                            @error('title')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea id="description" name="description" rows="3"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                            @error('description')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Location -->
                        <div class="mb-4">
                            <label for="location" class="block text-sm font-medium text-gray-700">Location <span class="text-red-500">*</span></label>
                            <input type="text" id="location" name="location"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('location') border-red-500 @enderror"
                                value="{{ old('location') }}" required>
                            @error('location')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Day and Time -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label for="day_number" class="block text-sm font-medium text-gray-700">Day <span class="text-red-500">*</span></label>
                                <select id="day_number" name="day_number"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('day_number') border-red-500 @enderror"
                                    required>
                                    <option value="">Select Day</option>
                                    @for($i = 1; $i <= $tripTemplate->duration_days; $i++)
                                        <option value="{{ $i }}" {{ old('day_number') == $i ? 'selected' : '' }}>Day {{ $i }}</option>
                                    @endfor
                                </select>
                                @error('day_number')
                                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="start_time" class="block text-sm font-medium text-gray-700">Start Time <span class="text-red-500">*</span></label>
                                <input type="time" id="start_time" name="start_time"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('start_time') border-red-500 @enderror"
                                    value="{{ old('start_time') }}" required>
                                @error('start_time')
                                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="end_time" class="block text-sm font-medium text-gray-700">End Time <span class="text-red-500">*</span></label>
                                <input type="time" id="end_time" name="end_time"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('end_time') border-red-500 @enderror"
                                    value="{{ old('end_time') }}" required>
                                @error('end_time')
                                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Time of Day -->
                        <div class="mb-4">
                            <label for="time_of_day" class="block text-sm font-medium text-gray-700">Time of Day</label>
                            <select id="time_of_day" name="time_of_day"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('time_of_day') border-red-500 @enderror">
                                <option value="">Select</option>
                                <option value="morning" {{ old('time_of_day') == 'morning' ? 'selected' : '' }}>Morning</option>
                                <option value="afternoon" {{ old('time_of_day') == 'afternoon' ? 'selected' : '' }}>Afternoon</option>
                                <option value="evening" {{ old('time_of_day') == 'evening' ? 'selected' : '' }}>Evening</option>
                            </select>
                            @error('time_of_day')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Cost and Category -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="cost" class="block text-sm font-medium text-gray-700">Cost (USD)</label>
                                <input type="number" id="cost" name="cost" step="0.01" min="0"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('cost') border-red-500 @enderror"
                                    value="{{ old('cost') }}">
                                @error('cost')
                                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="category" class="block text-sm font-medium text-gray-700">Category <span class="text-red-500">*</span></label>
                                <select id="category" name="category"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('category') border-red-500 @enderror"
                                    required>
                                    <option value="">Select Category</option>
                                    @foreach(['sightseeing','cultural','adventure','food','entertainment','shopping','relaxation','transportation','accommodation','other'] as $category)
                                        <option value="{{ $category }}" {{ old('category') == $category ? 'selected' : '' }}>
                                            {{ ucfirst($category) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category')
                                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Image Upload -->
                        <div class="mb-4">
                            <label for="image" class="block text-sm font-medium text-gray-700">Activity Image</label>
                            <input type="file" id="image" name="image" accept="image/*"
                                class="mt-1 block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border file:border-gray-300 file:text-sm file:font-semibold file:bg-gray-100 hover:file:bg-gray-200 @error('image') border-red-500 @enderror">
                            @error('image')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-gray-500 mt-1">Upload an image for this activity (optional)</p>
                        </div>

                        <!-- Checkboxes -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Activity Options</label>
                            <div class="flex items-center gap-6">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="is_optional" id="is_optional" value="1"
                                           class="rounded text-blue-600 focus:ring-blue-500"
                                           {{ old('is_optional') ? 'checked' : '' }}>
                                    <span class="ml-2 text-sm text-gray-700">Optional Activity</span>
                                </label>

                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="is_highlight" id="is_highlight" value="1"
                                           class="rounded text-yellow-600 focus:ring-yellow-500"
                                           {{ old('is_highlight') ? 'checked' : '' }}>
                                    <span class="ml-2 text-sm text-gray-700">Highlight Activity</span>
                                </label>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="flex justify-between">
                            <a href="{{ route('admin.trip-templates.show', $tripTemplate) }}"
                               class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-200">
                                Cancel
                            </a>
                            <button type="submit"
                                    class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M17 16v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-1h14zM3 7v7h14V7a2 2 0 00-2-2h-3V3a1 1 0 00-1-1h-2a1 1 0 00-1 1v2H5a2 2 0 00-2 2z"/>
                                </svg>
                                Add Activity
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar: Existing Activities -->
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-lg font-medium text-gray-800 mb-4">Existing Activities</h2>
            @if($existingActivities->isNotEmpty())
                @foreach($existingActivities as $day => $activities)
                    <div class="mb-4">
                        <h3 class="text-blue-600 font-semibold mb-2">Day {{ $day }}</h3>
                        @foreach($activities as $activity)
                            <div class="text-sm text-gray-600 mb-1">
                                {{ $activity->start_time }} - {{ $activity->end_time }}: {{ $activity->title }}
                                @if($activity->is_optional)
                                    <span class="ml-2 text-xs text-gray-500 bg-gray-200 rounded px-2 py-0.5">Optional</span>
                                @endif
                                @if($activity->is_highlight)
                                    <span class="ml-1 text-xs bg-yellow-100 text-yellow-700 rounded px-2 py-0.5">Highlight</span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endforeach
            @else
                <p class="text-sm text-gray-500">No activities added yet.</p>
            @endif
        </div>
    </div>
</div>
@endsection