@extends('layouts.jobs')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">Create New Job</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('jobs.store') }}" method="POST" id="jobForm">
                        @csrf

                        {{-- Row 1 --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="title" class="form-label">Job Title</label>
                                <input type="text" name="title" id="title" class="form-control" required>
                                @error('title')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="company" class="form-label">Company</label>
                                <input type="text" name="company" id="company" class="form-control" required>
                                @error('company')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Row 2 --}}
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="type" class="form-label">Job Type</label>
                                <select name="type" id="type" class="form-select" required>
                                    <option value="Full-time">Full-time</option>
                                    <option value="Part-time">Part-time</option>
                                    <option value="Contract">Contract</option>
                                    <option value="Temporary">Temporary</option>
                                    <option value="Internship">Internship</option>
                                </select>
                                @error('type')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="location" class="form-label">Location</label>
                                <input type="text" name="location" id="location" class="form-control" required>
                                @error('location')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="currency" class="form-label">Currency</label>
                                <select name="currency" id="currency" class="form-select" required>
                                    <option value="SAR">SAR</option>
                                    <option value="USD">USD</option>
                                    <option value="EUR">EUR</option>
                                    <option value="GBP">GBP</option>
                                </select>
                                @error('currency')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Row 3 --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="salary" class="form-label">Salary</label>
                                <input type="number" name="salary" id="salary" class="form-control" step="0.01">
                                @error('salary')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select" required>
                                    <option value="active">Active</option>
                                    <option value="draft">Draft</option>
                                    <option value="closed">Closed</option>
                                </select>
                                @error('status')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Description --}}
                        <div class="mb-3">
                            <label for="description" class="form-label">Job Description</label>
                            <textarea name="description" id="description" class="form-control" rows="4" required></textarea>
                            @error('description')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Additional Fields --}}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="skills" class="form-label">Skills (comma-separated)</label>
                                <input type="text" name="skills" id="skills" class="form-control" placeholder="e.g. PHP, Laravel, MySQL">
                                @error('skills')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="posted" class="form-label">Posted Date</label>
                                <input type="date" name="posted" id="posted" class="form-control" value="{{ date('Y-m-d') }}">
                                @error('posted')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="closing_date" class="form-label">Closing Date</label>
                                <input type="date" name="closing_date" id="closing_date" class="form-control">
                                @error('closing_date')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Checkboxes --}}
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="urgent" id="urgent">
                                    <label class="form-check-label" for="urgent">Urgent Hiring</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="highSalary" id="highSalary">
                                    <label class="form-check-label" for="highSalary">High Salary</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="commission" id="commission">
                                    <label class="form-check-label" for="commission">Commission</label>
                                </div>
                            </div>
                        </div>

                        {{-- Buttons --}}
                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-success">Post Job</button>
                            <a href="{{ route('jobs.index') }}" class="btn btn-secondary ms-2">Cancel</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.getElementById('jobForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        
        // Log form data for debugging
        console.log('Form Data:');
        for (let pair of formData.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }
        
        // Show loading state
        Swal.fire({
            title: 'Creating Job...',
            text: 'Please wait while we process your request.',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch('{{ route('jobs.store') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(async response => {
            const contentType = response.headers.get('content-type');
            console.log('Response Content-Type:', contentType);
            
            if (contentType && contentType.includes('application/json')) {
                const data = await response.json();
                console.log('Response Data:', data);
                
                if (!response.ok) {
                    throw new Error(data.message || 'Server error occurred');
                }
                return data;
            }
            throw new Error('Server returned non-JSON response');
        })
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Success!',
                    text: 'Job created successfully.',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = '{{ route('jobs.index') }}';
                    }
                });
            } else {
                // Clear previous error states
                document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                document.querySelectorAll('.text-danger').forEach(el => el.textContent = '');

                if (data.errors) {
                    console.log('Validation Errors:', data.errors);
                    
                    // Display validation errors
                    Object.keys(data.errors).forEach(key => {
                        const input = document.querySelector(`[name="${key}"]`);
                        if (input) {
                            input.classList.add('is-invalid');
                            const errorDiv = input.nextElementSibling;
                            if (errorDiv && errorDiv.classList.contains('text-danger')) {
                                errorDiv.textContent = data.errors[key][0];
                            }
                        }
                    });

                    // Show validation errors in toast
                    const errorMessages = Object.values(data.errors).flat();
                    Swal.fire({
                        title: 'Validation Error!',
                        html: `
                            <div class="text-start">
                                ${errorMessages.map(error => `<div class="text-danger mb-2">• ${error}</div>`).join('')}
                            </div>
                        `,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                } else {
                    // Show error message
                    Swal.fire({
                        title: 'Error!',
                        text: data.message || data.error || 'An error occurred while creating the job.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                title: 'Error!',
                text: error.message || 'An unexpected error occurred. Please try again.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
    });

    // Clear is-invalid class and error message on input change
    document.querySelectorAll('input, select, textarea').forEach(input => {
        input.addEventListener('input', function() {
            this.classList.remove('is-invalid');
            const errorDiv = this.nextElementSibling;
            if (errorDiv && errorDiv.classList.contains('text-danger')) {
                errorDiv.textContent = '';
            }
        });
    });
</script>
@endpush
@endsection