@extends('layouts.admin')

@section('header')
    {{ isset($teamMember) ? 'Edit Team Member' : 'Create Team Member' }}
@endsection

@section('content')
    <div class="max-w-4xl mx-auto space-y-6">
        <!-- Header Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        {{ isset($teamMember) ? 'Edit Team Member' : 'Add New Team Member' }}
                    </h1>
                    <p class="text-gray-600 mt-1">Fill in the details below to add or update a team member</p>
                </div>
                <div class="hidden sm:flex items-center space-x-2 text-sm text-gray-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>Required fields marked with *</span>
                </div>
            </div>
        </div>

        <!-- Main Form -->
        <form action="{{ isset($teamMember) ? route('admin.team.update', $teamMember) : route('admin.team.store') }}" 
              method="POST" 
              enctype="multipart/form-data" 
              class="space-y-6">
            @csrf
            @if(isset($teamMember))
                @method('PUT')
            @endif

            <!-- Basic Information Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-rose-50 to-red-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <div class="w-8 h-8 bg-rose-500 rounded-lg flex items-center justify-center mr-3">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                        </div>
                        Basic Information
                    </h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Name -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-900 mb-2">
                            Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" id="name" 
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('name') border-red-500 bg-red-50 @enderror"
                            placeholder="Enter team member's full name..."
                            value="{{ old('name', isset($teamMember) ? $teamMember->name : '') }}" required>
                        @error('name')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div>
                        <label for="slug" class="block text-sm font-medium text-gray-900 mb-2">
                            URL Slug
                        </label>
                        <input type="text" name="slug" id="slug"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('slug') border-red-500 bg-red-50 @enderror"
                            placeholder="team-member-url-slug"
                            value="{{ old('slug', isset($teamMember) ? $teamMember->slug : '') }}">
                        @error('slug')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Position -->
                    <div>
                        <label for="position" class="block text-sm font-medium text-gray-900 mb-2">
                            Position <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="position" id="position" 
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('position') border-red-500 bg-red-50 @enderror"
                            placeholder="Job title or position..."
                            value="{{ old('position', isset($teamMember) ? $teamMember->position : '') }}" required>
                        @error('position')
                            <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Bio -->
                    <div>
                        <label for="bio" class="block text-sm font-medium text-gray-900 mb-2">
                            Bio <span class="text-red-500">*</span>
                        </label>
                        <textarea name="bio" id="bio" rows="5"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('bio') border-red-500 bg-red-50 @enderror"
                            placeholder="Team member's biography and professional background..." required>{{ old('bio', isset($teamMember) ? $teamMember->bio : '') }}</textarea>
                        @error('bio')
                            <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                            </svg>
                        </div>
                        Contact & Social Media
                    </h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-900 mb-2">
                            Email Address
                        </label>
                        <input type="email" name="email" id="email" 
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('email') border-red-500 bg-red-50 @enderror"
                            placeholder="team.member@example.com"
                            value="{{ old('email', isset($teamMember) ? $teamMember->email : '') }}">
                        @error('email')
                            <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Social Media Links -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label for="linkedin" class="block text-sm font-medium text-gray-900 mb-2">
                                LinkedIn URL
                            </label>
                            <input type="url" name="linkedin" id="linkedin"
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('linkedin') border-red-500 bg-red-50 @enderror"
                                placeholder="https://linkedin.com/in/username"
                                value="{{ old('linkedin', isset($teamMember) ? $teamMember->linkedin : '') }}">
                            @error('linkedin')
                                <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="twitter" class="block text-sm font-medium text-gray-900 mb-2">
                                Twitter URL
                            </label>
                            <input type="url" name="twitter" id="twitter"
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('twitter') border-red-500 bg-red-50 @enderror"
                                placeholder="https://twitter.com/username"
                                value="{{ old('twitter', isset($teamMember) ? $teamMember->twitter : '') }}">
                            @error('twitter')
                                <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="github" class="block text-sm font-medium text-gray-900 mb-2">
                                GitHub URL
                            </label>
                            <input type="url" name="github" id="github"
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200 @error('github') border-red-500 bg-red-50 @enderror"
                                placeholder="https://github.com/username"
                                value="{{ old('github', isset($teamMember) ? $teamMember->github : '') }}">
                            @error('github')
                                <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Image & Settings Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-purple-50 to-violet-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                        </div>
                        Image & Settings
                    </h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Image Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-900 mb-2">
                            Profile Picture
                        </label>
                        <div class="mt-1 flex items-center">
                            <div class="relative">
                                @if(isset($teamMember) && $teamMember->image)
                                <div class="bg-gray-100 rounded-full h-24 w-24 flex items-center justify-center overflow-hidden">
                                    <img src="{{ asset('storage/' . $teamMember->image) }}" alt="{{ $teamMember->name }}" class="h-full w-full object-cover">
                                </div>
                                @else
                                <div class="bg-gray-100 rounded-full h-24 w-24 flex items-center justify-center">
                                    <svg class="h-12 w-12 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                                    </svg>
                                </div>
                                @endif
                            </div>
                            <div class="ml-5">
                                <label for="image" class="bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                                    Choose file...
                                    <input type="file" name="image" id="image" class="sr-only" accept="image/*">
                                </label>
                                <p class="mt-2 text-xs text-gray-500">
                                    PNG, JPG, or GIF up to 2MB
                                </p>
                                @error('image')
                                    <p class="text-red-600 text-sm mt-1 flex items-center">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Sort Order -->
                        <div>
                            <label for="sort_order" class="block text-sm font-medium text-gray-900 mb-2">
                                Sort Order
                            </label>
                            <input type="number" name="sort_order" id="sort_order" 
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-rose-500 focus:ring-2 focus:ring-rose-200 transition-all duration-200"
                                placeholder="0"
                                value="{{ old('sort_order', isset($teamMember) ? $teamMember->sort_order : 0) }}">
                            <p class="text-xs text-gray-500 mt-1">Lower numbers will appear first</p>
                        </div>

                        <!-- Toggles -->
                        <div class="space-y-4">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_featured" id="is_featured" 
                                       class="w-5 h-5 text-rose-600 border-gray-300 rounded focus:ring-rose-500"
                                       {{ old('is_featured', isset($teamMember) && $teamMember->is_featured ? 'checked' : '') }}>
                                <label for="is_featured" class="ml-2 block text-sm text-gray-900">
                                    Featured Team Member
                                </label>
                            </div>

                            <div class="flex items-center">
                                <input type="checkbox" name="publish" id="publish"
                                       class="w-5 h-5 text-rose-600 border-gray-300 rounded focus:ring-rose-500"
                                       {{ old('is_published', isset($teamMember) && $teamMember->is_published ? 'checked' : 'checked') }}>
                                <label for="publish" class="ml-2 block text-sm text-gray-900">
                                    Publish Team Member
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex items-center justify-end space-x-4 pt-6">
                <a href="{{ route('admin.team.index') }}" 
                   class="px-6 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 transition-all duration-200">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-3 text-sm font-medium text-white bg-rose-600 rounded-lg hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 shadow-sm hover:shadow-md transition-all duration-200">
                    {{ isset($teamMember) ? 'Update Team Member' : 'Add Team Member' }}
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto generate slug from name
            document.getElementById('name').addEventListener('input', function() {
                const slug = document.getElementById('slug');
                if (!slug.value.trim()) {
                    slug.value = this.value
                        .toLowerCase()
                        .replace(/[^\w\s-]/g, '')
                        .replace(/[\s_-]+/g, '-')
                        .replace(/^-+|-+$/g, '');
                }
            });

            // Preview uploaded image
            document.getElementById('image').addEventListener('change', function(e) {
                if (e.target.files.length > 0) {
                    const file = e.target.files[0];
                    const reader = new FileReader();
                    const preview = document.querySelector('.rounded-full');
                    
                    reader.onload = function(e) {
                        preview.innerHTML = `<img src="${e.target.result}" alt="Image Preview" class="h-full w-full object-cover">`;
                    }
                    
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
    @endpush
@endsection