@extends('layouts.admin')

@section('title', __('Add Team Member'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Add Team Member') }}</h1>
            <p class="text-muted">{{ __('Add a new member to your team') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.team.list', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to List') }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.team.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data" id="teamForm">
        @csrf
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Member Information') }}</h6>
                    </div>
                    <div class="card-body">
                        <!-- Language Tabs -->
                        <ul class="nav nav-tabs mb-3" id="languageTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="english-tab" data-toggle="tab" href="#english" role="tab" aria-controls="english" aria-selected="true">
                                    <i class="flag-icon flag-icon-us mr-1"></i> {{ __('English') }}
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="arabic-tab" data-toggle="tab" href="#arabic" role="tab" aria-controls="arabic" aria-selected="false">
                                    <i class="flag-icon flag-icon-sa mr-1"></i> {{ __('Arabic') }}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" id="languageTabsContent">
                            <!-- English Content -->
                            <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name_en">{{ __('Name (English)') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name_en') is-invalid @enderror"
                                                   id="name_en" name="name_en" value="{{ old('name_en') }}"
                                                   placeholder="{{ __('Enter member name in English') }}" required>
                                            @error('name_en')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="position_en">{{ __('Position (English)') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('position_en') is-invalid @enderror"
                                                   id="position_en" name="position_en" value="{{ old('position_en') }}"
                                                   placeholder="{{ __('Enter position in English') }}" required>
                                            @error('position_en')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="bio_en">{{ __('Bio (English)') }}</label>
                                    <textarea class="form-control @error('bio_en') is-invalid @enderror"
                                              id="bio_en" name="bio_en" rows="4"
                                              placeholder="{{ __('Write a brief biography') }}">{{ old('bio_en') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Short biography for the team member') }}</small>
                                    @error('bio_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Arabic Content -->
                            <div class="tab-pane fade" id="arabic" role="tabpanel" aria-labelledby="arabic-tab">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name_ar">{{ __('Name (Arabic)') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name_ar') is-invalid @enderror"
                                                   id="name_ar" name="name_ar" value="{{ old('name_ar') }}"
                                                   placeholder="{{ __('Enter member name in Arabic') }}" dir="rtl" required>
                                            @error('name_ar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="position_ar">{{ __('Position (Arabic)') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('position_ar') is-invalid @enderror"
                                                   id="position_ar" name="position_ar" value="{{ old('position_ar') }}"
                                                   placeholder="{{ __('Enter position in Arabic') }}" dir="rtl" required>
                                            @error('position_ar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="bio_ar">{{ __('Bio (Arabic)') }}</label>
                                    <textarea class="form-control @error('bio_ar') is-invalid @enderror"
                                              id="bio_ar" name="bio_ar" rows="4"
                                              placeholder="{{ __('Write a brief biography') }}" dir="rtl">{{ old('bio_ar') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Short biography for the team member') }}</small>
                                    @error('bio_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Skills -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Skills & Expertise') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="skills">{{ __('Skills') }}</label>
                            <input type="text" class="form-control @error('skills') is-invalid @enderror"
                                   id="skills" name="skills" value="{{ old('skills') }}"
                                   placeholder="{{ __('Enter skills separated by commas (e.g., PHP, Laravel, JavaScript)') }}">
                            <small class="form-text text-muted">{{ __('List the member\'s technical skills and expertise') }}</small>
                            @error('skills')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Status & Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Status & Settings') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="department">{{ __('Department') }}</label>
                            <input type="text" class="form-control @error('department') is-invalid @enderror"
                                   id="department" name="department" value="{{ old('department') }}"
                                   placeholder="{{ __('e.g., Development, Design, Marketing') }}">
                            @error('department')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="join_date">{{ __('Join Date') }}</label>
                            <input type="date" class="form-control @error('join_date') is-invalid @enderror"
                                   id="join_date" name="join_date" value="{{ old('join_date') }}">
                            <small class="form-text text-muted">{{ __('When did this member join the team?') }}</small>
                            @error('join_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="sort_order">{{ __('Sort Order') }}</label>
                            <input type="number" class="form-control @error('sort_order') is-invalid @enderror"
                                   id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                            <small class="form-text text-muted">{{ __('Lower numbers appear first. 0 = auto-sort') }}</small>
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', '1') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                {{ __('Active Member') }}
                            </label>
                            <small class="form-text text-muted">{{ __('Inactive members are hidden from public view') }}</small>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_lead" name="is_lead" value="1" {{ old('is_lead') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_lead">
                                {{ __('Team Lead') }}
                            </label>
                            <small class="form-text text-muted">{{ __('Designate as team leader') }}</small>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Contact Information') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="email">{{ __('Email') }} <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror"
                                   id="email" name="email" value="{{ old('email') }}"
                                   placeholder="{{ __('member@company.com') }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="phone">{{ __('Phone') }}</label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror"
                                   id="phone" name="phone" value="{{ old('phone') }}"
                                   placeholder="{{ __('+1 (555) 123-4567') }}">
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Social Media -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Social Media') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="linkedin_url">{{ __('LinkedIn URL') }}</label>
                            <input type="url" class="form-control @error('linkedin_url') is-invalid @enderror"
                                   id="linkedin_url" name="linkedin_url" value="{{ old('linkedin_url') }}"
                                   placeholder="{{ __('https://linkedin.com/in/username') }}">
                            @error('linkedin_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="github_url">{{ __('GitHub URL') }}</label>
                            <input type="url" class="form-control @error('github_url') is-invalid @enderror"
                                   id="github_url" name="github_url" value="{{ old('github_url') }}"
                                   placeholder="{{ __('https://github.com/username') }}">
                            @error('github_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="twitter_url">{{ __('Twitter URL') }}</label>
                            <input type="url" class="form-control @error('twitter_url') is-invalid @enderror"
                                   id="twitter_url" name="twitter_url" value="{{ old('twitter_url') }}"
                                   placeholder="{{ __('https://twitter.com/username') }}">
                            @error('twitter_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Avatar -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Profile Picture') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="avatar">{{ __('Avatar') }}</label>
                            <input type="file" class="form-control-file @error('avatar') is-invalid @enderror"
                                   id="avatar" name="avatar" accept="image/*">
                            <small class="form-text text-muted">{{ __('Recommended size: 400x400px. Max file size: 2MB') }}</small>
                            @error('avatar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div id="avatar-preview" class="mt-3" style="display: none;">
                            <img id="avatar-img" src="" alt="Avatar Preview" class="img-fluid rounded-circle" style="max-width: 150px; max-height: 150px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save"></i> {{ __('Add Team Member') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Avatar preview
    document.getElementById('avatar').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('avatar-img').src = e.target.result;
                document.getElementById('avatar-preview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            document.getElementById('avatar-preview').style.display = 'none';
        }
    });

    // Skills input with tags-like behavior
    const skillsInput = document.getElementById('skills');
    if (skillsInput) {
        skillsInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ',') {
                e.preventDefault();
                const value = this.value.trim();
                if (value && !this.value.endsWith(', ')) {
                    this.value += ', ';
                }
            }
        });
    }

    // Auto-set join date to today if not set
    const joinDateInput = document.getElementById('join_date');
    if (joinDateInput && !joinDateInput.value) {
        const today = new Date().toISOString().split('T')[0];
        joinDateInput.value = today;
    }
});
</script>
@endsection