@extends('layout.app')
@section('content')
    <style>
        .job-form-section {
            background: #fff;
            padding: 40px 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .job-form-section h2 {
            color: #3e94e7;
            margin-bottom: 30px;
        }

        .form-label {
            font-weight: 500;
        }

        .btn-primary {
            background-color: #3e94e7;
            border-color: #3e94e7;
        }
    </style>

    <section class="friend-request-sec py-5" style="background: #f7f9fc;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">

                    <div class="job-form-section">
                        <h2 class="text-center">Job Advertisement Form</h2>

                        @if ($errors->any())
                            @foreach ($errors->all() as $error)
                                <label class="text-danger">{{ $error }}</label>
                            @endforeach
                        @endif


                        <form id="jobPostForm" method="POST" action="{{ route('job.store') }}"
                              enctype="multipart/form-data">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Contact Name</label>
                                <input type="text" name="advertiser_name" class="form-control"
                                       placeholder="Enter contact name" value="{{ old('advertiser_name') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Company Name</label>
                                <input type="text" name="company_name" class="form-control"
                                       placeholder="Enter company name" value="{{ old('company_name') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Recruiter Type</label>
                                <select name="recruiter_type" class="form-select" required>
                                    <option value="">Select</option>
                                    <option
                                        value="principal" {{ old('recruiter_type') == 'principal' ? 'selected' : '' }}>
                                        Principal
                                    </option>
                                    <option value="vendor" {{ old('recruiter_type') == 'vendor' ? 'selected' : '' }}>
                                        Vendor
                                    </option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Contact Phone</label>
                                <input type="tel" name="advertiser_phone" class="form-control"
                                       placeholder="Enter phone number" value="{{ old('advertiser_phone') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Advertiser Email</label>
                                <input type="email" name="email" class="form-control"
                                       placeholder="Enter email" value="{{ old('email') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Confirm Email</label>
                                <input type="email" name="email_confirmation" class="form-control"
                                       placeholder="Confirm email" value="{{ old('email_confirmation') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Industry Type</label>
                                <select name="industry_type" class="form-select" required>
                                    <option value="">Select Industry</option>
                                    <option
                                        value="accounting" {{ old('industry_type') == 'accounting' ? 'selected' : '' }}>
                                        Accounting
                                    </option>
                                    <option
                                        value="financial" {{ old('industry_type') == 'financial' ? 'selected' : '' }}>
                                        Financial
                                    </option>
                                    <option
                                        value="manufacturing" {{ old('industry_type') == 'manufacturing' ? 'selected' : '' }}>
                                        Manufacturing
                                    </option>
                                    <option value="IT Products/Services" {{ old('industry_type') == 'IT Products/Services' ? 'selected' : '' }}>IT Products/Services</option>
                                    <option
                                        value="Healthcare" {{ old('industry_type') == 'Healthcare' ? 'selected' : '' }}>
                                        Healthcare
                                    </option>

                                    <option
                                        value="Consulting" {{ old('industry_type') == 'Consulting' ? 'selected' : '' }}>
                                        Consulting
                                    </option>
                                    <option
                                        value="Logistics" {{ old('industry_type') == 'Logistics' ? 'selected' : '' }}>
                                        Logistics
                                    </option>
                                    <option
                                        value="Sports" {{ old('industry_type') == 'Sports' ? 'selected' : '' }}>
                                        Sports
                                    </option>
                                    <option
                                        value="Entertainment" {{ old('industry_type') == 'Entertainment' ? 'selected' : '' }}>
                                        Entertainment
                                    </option>
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">From Date</label>
                                    <input type="date" name="from_date" value="{{ old('from_date') }}"
                                           class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">To Date</label>
                                    <input type="date" name="to_date" class="form-control" value="{{ old('to_date') }}"
                                           required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Job Position</label>
                                <input type="text" name="job_title" class="form-control"
                                       placeholder="e.g. Analyst, Developer" value="{{ old('job_title') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Job Location</label>
                                <select class="form-select" name="job_location" required>
                                    <option value="" disabled selected>Select type</option>
                                    <option value="on site" {{ old('job_location') == 'on site' ? 'selected' : '' }}>On
                                        Site
                                    </option>
                                    <option value="hybrid" {{ old('job_location') == 'hybrid' ? 'selected' : '' }}>
                                        Hybrid
                                    </option>
                                    <option value="remote" {{ old('job_location') == 'remote' ? 'selected' : '' }}>
                                        Remote
                                    </option>
                                </select>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Job Type</label>
                                    <select class="form-select" name="job_type" required>
                                        <option value="" disabled selected>Select type</option>
                                        <option
                                            value="full_time" {{ old('job_type') == 'full_time' ? 'selected' : '' }}>
                                            Full Time
                                        </option>
                                        <option
                                            value="part_time" {{ old('job_type') == 'part_time' ? 'selected' : '' }}>
                                            Part Time
                                        </option>
                                        <option value="hourly" {{ old('job_type') == 'hourly' ? 'selected' : '' }}>
                                            Hourly
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label d-block">Compensation Type</label>

                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="compensation_type"
                                               id="yearlySalary"
                                               value="yearly" {{ old('compensation_type') == 'yearly' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="yearlySalary">Yearly Salary</label>
                                    </div>

                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="compensation_type"
                                               id="hourlyRate"
                                               value="hourly" {{ old('compensation_type') == 'hourly' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="hourlyRate">Hourly Rate</label>
                                    </div>

                                    <input type="number" class="form-control mt-3" name="service_fee" min="0"
                                           step="0.01"
                                           value="{{ old('service_fee') }}"
                                           placeholder="Enter amount (e.g. 30 or 30000)">
                                </div>

                            </div>

                            <div class="mb-3">
                                <label class="form-label">Minimum Years of Experience</label>
                                <select name="experience_years" class="form-select" required>
                                    <option value=" " selected disabled>Select</option>
                                    <option value="less then 5" {{ old('experience_years') == 'less then 5' ? 'selected' : '' }}>Less than 5</option>
                                    <option value="Greater then 5" {{ old('experience_years') == 'Greater then 5' ? 'selected' : '' }}>Greater than 5</option>
                                    <option value="Greater then 10" {{ old('experience_years') == 'Greater then 10' ? 'selected' : '' }}>Greater than 10</option>
                                </select>
                            </div>


                            <div class="mb-3">
                                <label class="form-label">Select up to 5 Skills/Tags</label>
                                <div class="dropdown">
                                    <button class="btn btn-outline-primary dropdown-toggle w-100 text-start" type="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                        Choose Tags
                                    </button>
                                    <ul class="dropdown-menu p-3"
                                        style="width: 100%; max-height: 250px; overflow-y: auto;">
                                        <!-- Loop through tags -->
                                        @foreach(['Design', 'Development', 'SEO', 'Marketing', 'Support', 'Writing', 'Training','Testing','Analyst', 'Management'] as $tag)
                                            <li>
                                                <div class="form-check">
                                                    <input class="form-check-input tag-checkbox" name="tags[]"
                                                           type="checkbox" value="{{ $tag }}" {{ in_array($tag, old('tags', [])) ? 'checked' : '' }}>
                                                    <label class="form-check-label">{{ $tag }}</label>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <small class="text-muted">You can select up to 5 tags.</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Job Description</label>
                                <textarea name="job_description" class="form-control" rows="4"
                                          placeholder="Enter job description" required>{{ old('job_description') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Attach a Job Ad document</label>
                                <input type="file" name="job_document" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Languages</label>
                                <input type="text" name="language"  value="{{ old('language') }}" class="form-control"
                                       placeholder="Language">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Environment</label>
                                <input type="text" name="environment" value="{{ old('environment') }}" class="form-control"
                                       placeholder="Environment">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Confirmation Message</label>
                                <textarea name="confirmation_message" class="form-control" rows="3"
                                          placeholder="Confirmation details" required>{{ old('confirmation_message') }}</textarea>
                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-primary px-4" onclick="showPaymentModal()">Submit
                                    Job Post
                                </button>
                            </div>


                            <input type="hidden" name="card_number" id="cardNumber">
                            <input type="hidden" name="card_expiry" id="cardExpiry">
                            <input type="hidden" name="card_cvc" id="cardCVC">

                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>


    <!-- Payment Modal -->
    <div class="modal fade" id="paymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Enter Payment Info</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">Card Number</label>
                        <input type="number" class="form-control" id="modalCardNumber" placeholder="1234 5678 9012 3456"
                               required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Expiry (MM/YY)</label>
                        <input type="text" class="form-control" id="modalCardExpiry" placeholder="MM/YY" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">CVC</label>
                        <input type="number" class="form-control" id="modalCardCVC" placeholder="CVC" required>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" onclick="submitWithPayment()">Confirm & Submit
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('script')
    <script>
        function showPaymentModal() {
            let myModal = new bootstrap.Modal(document.getElementById('paymentModal'));
            myModal.show();
        }

        function submitWithPayment() {
            // Simple validation
            let number = document.getElementById('modalCardNumber').value;
            let expiry = document.getElementById('modalCardExpiry').value;
            let cvc = document.getElementById('modalCardCVC').value;

            if (!number || !expiry || !cvc) {
                alert('Please fill in all card fields.');
                return;
            }

            // Set values in hidden fields
            document.getElementById('cardNumber').value = number;
            document.getElementById('cardExpiry').value = expiry;
            document.getElementById('cardCVC').value = cvc;

            // Submit the form
            document.getElementById('jobPostForm').submit();
        }
    </script>

@endpush