@props(['jobPosition' => null, 'formId' => 'application-form'])

<div class="flex justify-center items-center  bg-gray-50" style="width: 100%;">
    <form id="{{ $formId }}" 
          data-ignore="true" 
          data-bricks-form="false"
          method="POST"
          action="{{ route('careers.apply.store', ['jobPosition' => $jobPosition ? $jobPosition->id : 1]) }}"
          enctype="multipart/form-data"
          class="w-full  bg-white rounded-2xl shadow-md p-8 space-y-8">

        @csrf
        <input type="hidden" name="job_position_id" value="{{ $jobPosition ? $jobPosition->id : 1 }}" id="job_position_id_field">
        <input type="hidden" name="job_position_id_dynamic" value="" id="job_position_id_dynamic">

        <h2 class="text-2xl font-bold text-gray-800 text-center">Form ứng tuyển</h2>

        {{-- GRID FORM - 2 cột trên desktop, 1 cột trên mobile --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {{-- Họ --}}
            <div class="form-group">
                <label class="block  font-semibold text-gray-700 mb-2 required">Họ</label>
                <input type="text" name="first_name" value="{{ old('first_name') }}" placeholder="Nhập họ"
                    class="w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-3 transition-all duration-200" required>
                @error('first_name')
                    <span class="text-red-500   mt-1">{{ $message }}</span>
                @enderror
            </div>

            {{-- Tên --}}
            <div class="form-group">
                <label class="block  required font-semibold text-gray-700 mb-2">Tên  </label>
                <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder="Nhập tên"
                    class="w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-3 transition-all duration-200" required>
                @error('last_name')
                    <span class="text-red-500   mt-1">{{ $message }}</span>
                @enderror
            </div>

            {{-- Email --}}
            <div class="form-group">
                <label class="block  required font-semibold text-gray-700 mb-2">Email  </label>
                <input type="email" name="email" value="{{ old('email') }}" placeholder="example@email.com"
                    class="w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-3 transition-all duration-200" required>
                @error('email')
                    <span class="text-red-500   mt-1">{{ $message }}</span>
                @enderror
            </div>

            {{-- Số điện thoại --}}
            <div class="form-group">
                <label class="block required  font-semibold text-gray-700 mb-2">Số điện thoại</label>
                <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="0912 345 678"
                    class="w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-3 transition-all duration-200">
                @error('phone')
                    <span class="text-red-500   mt-1">{{ $message }}</span>
                @enderror
            </div>

            {{-- Giới tính --}}
            <div>
                <label class="block   font-medium text-gray-700 mb-2">Giới tính  </label>
                <select name="gender" class="w-full rounded-lg border-gray-300 bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2" required>
                    <option value="">Chọn giới tính</option>
                    <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Nam</option>
                    <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Nữ</option>
                    <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Khác</option>
                </select>
            </div>

            {{-- Ngày sinh --}}
            <div>
                <label class="block   font-medium text-gray-700 mb-2">Ngày sinh  </label>
                <input type="date" name="birth_date" value="{{ old('birth_date') }}"
                    class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2" required>
            </div>

            {{-- Địa chỉ --}}
            <div class="md:col-span-2">
                <label class="block   font-medium text-gray-700 mb-2">Địa chỉ  </label>
                <input type="text" name="address" value="{{ old('address') }}" placeholder="Số nhà, đường, phường/xã, quận/huyện, tỉnh/thành phố"
                    class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2" required>
            </div>

            {{-- Lương --}}
            <div>
                <label class="block   font-medium text-gray-700 mb-2">Mức lương mong muốn  </label>
                <div class="relative">
                    <input type="number" name="expected_salary" min="0" step="1000000" value="{{ old('expected_salary') }}"
                        placeholder="15000000" class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2 pr-16" >
                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500  ">VNĐ</span>
                </div>
            </div>

            {{-- Công ty hiện tại --}}
            <div>
                <label class="block   font-medium text-gray-700 mb-2">Công ty hiện tại</label>
                <input type="text" name="current_company" value="{{ old('current_company') }}" placeholder="Tên công ty đang làm việc"
                    class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2">
            </div>
              {{-- LinkedIn --}}
              <div>
                <label class="block   font-medium text-gray-700 mb-2">Link Github</label>
                <input type="text" name="linkedin_url" value="{{ old('linkedin_url') }}" placeholder="https://github.com/nguyenvanan"
                    class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2">
            </div>
            {{-- Công việc hiện tại --}}
            <div>
                <label class="block   font-medium text-gray-700 mb-2">Công việc hiện tại</label>
                <input type="text" name="current_position" value="{{ old('current_position') }}" placeholder="Tên công ty đang làm việc"
                    class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2">
            </div>
            {{-- CV --}}
            <div class="md:col-span-2">
                <label class="block  required font-medium text-gray-700 mb-2">CV/Resume  </label>
                <input type="file" name="resume" accept=".pdf,.doc,.docx"
                    class="w-full rounded-lg border-gray-300 text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 
                    file:  file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" required>
            </div>

            {{-- Cover Letter --}}
            <div class="md:col-span-2">
                <label class="block   font-medium text-gray-700 mb-2">Thư xin việc</label>
                <textarea name="cover_letter" rows="5" placeholder="Giới thiệu bản thân, kinh nghiệm và lý do bạn phù hợp với vị trí này..."
                    class="w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-2 resize-none">{{ old('cover_letter') }}</textarea>
            </div>
        </div>

        {{-- Nút gửi --}}
        <div class="text-center">
            <button type="submit"
                class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-all duration-200 shadow">
                Gửi hồ sơ ứng tuyển
            </button>
        </div>
    </form>
</div>

<style>
    label.required::after {
    content: " *";
    color: #ef4444; /* Màu đỏ Tailwind: red-500 */
    font-weight: normal;
}

    /* Form container styling */
    .form-container {
        @apply bg-white shadow-lg rounded-2xl p-8 border border-gray-100;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    /* Grid layout improvements */
    .grid {
        gap: 1.5rem;
    }
    
    @media (max-width: 768px) {
        .grid {
            gap: 1rem;
        }
    }
    
    /* Form group styling */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Input styling */
    .form-group input,
    .form-group select,
    .form-group textarea {
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
        padding: 0.75rem 1rem;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        transform: translateY(-1px);
    }
    
    .form-group input:hover,
    .form-group select:hover,
    .form-group textarea:hover {
        border-color: #9ca3af;
    }
    
    /* Label styling */
    .form-group label {
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    /* Error message styling */
    .text-red-500 {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: block;
    }
    
    /* Button styling */
    button[type="submit"] {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Full width fields */
    .md\:col-span-2 {
        grid-column: span 2;
    }
    
    @media (max-width: 768px) {
        .md\:col-span-2 {
            grid-column: span 1;
        }
    }
</style>