@extends('layouts.admin')

@section('content')
<div class="">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-semibold text-gray-900">Add New Mahostavam</h1>
                    <a href="{{ route('admin.mahostavams.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700">
                        Back to List
                    </a>
                </div>

                @if ($errors->any())
                    <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
                        <ul class="list-disc pl-5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('admin.mahostavams.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                            <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('name') border-red-500 @enderror" id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
                            <input type="date" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('date') border-red-500 @enderror" id="date" name="date" value="{{ old('date') }}" required>
                            @error('date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="duration" class="block text-sm font-medium text-gray-700">Duration</label>
                            <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('duration') border-red-500 @enderror" id="duration" name="duration" value="{{ old('duration') }}" placeholder="e.g., 9 days" required>
                            @error('duration')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="image" class="block text-sm font-medium text-gray-700">Mahostavam Image</label>
                            <div class="mt-1 flex items-center gap-4">
                                <input type="file" name="image" id="image" accept="image/*" class="hidden" onchange="previewImage(this)">
                                <button type="button" onclick="document.getElementById('image').click()" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    Choose Image
                                </button>
                                <div id="imagePreview" class="flex items-center gap-2 ml-4 hidden">
                                    <img src="" alt="Preview" class="h-16 w-16 object-cover rounded-lg border">
                                    <button type="button" onclick="removeImage()" class="text-red-600 hover:text-red-800 font-semibold text-sm">Remove</button>
                                </div>
                            </div>
                            <p class="mt-1 text-xs text-gray-400">PNG, JPG, GIF up to 2MB</p>
                            @error('image')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="md:col-span-2">
                            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('description') border-red-500 @enderror" id="description" name="description" rows="3" required>{{ old('description') }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">Highlights</label>
                            <div id="highlights-container">
                                <div class="flex mb-2 gap-2">
                                    <input type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" name="highlights[]" placeholder="Enter highlight">
                                    <button type="button" class="btn btn-danger remove-highlight text-red-600">Remove</button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-secondary mt-2 bg-gray-200 px-3 py-1 rounded" id="add-highlight">Add Highlight</button>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">Schedule</label>
                            <div id="schedule-container">
                                <div class="flex mb-2 gap-2 schedule-row">
                                    <input type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" name="schedule[0][key]" placeholder="Day/Time">
                                    <input type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" name="schedule[0][value]" placeholder="Event">
                                    <button type="button" class="btn btn-danger remove-schedule text-red-600">Remove</button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-secondary mt-2 bg-gray-200 px-3 py-1 rounded" id="add-schedule">Add Schedule Item</button>
                        </div>
                        <div class="md:col-span-2">
                            <label for="significance" class="block text-sm font-medium text-gray-700">Significance</label>
                            <textarea class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('significance') border-red-500 @enderror" id="significance" name="significance" rows="3">{{ old('significance') }}</textarea>
                            @error('significance')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="md:col-span-2 flex items-center mt-2">
                            <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                            <label for="is_active" class="ml-2 block text-sm text-gray-700">Active</label>
                        </div>
                    </div>
                    <div class="border-t border-gray-200 pt-6 flex justify-end mt-10">
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 disabled:opacity-25 transition">
                            Create Mahostavam
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function() {
        // Add highlight
        $('#add-highlight').click(function() {
            const highlightHtml = `
                <div class=\"flex mb-2 gap-2\">
                    <input type=\"text\" class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500\" name=\"highlights[]\" placeholder=\"Enter highlight\">
                    <button type=\"button\" class=\"btn btn-danger remove-highlight text-red-600\">Remove</button>
                </div>
            `;
            $('#highlights-container').append(highlightHtml);
        });
        // Remove highlight
        $(document).on('click', '.remove-highlight', function() {
            $(this).closest('.flex').remove();
        });
        let scheduleIndex = $('#schedule-container .schedule-row').length;
        $('#add-schedule').click(function() {
            const scheduleHtml = `
                <div class=\"flex mb-2 gap-2 schedule-row\">
                    <input type=\"text\" class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500\" name=\"schedule[${scheduleIndex}][key]\" placeholder=\"Day/Time\">
                    <input type=\"text\" class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500\" name=\"schedule[${scheduleIndex}][value]\" placeholder=\"Event\">
                    <button type=\"button\" class=\"btn btn-danger remove-schedule text-red-600\">Remove</button>
                </div>
            `;
            $('#schedule-container').append(scheduleHtml);
            scheduleIndex++;
        });
        $(document).on('click', '.remove-schedule', function() {
            $(this).closest('.schedule-row').remove();
        });
    });

    function previewImage(input) {
        const preview = document.getElementById('imagePreview');
        const previewImg = preview.querySelector('img');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
                preview.classList.remove('hidden');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    function removeImage() {
        const input = document.getElementById('image');
        const preview = document.getElementById('imagePreview');
        input.value = '';
        preview.classList.add('hidden');
        preview.querySelector('img').src = '';
    }
</script>
@endpush
@endsection