@extends('layouts.frontend')

@section('title', '| Apply Now')
@section('content')
<div id="apply-now-page">
    <section id="header">
        <div class="container">
            @include('layouts.inc.menu')
        </div>
    </section>
    <!--Apply form -->
    <div class="apply-now-form py3rem">
        <div class="container">
            <h2 class="text-center text-white pb-3">Apply Now</h2>
            <div class="row justify-content-center">
                <div class="col-lg-5 col-md-8">
                    <!-- Success Alert -->
                    <div class="alert alert-success alert-dismissible fade" role="alert" id="success-alert">
                        <strong>Success!</strong> Your application has been submitted successfully.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    
                    <!-- Error Alert -->
                    <div class="alert alert-danger alert-dismissible fade" role="alert" id="error-alert">
                        <strong>Error!</strong> <span id="error-message"></span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>

                    <form id="application-form">
                        @csrf
                        <!-- Rest of the form fields remain the same -->
                        <div class="form-group mt-3">
                            <label for="fullname" class="pb-2">Name:</label>
                            <input type="text" class="form-control" name="fullname" id="fullname" required />
                            <span class="text-danger error-message" id="fullname-error"></span>
                        </div>

                        <div class="form-group mt-3">
                            <label for="startup_name" class="pb-2">Startup Name:</label>
                            <input type="text" class="form-control" name="startup_name" id="startup_name" required />
                            <span class="text-danger error-message" id="startup_name-error"></span>
                        </div>

                        <div class="form-group mt-3">
                            <label for="email" class="pb-2">Email:</label>
                            <input type="email" class="form-control" name="email" id="email" required />
                            <span class="text-danger error-message" id="email-error"></span>
                        </div>

                        <div class="form-group mt-3">
                            <label for="pitch_deck_url" class="pb-2">Provide a Shareable URL for Your Pitch Deck (Google Drive, Dropbox, Canva, etc.):</label>
                            <input type="url" class="form-control" name="pitch_deck_url" id="pitch_deck_url" required />
                            <span class="text-danger error-message" id="pitch_deck_url-error"></span>
                        </div>

                        <div class="form-group mt-3">
                            <label for="location" class="pb-2">Location of the event:</label>
                            <select class="form-control" name="location" id="location">
                                <option value="">Select a location</option>
                                <option value="SXSW Austin">SXSW Austin</option>
                                <option value="Salt Lake City">Salt Lake City</option>
                                <option value="Waikiki">Waikiki</option>
                                <option value="Palm Beach">Palm Beach</option>
                                <option value="Las Vegas">Las Vegas</option>
                                <option value="Silicon Valley">Silicon Valley</option>
                                <option value="Nashville">Nashville</option>
                                <!--<option value="">Select a location</option>
                                <option value="Pittsburgh">Pittsburgh</option>
                                <option value="Washington DC">Washington DC</option>
                                <option value="New York">New York</option>
                                <option value="Columbus">Columbus</option>
                                <option value="Detroit">Detroit</option>
                                <option value="Chicago">Chicago</option>
                                <option value="Tuscaloosa">Tuscaloosa</option>
                                <option value="Draper University">Draper University</option>
                                <option value="Other">Other</option>-->
                            </select>
                            <span class="text-danger error-message" id="location-error"></span>
                        </div>

                        <div class="text-center mt-3">
                            <button type="submit" class="btn btn-custom mt-3">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('js')
<script>
  $(document).ready(function() {
      function showAlert(type, message) {
          // Hide all alerts first
          $('.alert').hide().removeClass('show');
          
          if (type === 'success') {
              $('#success-alert').fadeIn().addClass('show');
          } else {
              $('#error-message').html(message);
              $('#error-alert').fadeIn().addClass('show');
          }
          
          // Scroll to the top of the form
          $('html, body').animate({
              scrollTop: $("#application-form").offset().top - 100
          }, 200);
      }
  
      $('#application-form').on('submit', function(e) {
          e.preventDefault();
          
          let submitBtn = $(this).find('button[type="submit"]');
          let originalText = submitBtn.html();
          
          // Hide any existing alerts
          $('.alert').hide().removeClass('show');
          
          // Show spinner
          submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...');
          submitBtn.prop('disabled', true);
  
          $.ajax({
              url: "{{ route('application.store') }}",
              method: 'POST',
              data: $(this).serialize(),
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              success: function(response) {
                  if(response.status === 'success') {
                      showAlert('success');
                      $('#application-form')[0].reset();
                      
                      // Add countdown message to success alert
                      let countdown = 10;
                      $('#success-alert strong').html('Success! Redirecting in ' + countdown + ' seconds...');
                      
                      // Update countdown every second
                      let countdownInterval = setInterval(function() {
                          countdown--;
                          $('#success-alert strong').html('Success! Redirecting in ' + countdown + ' seconds...');
                          
                          if (countdown <= 0) {
                              clearInterval(countdownInterval);
                              window.location.href = "{{ route('welcome') }}";
                          }
                      }, 1000);
                  }
              },
              error: function(xhr) {
                  // Clear previous error messages
                  $('.error-message').text('');
                  
                  if (xhr.responseJSON && xhr.responseJSON.errors) {
                      let errors = xhr.responseJSON.errors;
                      let errorMessage = '<ul class="mb-0">';
                      
                      // Loop through each error and add it to the message
                      Object.keys(errors).forEach(function(field) {
                          errorMessage += '<li>' + errors[field][0] + '</li>';
                          
                          // Also display error under the field
                          $('#' + field).addClass('is-invalid');
                          $('#' + field + '-error').text(errors[field][0]);
                      });
                      
                      errorMessage += '</ul>';
                      showAlert('error', errorMessage);
                  } else {
                      showAlert('error', 'Something went wrong. Please try again.');
                  }
              },
              complete: function() {
                  // Reset button state
                  submitBtn.html(originalText);
                  submitBtn.prop('disabled', false);
              }
          });
      });
  
      // Clear error styling on input
      $('input').on('input', function() {
          $(this).removeClass('is-invalid');
          $('#' + $(this).attr('id') + '-error').text('');
      });
  
      // Auto-hide alerts after 5 seconds
      $('.alert').on('shown.bs.alert', function () {
          let $alert = $(this);
          setTimeout(function() {
              $alert.fadeOut().removeClass('show');
          }, 5000);
      });
  });
  </script>
</script>
@endsection