@extends('user.layouts.app')

@section('body_class', 'career-opportunities-page')

@section('content')
<section class="banner-slider">
  @foreach($bannerImages as $image)
  <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
      alt="Slide {{ $loop->iteration }}"></div>
  @endforeach
</section>

<!-- Login Area -->
<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <a href="/">Home</a>
      </li>
      <li>Career Opportunities</li>
    </ul>
  </div>
</div>
<div class="container contact-wrapper d-flex align-items-center justify-content-center">
  <div class="row w-100 justify-content-center">

    <div class="section-inner">

      <div class="section-description overflow-auto">
        <table class="payment-table-list">
          <thead>
            <tr>
              <th>Sl. No.</th>
              <th>Position on Officer</th>
              <th>Posting Date</th>
              <th>Last Date of Submission of Application</th>
              <th>Detail</th>
              <th>Submit your CV</th>
            </tr>
          </thead>
          <tbody>

            @if($career_opportunities->isEmpty())
            <tr>
              <td colspan="6" class="text-center">No data found</td>
            </tr>
            @else
            @php $i = 1; @endphp
            @foreach($career_opportunities as $career_opportunity)
            <tr>
              <td>{{ $i }}</td>
              <td>{{ $career_opportunity->job_position }}</td>
              {{-- <td>{{ optional($career_opportunity->posting_date)->format('Y-m-d') }}</td>
              <td>{{ optional($career_opportunity->last_date_apply)->format('Y-m-d') }}</td> --}}
              <td>{{ optional($career_opportunity->posting_date)->format('d-m-Y') }}</td>
              <td>{{ optional($career_opportunity->last_date_apply)->format('d-m-Y') }}</td>
              <td>{{ $career_opportunity->detail }}</td>
              <td>
                <!-- Upload button triggers modal -->
                <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#uploadModal" data-job-id="{{ $career_opportunity->id }}" data-job-title="{{ $career_opportunity->job_position }}">Upload</a>
              </td>

            </tr>
            @php $i++; @endphp
            @endforeach
            @endif
          </tbody>
        </table>
        <!-- Upload Modal -->
        <div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <form id="uploadForm" action="{{route('addJobApplyList')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header px-3">
                  <h5 class="modal-title" id="uploadModalLabel">Upload Candidate CV</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="inner-form">
                  <ul class="inner-form-ul px-3">

                      <li>
                        <div class="form-row box-focus">
                          <label for="job_title">Job heading</label>
                          <input type="text" class="form-control" id="job_title" name="job_title" placeholder="" disabled>
                          <input type="hidden" id="job_id" name="job_id">
                        </div>
                      </li>

                      <li>
                        <div class="form-row box-focus">
                          <label for="candidate_name">Candidate name</label>
                          <input type="text" class="form-control" id="candidate_name" name="name" placeholder="" required>
                        </div>
                      </li>

                      <li>
                        <div class="form-row box-focus">
                          <label for="candidate_email">Candidate email</label>
                          <input type="email" class="form-control" id="candidate_email" name="email" placeholder="" required>
                        </div>
                      </li>

                      <li>
                        <div class="form-row box-focus">
                          <label for="candidate_mobile">Mobile number</label>
                          <input type="number" class="form-control" id="candidate_mobile" name="phone" placeholder="" required>
                        </div>
                      </li>

                      <li>
                        <div class="form-row box-focus">
                          <label class="custom-file-label" for="cv_file">Upload CV <span>(Only Pdf, Max : 5MB)</span></label>
                          <input type="file" class="form-control" id="cv_file" name="user_upload_cv" accept=".pdf" placeholder="" required>
                        </div>
                      </li>

                    </ul>
                  </div>

                <div class="modal-footer px-3">
                  <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Upload</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="overflow-auto">
        <table class="payment-table-list">
          <thead>
            <tr>
              <th colspan="2">Contact Information:</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="2">In case any technical issue regarding login, kindly contact Mr.J.D.Ghosh on the following
                contact information-</td>
            </tr>
            @if(!empty($contact_informations))
            @foreach($contact_informations as $contact_information)
            <tr>
              <td class="text-nowrap">1) Phone No.</td>
              <td>{{ $contact_information->support_phone }}</td>
            </tr>
            <tr>
              <td class="text-nowrap">2) E-mail Id</td>
              <td> {{ $contact_information->support_email }}</td>
            </tr>
            @endforeach
            @endif
          </tbody>
        </table>
      </div>

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


@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  @if (session('success'))
    Swal.fire({
      icon: 'success',
      title: 'Success!',
      text: "{{ session('success') }}",
      confirmButtonText: 'OK'
    });
  @endif
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const uploadModal = document.getElementById('uploadModal');
    
    uploadModal.addEventListener('show.bs.modal', function (event) {
      const button = event.relatedTarget;
      const jobTitle = button.getAttribute('data-job-title');
      const jobId = button.getAttribute('data-job-id');
      // alert(jobTitle);
      // Set values in modal
      const jobTitleInput = uploadModal.querySelector('#job_title');
      jobTitleInput.value = jobTitle;
      uploadModal.querySelector('#job_id').value = jobId;

      // Manually trigger the floating label animation
      const label = uploadModal.querySelector('label[for="job_title"]');
      if (jobTitle) {
        label.classList.add('animate-label');
      } else {
        label.classList.remove('animate-label');
      }
    });
  });

  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
  // --- for job apply list --- //
  // document.addEventListener('DOMContentLoaded', function () {
  //   const uploadModal = document.getElementById('uploadModal');
  //   uploadModal.addEventListener('show.bs.modal', function (event) {
  //     const button = event.relatedTarget;
  //     const job = button.getAttribute('data-job');
  //     const inputJob = uploadModal.querySelector('#job_heading');
  //     inputJob.value = job;
  //   });
  // });

  // document.addEventListener('DOMContentLoaded', function () {
  //   const uploadModal = document.getElementById('uploadModal');
    
  //   uploadModal.addEventListener('show.bs.modal', function (event) {
  //     const button = event.relatedTarget;
  //     const jobTitle = button.getAttribute('data-job-title');
  //     const jobId = button.getAttribute('data-job-id');
  //     alert(jobTitle);
  //     // Set values in modal
  //     uploadModal.querySelector('#job_title').value = jobTitle;
  //     uploadModal.querySelector('#job_id').value = jobId;
  //   });
  // });

</script>
@endpush