@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">Edit Posted 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('post.job.update',$post->id) }}"
                              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="{{ $post->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="{{ $post->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" {{ $post->company_type == 'principal' ? 'selected' : '' }}>
                                        Principal
                                    </option>
                                    <option value="vendor" {{ $post->company_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="{{ $post->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="{{ $post->advertiser_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="{{ $post->advertiser_email ?? '' }}" 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" {{ $post->industry == 'accounting' ? 'selected' : '' }}>
                                        Accounting
                                    </option>
                                    <option
                                        value="financial" {{ $post->industry == 'financial' ? 'selected' : '' }}>
                                        Financial
                                    </option>
                                    <option
                                        value="manufacturing" {{$post->industry == 'manufacturing' ? 'selected' : '' }}>
                                        Manufacturing
                                    </option>
                                    <option value="IT" {{ $post->industry == 'IT' ? 'selected' : '' }}>IT</option>
                                    <option
                                        value="Healthcare" {{ $post->industry == 'Healthcare' ? 'selected' : '' }}>
                                        Healthcare
                                    </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="{{$post->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="{{$post->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="{{ $post->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" {{ $post->location == 'on site' ? 'selected' : '' }}>On
                                        Site
                                    </option>
                                    <option value="hybrid" {{ $post->location == 'hybrid' ? 'selected' : '' }}>
                                        Hybrid
                                    </option>
                                    <option value="remote" {{ $post->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" {{ $post->job_type == 'full_time' ? 'selected' : '' }}>
                                            Full Time
                                        </option>
                                        <option
                                            value="part_time" {{ $post->job_type == 'part_time' ? 'selected' : '' }}>
                                            Part Time
                                        </option>
                                        <option value="hourly" {{ $post->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" {{ $post->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" {{ $post->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="{{ $post->fees ?? '' }}"
                                           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" {{ $post->experience_years == 'less then 5' ? 'selected' : '' }}>
                                        Less than 5
                                    </option>
                                    <option
                                        value="Greater then 5" {{ $post->experience_years == 'Greater then 5' ? 'selected' : '' }}>
                                        Greater than 5
                                    </option>
                                    <option
                                        value="Greater then 10" {{ $post->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', '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, is_array($post->tags) ? $post->tags : explode(',', $post->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>{{ $post->description ?? '' }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Job Ad Document</label>
                                <input type="file" name="job_document" id="job_document" class="form-control"
                                       onchange="previewFile()">

                                <div id="file-preview" class="mt-3">
                                @if($post->getFirstMedia('job_document'))
                                    <!-- Show existing media file if available -->
                                        <div class="preview-container">
                                            <a class="btn btn-dark" href="{{ $post->getFirstMediaUrl('job_document') }}"
                                               target="_blank">
                                                View File
                                            </a>
                                            <p>{{ $post->getFirstMedia('job_document')->file_name }}</p>
                                        </div>
                                    @else
                                        <p>No file selected</p>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Languages</label>
                                <input type="text" name="language" value="{{ $post->language ?? '' }}"
                                       class="form-control"
                                       placeholder="Language">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Environment</label>
                                <input type="text" name="environment" value="{{ $post->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>{{ $post->message ?? '' }}</textarea>
                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-primary px-4" onclick="showPaymentModal()">Update
                                    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"
                               value="{{$post->card_number ?? ''}}"
                               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"
                               value="{{$post->card_expiry ?? ''}}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">CVC</label>
                        <input type="number" class="form-control" id="modalCardCVC" placeholder="CVC"
                               value="{{$post->card_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 & Update
                    </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();
        }

        function previewFile() {
            var file = document.getElementById('job_document').files[0]; // Get the selected file
            var preview = document.getElementById('file-preview'); // Get the preview container

            // Clear the existing preview if a new file is selected
            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    preview.innerHTML = `<div class="preview-container">
                                         <a href="${e.target.result}" target="_blank">
                                             <button class="btn btn-secondary">View Uploaded File</button>
                                         </a>
                                         <p>${file.name}</p>
                                      </div>`;
                };
                reader.readAsDataURL(file);
            }
        }
    </script>

@endpush