<x-app-layout>
    <x-module-hero
        title="Add Staff Record"
        description="Create a new staff employment record"
        icon="fa-user-tie">

        <x-slot name="backButton">
            <a href="{{ route('organization.staff-history.index') }}"
               class="inline-flex items-center gap-2 text-[#475569] hover:text-[#1e293b] text-sm transition">
                <i class="fas fa-arrow-left text-xs"></i> Back to List
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view organizations')
            <a href="{{ route('organization.details.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.details.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-building text-sm"></i> Organization Details
            </a>
            @endcan
            @can('view leadership positions')
            <a href="{{ route('organization.leadership-positions.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.leadership-positions.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-sitemap text-sm"></i> Leadership Positions
            </a>
            @endcan
            @can('view leadership history')
            <a href="{{ route('organization.leadership-history.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.leadership-history.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-history text-sm"></i> Leadership History
            </a>
            @endcan
            @can('view staff history')
            <a href="{{ route('organization.staff-history.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.staff-history.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-user-tie text-sm"></i> Staff History
            </a>
            @endcan
            @can('view election cycles')
            <a href="{{ route('organization.election-cycles.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.election-cycles.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-calendar-alt text-sm"></i> Election Cycles
            </a>
            @endcan
            @can('view voting procedures')
            <a href="{{ route('organization.voting-procedures.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.voting-procedures.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-vote-yea text-sm"></i> Voting Procedures
            </a>
            @endcan
            @can('view organogram')
            <a href="{{ route('organization.organogram.show') }}"
               class="module-hero-tab {{ request()->routeIs('organization.organogram.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-project-diagram text-sm"></i> Organogram
            </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        <form action="{{ route('organization.staff-history.store') }}" method="POST" enctype="multipart/form-data"
              x-data="passportUpload()">
            @csrf

            {{-- Employee Info --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Employee Information</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="staff_name">
                        Staff Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="staff_name" name="staff_name" value="{{ old('staff_name') }}"
                        placeholder="Full Name"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                        required>
                    @error('staff_name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="user_id">
                        Link to User Account <span class="text-gray-400 text-xs">(optional)</span>
                    </label>
                    <select id="user_id" name="user_id"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent">
                        <option value="">No User Linked</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                        @endforeach
                    </select>
                    @error('user_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="position">
                        Position Title <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="position" name="position" value="{{ old('position') }}"
                        placeholder="e.g., Executive Director"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                        required>
                    @error('position')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="organization_id">
                        Organization <span class="text-red-500">*</span>
                    </label>
                    <select id="organization_id" name="organization_id"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                        required>
                        <option value="">Select Organization</option>
                        @foreach($organizations as $org)
                            <option value="{{ $org->id }}" {{ old('organization_id') == $org->id ? 'selected' : '' }}>{{ $org->name }}</option>
                        @endforeach
                    </select>
                    @error('organization_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            {{-- Employment Details --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Employment Details</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="employment_start_date">
                        Start Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" id="employment_start_date" name="employment_start_date"
                        value="{{ old('employment_start_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                        required>
                    @error('employment_start_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="employment_end_date">
                        End Date <span class="text-gray-400 text-xs">(optional)</span>
                    </label>
                    <input type="date" id="employment_end_date" name="employment_end_date"
                        value="{{ old('employment_end_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent">
                    @error('employment_end_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="employment_status">
                        Employment Status <span class="text-red-500">*</span>
                    </label>
                    <select id="employment_status" name="employment_status"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                        required>
                        <option value="">Select Status</option>
                        <option value="current" {{ old('employment_status') == 'current' ? 'selected' : '' }}>Current Employee</option>
                        <option value="former" {{ old('employment_status') == 'former' ? 'selected' : '' }}>Former Employee</option>
                    </select>
                    @error('employment_status')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="termination_reason">
                        Termination Reason <span class="text-gray-400 text-xs">(if former)</span>
                    </label>
                    <textarea id="termination_reason" name="termination_reason" rows="3"
                        placeholder="Reason for leaving..."
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent">{{ old('termination_reason') }}</textarea>
                    @error('termination_reason')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            {{-- Passport Upload --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                <i class="fas fa-passport text-blue-600 mr-2"></i>Staff Passport
            </h3>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- File Upload Section --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2" for="passport">
                            Upload Passport <span class="text-gray-400 text-xs">(optional)</span>
                        </label>
                        <input type="file" id="passport" name="passport" accept="image/jpeg,image/png,application/pdf"
                            @change="handleFileSelect"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <p class="mt-2 text-xs text-gray-600">
                            <i class="fas fa-info-circle mr-1"></i>Supported: JPEG, PNG, PDF (Max 5MB)
                        </p>
                        @error('passport')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    {{-- File Info Display --}}
                    <div class="space-y-2">
                        <template x-if="fileName">
                            <div class="bg-white border border-green-300 rounded-lg p-3 space-y-2">
                                <p class="text-sm font-medium text-green-700">
                                    <i class="fas fa-check-circle mr-1"></i>File Selected
                                </p>
                                <p class="text-xs text-gray-700"><strong>Name:</strong> <span x-text="fileName"></span></p>
                                <p class="text-xs text-gray-700"><strong>Size:</strong> <span x-text="fileSize"></span></p>
                            </div>
                        </template>
                        <template x-if="!fileName">
                            <div class="bg-white border border-gray-300 rounded-lg p-3 text-center">
                                <p class="text-xs text-gray-500">
                                    <i class="fas fa-cloud-upload-alt mr-1"></i>No file selected
                                </p>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- Upload Progress Bar --}}
                <template x-if="isUploading">
                    <div class="mt-6 space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">
                                <i class="fas fa-spinner fa-spin mr-1"></i>Uploading...
                            </span>
                            <span class="text-xs font-semibold text-blue-600" x-text="uploadProgress + '%'"></span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
                            <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-full transition-all duration-300 ease-out"
                                 :style="`width: ${uploadProgress}%`"></div>
                        </div>
                    </div>
                </template>

                {{-- Preview Section --}}
                <template x-if="previewUrl && !isUploading">
                    <div class="mt-6 border-t pt-6">
                        <h4 class="text-sm font-semibold text-gray-800 mb-3">Preview</h4>
                        <template x-if="fileType === 'pdf'">
                            <div class="bg-gray-100 border border-gray-300 rounded-lg p-4 text-center">
                                <i class="fas fa-file-pdf text-red-600 text-4xl mb-2"></i>
                                <p class="text-sm text-gray-700">PDF Document</p>
                                <p class="text-xs text-gray-500 mt-1">Click to view in full screen</p>
                            </div>
                        </template>
                        <template x-if="fileType !== 'pdf'">
                            <div class="bg-white border border-gray-300 rounded-lg overflow-hidden">
                                <img :src="previewUrl" class="w-full h-auto max-h-72 object-cover">
                            </div>
                        </template>
                    </div>
                </template>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('organization.staff-history.index') }}"
                   class="px-5 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-300 transition">
                    <i class="fas fa-times mr-1"></i>Cancel
                </a>
                <button type="submit" class="theme-btn-primary px-5 py-2 rounded-lg text-sm font-medium">
                    <i class="fas fa-save mr-1"></i>Save Staff Record
                </button>
            </div>
        </form>
    </div>

    <script>
        function passportUpload() {
            return {
                fileName: '',
                fileSize: '',
                fileType: '',
                previewUrl: '',
                uploadProgress: 0,
                isUploading: false,
                
                handleFileSelect(event) {
                    const file = event.target.files[0];
                    if (!file) {
                        this.fileName = '';
                        this.previewUrl = '';
                        return;
                    }

                    // Store file info
                    this.fileName = file.name;
                    this.fileSize = this.formatFileSize(file.size);
                    this.fileType = file.type.includes('pdf') ? 'pdf' : 'image';

                    // Create preview
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.previewUrl = e.target.result;
                    };
                    reader.readAsDataURL(file);
                },

                formatFileSize(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
                }
            }
        }
    </script>
</x-app-layout>
