@extends('layouts.admin')

@section('title', 'Add Founder')
@section('page-title', 'Add New Founder')

@section('content')
<div class="mb-6">
    <a href="{{ route('admin.founders.index') }}" class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to Founders
    </a>
</div>

<form action="{{ route('admin.founders.store') }}" method="POST" enctype="multipart/form-data"
    class="bg-white rounded-lg shadow-md p-6">
    @csrf

    <!-- Basic Information -->
    <div class="mb-8">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Basic Information</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Name (English) -->
            <div>
                <label for="name_en" class="block text-sm font-semibold text-gray-700 mb-2">
                    Name (English) <span class="text-red-500">*</span>
                </label>
                <input type="text" name="name_en" id="name_en" value="{{ old('name_en') }}" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('name_en') border-red-500 @enderror"
                    placeholder="e.g., John Doe">
                @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-sm font-semibold text-gray-700 mb-2">
                    Name (Bangla)
                </label>
                <input type="text" name="name_bn" id="name_bn" value="{{ old('name_bn') }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @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-sm font-semibold text-gray-700 mb-2">
                    Designation (English) <span class="text-red-500">*</span>
                </label>
                <input type="text" name="designation_en" id="designation_en" value="{{ old('designation_en') }}"
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('designation_en') border-red-500 @enderror"
                    placeholder="e.g., Founder & CEO">
                @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-sm font-semibold text-gray-700 mb-2">
                    Designation (Bangla)
                </label>
                <input type="text" name="designation_bn" id="designation_bn" value="{{ old('designation_bn') }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @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">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Statement</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="statement_en" class="block text-sm font-semibold text-gray-700 mb-2">
                    Statement (English) <span class="text-red-500">*</span>
                </label>
                <textarea name="statement_en" id="statement_en" rows="6" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('statement_en') border-red-500 @enderror"
                    placeholder="Founder's message or statement">{{ old('statement_en') }}</textarea>
                @error('statement_en')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

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

    <!-- Biography (Optional) -->
    <div class="mb-8">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Biography (Optional)</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="bio_en" class="block text-sm font-semibold text-gray-700 mb-2">
                    Biography (English)
                </label>
                <textarea name="bio_en" id="bio_en" rows="6"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('bio_en') border-red-500 @enderror"
                    placeholder="Detailed biography">{{ old('bio_en') }}</textarea>
                @error('bio_en')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="bio_bn" class="block text-sm font-semibold text-gray-700 mb-2">
                    Biography (Bangla)
                </label>
                <textarea name="bio_bn" id="bio_bn" rows="6"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('bio_bn') border-red-500 @enderror">{{ old('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">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Image</h3>

        <div>
            <label for="image" class="block text-sm font-semibold text-gray-700 mb-2">
                Profile Image <span class="text-red-500">*</span>
            </label>
            <input type="file" name="image" id="image" accept="image/*" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('image') border-red-500 @enderror">
            @error('image')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
            <p class="text-sm text-gray-500 mt-1">Max size: 2MB. Formats: JPG, PNG, WEBP. Recommended: Square image
                (500x500px)</p>
        </div>
    </div>

    <!-- Contact Information -->
    <div class="mb-8">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Contact Information</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                    Email Address
                </label>
                <input type="email" name="email" id="email" value="{{ old('email') }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('email') border-red-500 @enderror"
                    placeholder="founder@example.com">
                @error('email')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">
                    Phone Number
                </label>
                <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('phone') border-red-500 @enderror"
                    placeholder="+880 1711-352344">
                @error('phone')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="linkedin" class="block text-sm font-semibold text-gray-700 mb-2">
                    LinkedIn Profile URL
                </label>
                <input type="url" name="linkedin" id="linkedin" value="{{ old('linkedin') }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @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>

            <div>
                <label for="facebook" class="block text-sm font-semibold text-gray-700 mb-2">
                    Facebook Profile URL
                </label>
                <input type="url" name="facebook" id="facebook" value="{{ old('facebook') }}"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @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">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Display Settings</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="order" class="block text-sm font-semibold text-gray-700 mb-2">
                    Display Order
                </label>
                <input type="number" name="order" id="order" value="{{ old('order', 0) }}" min="0"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('order') border-red-500 @enderror">
                @error('order')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex items-center">
                <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked'
                    : '' }} class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                <label for="is_active" class="ml-3 text-sm font-semibold text-gray-700">
                    Active
                </label>
            </div>
        </div>
    </div>

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