@extends('layouts.admin')

@section('header')
    {{ isset($message) ? 'Edit Onboarding Message' : 'Create Onboarding Message' }}
@endsection

@section('content')
    <form action="{{ isset($message) ? route('admin.onboarding.update', $message) : route('admin.onboarding.store') }}" 
          method="POST" 
          enctype="multipart/form-data" 
          class="max-w-4xl mx-auto">
        @csrf
        @if(isset($message))
            @method('PUT')
        @endif

        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <!-- Title -->
            <div class="mb-6">
                <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title *</label>
                <input type="text" name="title" id="title" 
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('title') border-red-500 @enderror"
                    value="{{ old('title', isset($message) ? $message->title : '') }}" required>
                @error('title')
                    <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Type -->
            <div class="mb-6">
                <label for="type" class="block text-gray-700 text-sm font-bold mb-2">Message Type *</label>
                <select name="type" id="type" 
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('type') border-red-500 @enderror"
                    required>
                    <option value="">Select Type</option>
                    <option value="welcome" {{ old('type', isset($message) ? $message->type : '') == 'welcome' ? 'selected' : '' }}>
                        Welcome
                    </option>
                    <option value="announcement" {{ old('type', isset($message) ? $message->type : '') == 'announcement' ? 'selected' : '' }}>
                        Announcement
                    </option>
                    <option value="update" {{ old('type', isset($message) ? $message->type : '') == 'update' ? 'selected' : '' }}>
                        Update
                    </option>
                    <option value="promotion" {{ old('type', isset($message) ? $message->type : '') == 'promotion' ? 'selected' : '' }}>
                        Promotion
                    </option>
                </select>
                @error('type')
                    <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Content -->
            <div class="mb-6">
                <label for="content" class="block text-gray-700 text-sm font-bold mb-2">Content *</label>
                <textarea name="content" id="content" rows="5"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('content') border-red-500 @enderror"
                    required>{{ old('content', isset($message) ? $message->content : '') }}</textarea>
                @error('content')
                    <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Image -->
            <div class="mb-6">
                <label for="image" class="block text-gray-700 text-sm font-bold mb-2">
                    Image {{ isset($message) && $message->image ? '(Leave empty to keep current image)' : '' }}
                </label>
                <input type="file" name="image" id="image" 
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('image') border-red-500 @enderror">
                @error('image')
                    <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                @enderror

                @if(isset($message) && $message->image)
                    <div class="mt-2">
                        <p class="text-sm text-gray-600 mb-1">Current Image:</p>
                        <img src="{{ asset('storage/onboarding/' . $message->image) }}" 
                            alt="{{ $message->title }}" 
                            class="max-h-40 border border-gray-200">
                    </div>
                @endif
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Display From -->
                <div class="mb-6">
                    <label for="display_from" class="block text-gray-700 text-sm font-bold mb-2">Display From</label>
                    <input type="date" name="display_from" id="display_from" 
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('display_from') border-red-500 @enderror"
                        value="{{ old('display_from', isset($message) && $message->display_from ? $message->display_from->format('Y-m-d') : '') }}">
                    @error('display_from')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Display Until -->
                <div class="mb-6">
                    <label for="display_until" class="block text-gray-700 text-sm font-bold mb-2">Display Until</label>
                    <input type="date" name="display_until" id="display_until" 
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('display_until') border-red-500 @enderror"
                        value="{{ old('display_until', isset($message) && $message->display_until ? $message->display_until->format('Y-m-d') : '') }}">
                    @error('display_until')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Display Order -->
            <div class="mb-6">
                <label for="display_order" class="block text-gray-700 text-sm font-bold mb-2">Display Order</label>
                <input type="number" name="display_order" id="display_order" min="1"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('display_order') border-red-500 @enderror"
                    value="{{ old('display_order', isset($message) ? $message->display_order : ($highestOrder + 1)) }}">
                <p class="text-gray-500 text-xs mt-1">Lower numbers will be displayed first.</p>
                @error('display_order')
                    <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Is Active -->
            <div class="mb-6">
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" id="is_active" 
                        class="form-checkbox h-5 w-5 text-green-600 transition duration-150 ease-in-out"
                        {{ old('is_active', isset($message) ? $message->is_active : true) ? 'checked' : '' }}>
                    <label for="is_active" class="ml-2 block text-gray-700">
                        Active
                    </label>
                </div>
                <p class="text-gray-500 text-xs mt-1">Only active messages will be displayed.</p>
                @error('is_active')
                    <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Buttons -->
            <div class="flex justify-end space-x-4">
                <a href="{{ route('admin.onboarding.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    Cancel
                </a>
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    {{ isset($message) ? 'Update' : 'Create' }} Message
                </button>
            </div>
        </div>
    </form>
@endsection