@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Edit Founder</h1>
            <p class="text-gray-600 mt-1">Update founder/team member information</p>
        </div>
        <a href="{{ route('admin.founders.index') }}"
            class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded transition">
            <i class="fas fa-arrow-left mr-2"></i> Back to List
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-8">
        <form action="{{ route('admin.founders.update', $founder) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- Basic Information -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b">Basic Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Name (English) -->
                    <div>
                        <label for="name_en" class="block text-gray-700 font-bold mb-2">
                            Name (English) <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name_en" id="name_en" value="{{ old('name_en', $founder->name_en) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('name_en') border-red-500 @enderror"
                            required>
                        @error('name_en')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Name (Bangla) -->
                    <div>
                        <label for="name_bn" class="block text-gray-700 font-bold mb-2">
                            Name (Bangla)
                        </label>
                        <input type="text" name="name_bn" id="name_bn" value="{{ old('name_bn', $founder->name_bn) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('name_bn') border-red-500 @enderror">
                        @error('name_bn')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Designation (English) -->
                    <div>
                        <label for="designation_en" class="block text-gray-700 font-bold mb-2">
                            Designation (English) <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="designation_en" id="designation_en"
                            value="{{ old('designation_en', $founder->designation_en) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('designation_en') border-red-500 @enderror"
                            placeholder="e.g., Founder & CEO" required>
                        @error('designation_en')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Designation (Bangla) -->
                    <div>
                        <label for="designation_bn" class="block text-gray-700 font-bold mb-2">
                            Designation (Bangla)
                        </label>
                        <input type="text" name="designation_bn" id="designation_bn"
                            value="{{ old('designation_bn', $founder->designation_bn) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('designation_bn') border-red-500 @enderror">
                        @error('designation_bn')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Statement -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b">Statement</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Statement (English) -->
                    <div>
                        <label for="statement_en" class="block text-gray-700 font-bold mb-2">
                            Statement (English) <span class="text-red-500">*</span>
                        </label>
                        <textarea name="statement_en" id="statement_en" rows="6"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('statement_en') border-red-500 @enderror"
                            placeholder="Your inspiring message or vision statement..."
                            required>{{ old('statement_en', $founder->statement_en) }}</textarea>
                        @error('statement_en')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Statement (Bangla) -->
                    <div>
                        <label for="statement_bn" class="block text-gray-700 font-bold mb-2">
                            Statement (Bangla)
                        </label>
                        <textarea name="statement_bn" id="statement_bn" rows="6"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('statement_bn') border-red-500 @enderror">{{ old('statement_bn', $founder->statement_bn) }}</textarea>
                        @error('statement_bn')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Biography -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b">Biography (Optional)</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Biography (English) -->
                    <div>
                        <label for="bio_en" class="block text-gray-700 font-bold mb-2">
                            Biography (English)
                        </label>
                        <textarea name="bio_en" id="bio_en" rows="6"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('bio_en') border-red-500 @enderror"
                            placeholder="Detailed biography, achievements, experience...">{{ old('bio_en', $founder->bio_en) }}</textarea>
                        @error('bio_en')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Biography (Bangla) -->
                    <div>
                        <label for="bio_bn" class="block text-gray-700 font-bold mb-2">
                            Biography (Bangla)
                        </label>
                        <textarea name="bio_bn" id="bio_bn" rows="6"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('bio_bn') border-red-500 @enderror">{{ old('bio_bn', $founder->bio_bn) }}</textarea>
                        @error('bio_bn')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Image -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b">Profile Image</h2>

                <!-- Current Image -->
                @if($founder->image)
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2">Current Image</label>
                    <img src="{{ asset('storage/' . $founder->image) }}" alt="{{ $founder->name_en }}"
                        class="w-48 h-48 object-cover rounded-lg shadow-md">
                </div>
                @endif

                <div>
                    <label for="image" class="block text-gray-700 font-bold mb-2">
                        {{ $founder->image ? 'Upload New Image (Optional)' : 'Upload Image' }}
                    </label>
                    <input type="file" name="image" id="image" accept="image/jpeg,image/png,image/jpg,image/webp"
                        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('image') border-red-500 @enderror">
                    <p class="text-sm text-gray-500 mt-1">
                        Recommended: Square image (500x500px), Max 2MB, Format: JPG, PNG, WEBP
                    </p>
                    @error('image')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Contact Information -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b">Contact Information (Optional)</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-gray-700 font-bold mb-2">
                            Email
                        </label>
                        <input type="email" name="email" id="email" value="{{ old('email', $founder->email) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror"
                            placeholder="email@example.com">
                        @error('email')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Phone -->
                    <div>
                        <label for="phone" class="block text-gray-700 font-bold mb-2">
                            Phone
                        </label>
                        <input type="text" name="phone" id="phone" value="{{ old('phone', $founder->phone) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('phone') border-red-500 @enderror"
                            placeholder="+82 10 1234 5678">
                        @error('phone')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- LinkedIn -->
                    <div>
                        <label for="linkedin" class="block text-gray-700 font-bold mb-2">
                            LinkedIn URL
                        </label>
                        <input type="url" name="linkedin" id="linkedin"
                            value="{{ old('linkedin', $founder->linkedin) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('linkedin') border-red-500 @enderror"
                            placeholder="https://linkedin.com/in/username">
                        @error('linkedin')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Facebook -->
                    <div>
                        <label for="facebook" class="block text-gray-700 font-bold mb-2">
                            Facebook URL
                        </label>
                        <input type="url" name="facebook" id="facebook"
                            value="{{ old('facebook', $founder->facebook) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('facebook') border-red-500 @enderror"
                            placeholder="https://facebook.com/username">
                        @error('facebook')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Display Settings -->
            <div class="mb-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pb-2 border-b">Display Settings</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Order -->
                    <div>
                        <label for="order" class="block text-gray-700 font-bold mb-2">
                            Display Order
                        </label>
                        <input type="number" name="order" id="order" value="{{ old('order', $founder->order) }}"
                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('order') border-red-500 @enderror"
                            placeholder="0">
                        <p class="text-sm text-gray-500 mt-1">Lower numbers appear first (0, 1, 2, ...)</p>
                        @error('order')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Active Status -->
                    <div>
                        <label class="block text-gray-700 font-bold mb-2">
                            Status
                        </label>
                        <div class="flex items-center">
                            <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active',
                                $founder->is_active) ? 'checked' : '' }}
                            class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <label for="is_active" class="ml-2 text-gray-700">
                                Display on website
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Buttons -->
            <div class="flex items-center justify-end gap-4 pt-6 border-t">
                <a href="{{ route('admin.founders.index') }}"
                    class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition">
                    Cancel
                </a>
                <button type="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition">
                    <i class="fas fa-save mr-2"></i> Update Founder
                </button>
            </div>
        </form>
    </div>
</div>
@endsection