{{-- resources/views/pages/experts/create.blade.php --}}
@extends('layouts.app')

@section('css')
<!-- FilePond Styles -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .expert-avatar-preview {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .expert-avatar-placeholder {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e9ecef;
        border: 3px dashed #adb5bd;
        font-size: 48px;
        color: #6c757d;
    }
    .qualification-item {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        border: 1px solid #dee2e6;
    }
</style>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    const canManageExperts = @json(Auth::user()->can('manage-experts'));
    
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Select2
        $('.select2').select2({
            theme: 'bootstrap-5',
            placeholder: "{{ __('labels.select') }}",
            allowClear: true,
            width: '100%',
            dropdownParent: document.body
        });
    });
// Age validation (e.g., 18-100 years)
function validateAge(input) {
    let age = parseInt(input.value);
    
    if (isNaN(age)) {
        Swal.fire({
            icon: 'error',
            title: '{{ __('labels.invalid_age') }}',
            text: '{{ __('labels.age_must_be_number') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        input.value = '';
        input.focus();
        return false;
    }
    
    if (age < 18) {
        Swal.fire({
            icon: 'error',
            title: '{{ __('labels.age_too_young') }}',
            text: '{{ __('labels.age_minimum_18') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        input.value = '';
        input.focus();
        return false;
    }
    
    if (age > 100) {
        Swal.fire({
            icon: 'error',
            title: '{{ __('labels.age_too_old') }}',
            text: '{{ __('labels.age_maximum_100') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        input.value = '';
        input.focus();
        return false;
    }
    
    return true;
}

// Experience years validation (e.g., 0-50 years)
function validateExperience(input) {
    let experience = parseFloat(input.value);
    
    if (isNaN(experience)) {
        Swal.fire({
            icon: 'error',
            title: '{{ __('labels.invalid_experience') }}',
            text: '{{ __('labels.experience_must_be_number') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        input.value = '';
        input.focus();
        return false;
    }
    
    if (experience < 0) {
        Swal.fire({
            icon: 'error',
            title: '{{ __('labels.invalid_experience') }}',
            text: '{{ __('labels.experience_cannot_be_negative') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        input.value = '';
        input.focus();
        return false;
    }
    
    if (experience > 50) {
        Swal.fire({
            icon: 'error',
            title: '{{ __('labels.experience_too_high') }}',
            text: '{{ __('labels.experience_maximum_50') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        input.value = '';
        input.focus();
        return false;
    }
    
    // Optional: Check for decimal places
    if (experience % 1 !== 0 && experience.toString().split('.')[1]?.length > 1) {
        Swal.fire({
            icon: 'warning',
            title: '{{ __('labels.experience_decimals') }}',
            text: '{{ __('labels.experience_one_decimal_allowed') }}',
            confirmButtonColor: '#d33',
            confirmButtonText: '{{ __('labels.ok') }}'
        });
        // Round to 1 decimal place instead of clearing
        input.value = Math.round(experience * 10) / 10;
    }
    
    return true;
}
</script>
<script src="{{ asset('assets/custom/js/experts/form.js') }}"></script>
@endsection

@push('pageTitle')
    {{ isset($expert) ? __('labels.edit_expert') : __('labels.add_expert') }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => isset($expert) ? __('labels.edit_expert') : __('labels.add_expert'),
    'actionButton' => [
        'url' => route('experts.index'),
        'text' => __('labels.back_to_experts'),
    ],
])

@include('components.common.flush-message')
@include('components.common.validation-errors')

<form action="{{ isset($expert) ? route('experts.update', $expert) : route('experts.store') }}" 
      method="POST" enctype="multipart/form-data" id="expertForm">
    @csrf
    @if(isset($expert))
        @method('PUT')
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('labels.expert_information') }}</h5>
                </div>
                <div class="card-body">
                    {{-- User Selection --}}
                    @if(!isset($expert)) @endif
                        <div class="mb-3 row">
                            <label for="user_id" class="col-md-2 col-form-label">
                                {{ __('labels.select_user') }} <span class="text-danger">*</span>
                            </label>
                            <div class="col-md-10">
                                <select class="form-control select2 @error('user_id') is-invalid @enderror" 
                                        name="user_id" id="user_id" required>
                                    <option value="">{{ __('labels.select_user') }}</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" 
                                            
                                            {{ old('user_id', $expert->user_id ?? '') == $user->id ? 'selected' : '' }}
                                            
                                            {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('labels.select_user_help') }}</small>
                            </div>
                        </div>

                    {{-- Bio --}}
                    <div class="mb-3 row">
                        <label for="bio" class="col-md-2 col-form-label">{{ __('labels.bio') }}</label>
                        <div class="col-md-10">
                            <textarea class="form-control @error('bio') is-invalid @enderror" 
                                      name="bio" rows="5" 
                                      placeholder="{{ __('labels.enter_expert_bio') }}">{{ old('bio', $expert->bio ?? '') }}</textarea>
                            @error('bio')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Categories --}}
                    <div class="mb-3 row">
                        <label for="categories" class="col-md-2 col-form-label">
                            {{ __('labels.categories') }} <span class="text-danger">*</span>
                        </label>
                        <div class="col-md-10">
                            <select class="form-control select2 @error('categories') is-invalid @enderror" 
                                    name="categories[]" id="categories" multiple required>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" 
                                        {{ (collect(old('categories', $selectedCategories ?? []))->contains($category->id)) ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('categories')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        {{-- Designation --}}
                        <div class="col-md-6 mb-3">
                            <label for="designation" class="form-label">{{ __('labels.designation') }}</label>
                            <input class="form-control @error('designation') is-invalid @enderror" 
                                   type="text" name="designation" 
                                   value="{{ old('designation', $expert->designation ?? '') }}" 
                                   placeholder="{{ __('labels.enter_designation') }}">
                            @error('designation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Company --}}
                        <div class="col-md-6 mb-3">
                            <label for="company" class="form-label">{{ __('labels.company') }}</label>
                            <input class="form-control @error('company') is-invalid @enderror" 
                                   type="text" name="company" 
                                   value="{{ old('company', $expert->company ?? '') }}" 
                                   placeholder="{{ __('labels.enter_company') }}">
                            @error('company')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Experience Years --}}
                        <div class="col-md-6 mb-3">
                            <label for="experience_years" class="form-label">{{ __('labels.experience_years') }}</label>
                            <input class="form-control @error('experience_years') is-invalid @enderror" 
                                   type="number" name="experience_years" onchange="validateExperience(this)"
                                   value="{{ old('experience_years', $expert->experience_years ?? '') }}" 
                                   placeholder="{{ __('labels.enter_experience') }}" min="0" max="70">
                            @error('experience_years')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- LinkedIn URL --}}
                        <div class="col-md-6 mb-3">
                            <label for="linkedin_url" class="form-label">{{ __('labels.linkedin_url') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-linkedin"></i></span>
                                <input class="form-control @error('linkedin_url') is-invalid @enderror" 
                                       type="url" name="linkedin_url" onchange="validateUrl(this)"
                                       value="{{ old('linkedin_url', $expert->linkedin_url ?? '') }}" 
                                       placeholder="https://linkedin.com/in/username">
                            </div>
                            @error('linkedin_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Website URL --}}
                        <div class="col-md-6 mb-3">
                            <label for="website_url" class="form-label">{{ __('labels.website_url') }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-globe"></i></span>
                                <input class="form-control @error('website_url') is-invalid @enderror" 
                                       type="url" name="website_url" onchange="validateUrl(this)"
                                       value="{{ old('website_url', $expert->website_url ?? '') }}" 
                                       placeholder="https://example.com">
                            </div>
                            @error('website_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Status Settings --}}
                    @if(Auth::user()->can('manage-experts') && isset($expert))
                        <hr class="my-4">
                        <h6 class="fw-bold mb-3">{{ __('labels.status_settings') }}</h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-block">&nbsp;</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_active" 
                                           id="is_active" value="1" 
                                           {{ old('is_active', $expert->is_active ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        {{ __('labels.active') }}
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-block">&nbsp;</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_verified" 
                                           id="is_verified" value="1" 
                                           {{ old('is_verified', $expert->is_verified ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_verified">
                                        {{ __('labels.verified') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

                    @include('pages.experts.partials.qualifications', [
                        'qualifications' => old('qualifications', isset($expert) ? $expert->qualifications : []),
                        'readonly' => $readonly ?? false,
                    ])



                   @include('pages.experts.partials.schedules',[
                        'schedules' => old('schedules', isset($expert) ? $expert->schedules : []),
                        'readonly' => isset($readonly) && $readonly ? 1 : 0,                
                    ])


                    {{-- Submit Buttons --}}
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>{{ isset($expert) ? __('labels.update') : __('labels.save') }}
                        </button>
                        <a href="{{ route('experts.index') }}" class="btn btn-secondary">
                            {{ __('labels.cancel') }}
                        </a>
                    </div>    

        </div>
    </div>
</form>
@endsection