@extends('layouts.horizontalLayout')

@section('title', 'Create Event')

@section('vendor-style')
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
<style>
  .modal-onboarding .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
    justify-content: center;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
  .modal-onboarding .modal-content {
    border-radius: 18px;
    width: 100%;
    min-height: 460px;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 18px 18px 18px;
    box-sizing: border-box;
    box-shadow: 0 8px 32px 0 rgba(34,41,47,0.12);
    background: #fff;
  }
  .modal-onboarding .modal-header {
    border: none;
    width: 100%;
    justify-content: flex-end;
    padding-bottom: 0;
    padding-top: 0;
  }
  .onboarding-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .onboarding-media {
    margin-bottom: 8px;
  }
  .onboarding-media img {
    width: 180px;
    max-width: 100%;
    margin: 0 auto 12px;
    display: block;
  }
  .onboarding-content {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
  }
  .onboarding-title {
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    color: #65676b;
  }
  .onboarding-info {
    font-size: 1.02rem;
    color: #888ea8;
    margin-bottom: 0.4rem;
  }

  /* Center the modal backdrop content! */
  .modal-backdrop.show {
    opacity: .25;
  }

  /* Other styles below are your existing ones, unchanged: */
  .access-level-section {
    margin-top: 1.2rem;
    margin-left: 2.2rem;
    margin-bottom: 1rem;
    transition: opacity 0.2s;
    opacity: 1;
  }
  .access-level-section[hidden] {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .option-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 0.5rem;
  }
  .option-col {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 400px;
  }
  .form-switch .form-check-input {
    width: 2.4em;
    height: 1.2em;
  }
  .form-check-input:disabled {
    background-color: #ececec !important;
    border-color: #ececec !important;
    cursor: not-allowed;
  }
  .form-check-label {
    font-weight: 500;
  }
  .notify-channel-row {
    display: flex;
    gap: 5rem;
    margin-top: 1.1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .notify-col {
    flex: 1 1 350px;
    min-width: 250px;
    max-width: 480px;
  }
  .notify-label {
    font-weight: 500;
    color: #36395a;
  }
  .notify-desc {
    font-size: 0.92rem;
    color: #6a707e;
    margin-bottom: 0.3rem;
    margin-left: 2.05rem;
  }
  .btn-theme {
    background: #36395a;
    color: #fff;
    border: none;
    min-width: 140px;
    border-radius: 8px;
    transition: all .15s;
    font-weight: 600;
  }
  .btn-theme:hover, .btn-theme:active {
    background: #23253a;
    color: #fff;
  }
  .branding-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
    background: #fafbfc;
    border-radius: 8px;
    overflow: hidden;
  }
  .branding-table th, .branding-table td {
    padding: 0.85rem 1.2rem;
    text-align: left;
    font-size: 1rem;
    color: #36395a;
    background: #fafbfc;
  }
  .branding-table th {
    background: #f6f7fb;
    font-weight: 600;
    border-bottom: 1px solid #f1f1f1;
  }
  .branding-empty-state {
    text-align: center;
    padding: 3.5rem 0 2rem 0;
  }
  .branding-empty-state-message {
    font-size: 1.35rem;
    font-weight: 600;
    color: #444a55;
    margin-bottom: 1.4rem;
  }
  .btn-dark-theme {
    background: #36395a;
    color: #fff;
    border: none;
    border-radius: 8px;
    min-width: 120px;
    box-shadow: 0 4px 18px #36395a33;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.48rem 1.5rem;
    transition: box-shadow .15s;
  }
  .btn-dark-theme:hover, .btn-dark-theme:active {
    background: #23253a;
    color: #fff;
    box-shadow: 0 2px 8px #23253a33;
  }
</style>
@endsection

@section('vendor-script')
<script src="{{ asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/cleavejs/cleave.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/cleavejs/cleave-phone.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
<script src="{{ asset('assets/js/form-layouts.js') }}"></script>
@if(session('event_success'))
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var eventModal = new bootstrap.Modal(document.getElementById('eventSuccessModal'));
    eventModal.show();
  });
</script>
@endif
<script>
document.addEventListener('DOMContentLoaded', function() {
  const enablePinToggle = document.getElementById('enable_pin_toggle');
  const privacySection = document.getElementById('privacy-section');
  const accessLevelSection = document.getElementById('access-level-section');
  const publicToggle = document.getElementById('event_visibility_public');
  const notifyClientsToggle = document.getElementById('notify_clients');
  const notifyChannelsSection = document.getElementById('notify-channels-section');
  const addBrandingCheckbox = document.getElementById('add_branding');
  const brandingSection = document.getElementById('select-branding-section');

  function updatePinSections() {
    if (publicToggle.checked) {
      enablePinToggle.disabled = false;
      enablePinToggle.parentElement.classList.remove('opacity-50');
    } else {
      enablePinToggle.checked = false;
      enablePinToggle.disabled = true;
      enablePinToggle.parentElement.classList.add('opacity-50');
    }
    if (enablePinToggle.checked && publicToggle.checked) {
      privacySection.style.display = '';
      accessLevelSection.hidden = true;
    } else {
      privacySection.style.display = 'none';
      accessLevelSection.hidden = false;
    }
  }

  function updateNotifyChannels() {
    notifyChannelsSection.style.display = notifyClientsToggle.checked ? '' : 'none';
  }

  function updateBrandingSection() {
    brandingSection.style.display = addBrandingCheckbox.checked ? '' : 'none';
  }

  publicToggle.addEventListener('change', updatePinSections);
  enablePinToggle.addEventListener('change', updatePinSections);
  updatePinSections();

  notifyClientsToggle.addEventListener('change', updateNotifyChannels);
  updateNotifyChannels();

  addBrandingCheckbox.addEventListener('change', updateBrandingSection);
  updateBrandingSection();
});
</script>
@endsection

@section('content')

{{-- Modal for Event Success --}}
<div class="modal-onboarding modal fade animate__animated" id="eventSuccessModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content text-center">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="onboarding-horizontal">
        <div class="onboarding-media">
          <img src="{{ asset('assets/img/illustrations/boy-with-rocket-' . ($configData['style'] ?? 'light') . '.png') }}" alt="success" />
        </div>
        <div class="onboarding-content">
          <h4 class="onboarding-title text-body">Event Created Successfully!</h4>
          
        </div>
      </div>
    </div>
  </div>
</div>
{{-- /Modal for Event Success --}}

@if($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach($errors->all() as $error)
      <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

<h4 class="fw-bold py-3 mb-4">
    Create Event
</h4>
<!-- Create Event Form -->
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-lg-10 mx-auto">
            <form method="POST" action="{{ route('events.store') }}" enctype="multipart/form-data">
              @csrf
              <div class="row g-3 align-items-end">
                <div class="col-md-5">
                  <label for="event_name" class="form-label">Name</label>
                  <input type="text" id="event_name" name="event_name" class="form-control @error('event_name') is-invalid @enderror" placeholder="Event Name" required value="{{ old('event_name') }}" />
                  <div class="form-text">Name your event. This will be displayed on the event cover</div>
                </div>
                <div class="col-md-3">
                  <label for="event_date" class="form-label">Date</label>
                  <input type="date" id="event_date" name="event_date" class="form-control @error('event_date') is-invalid @enderror" value="{{ old('event_date', date('Y-m-d')) }}" required />
                  <div class="form-text">When did the event occur</div>
                </div>
                <div class="col-md-4">
                  <label for="event_type" class="form-label">Type of Event</label>
                  <select class="form-select @error('event_type') is-invalid @enderror" id="event_type" name="event_type" required>
                    <option value="Conference" {{ old('event_type') == 'Conference' ? 'selected' : '' }}>Conference</option>
                    <option value="Wedding" {{ old('event_type') == 'Wedding' ? 'selected' : '' }}>Wedding</option>
                    <option value="Birthday" {{ old('event_type') == 'Birthday' ? 'selected' : '' }}>Birthday</option>
                    <option value="Concert" {{ old('event_type') == 'Concert' ? 'selected' : '' }}>Concert</option>
                    <option value="Other" {{ old('event_type') == 'Other' ? 'selected' : '' }}>Other</option>
                  </select>
                  <div class="form-text">Select the type of event</div>
                </div>
              </div>
              <div class="my-3">
                <label for="event_details" class="form-label">Details</label>
                <textarea id="event_details" name="event_details" class="form-control @error('event_details') is-invalid @enderror" placeholder="Event Details [Optional]" rows="2">{{ old('event_details') }}</textarea>
              </div>
              <!-- Event Cover Image Upload -->
              <div class="mb-3">
                <label for="event_cover" class="form-label">Event Cover Image</label>
                <input class="form-control @error('event_cover') is-invalid @enderror" type="file" id="event_cover" name="event_cover" accept="image/*">
                <div class="form-text mt-1">
                  <ul class="mb-0 ps-3 small text-muted">
                    <li>Recommended size: <b>1920px x 1080px</b></li>
                    <li>File size should be less than <b>2MB</b></li>
                    <li>Accepted formats: JPG, PNG</li>
                  </ul>
                </div>
              </div>
              <!-- /Event Cover Image Upload -->

              <div class="form-check my-3">
                <input class="form-check-input" type="checkbox" id="add_branding" name="add_branding" {{ old('add_branding') ? 'checked' : '' }}>
                <label class="form-check-label" for="add_branding">
                  Add Branding to the Event
                </label>
                <div class="form-text">
                  Your brand will be visible on client gallery
                </div>
              </div>

              <!-- Branding selection section, only visible if Add Branding is checked -->
              <div id="select-branding-section" style="display:none;">
                @if(isset($brandings) && $brandings->count())
                  <table class="branding-table">
                    <thead>
                      <tr>
                        <th style="width:80px;">Use</th>
                        <th>Name</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($brandings as $branding)
                        <tr>
                          <td>
                            <input type="radio" name="branding_id" value="{{ $branding->id }}" {{ old('branding_id') == $branding->id ? 'checked' : '' }}>
                          </td>
                          <td>{{ $branding->company_name }}</td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                @else
                  <div class="branding-empty-state">
                    <div class="branding-empty-state-message">You don't have any brandings</div>
                    <button type="button" class="btn btn-dark-theme" onclick="window.location.href='{{ route('settings/branding') }}'">Add Brand</button>
                  </div>
                @endif
              </div>
              <!-- End Branding selection section -->

              <!-- Notification Settings -->
              <div class="my-4">
                <h6 class="fw-bold mb-1">
                  <i class="ti ti-bell"></i> Notification Settings
                </h6>
                <div class="form-text mb-2">How your clients should get notified about their photos</div>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="notify_clients" name="notify_clients" {{ old('notify_clients') ? 'checked' : '' }}>
                  <label class="form-check-label" for="notify_clients">Enable Notifications</label>
                </div>
                <!-- WhatsApp/Email notification channels -->
                <div class="notify-channel-row" id="notify-channels-section" style="display:none;">
                  <div class="notify-col">
                    <div class="notify-label"><i class="ti ti-brand-whatsapp"></i> WhatsApp</div>
                    <div class="notify-desc">
                      Make sure you have enough credits to send whatsapp notifications<br>
                      Guests will receive whatsapp when event is published
                    </div>
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="notify_whatsapp" name="notify_whatsapp" {{ old('notify_whatsapp') ? 'checked' : '' }}>
                    </div>
                  </div>
                  <div class="notify-col">
                    <div class="notify-label"><i class="ti ti-mail"></i> Email</div>
                    <div class="notify-desc">
                      Guests will receive mail when they register and when event is published
                    </div>
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="notify_email" name="notify_email" {{ old('notify_email') ? 'checked' : '' }}>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Event Visibility & Enable PIN, side by side like in image 4 -->
              <div class="option-row my-4">
                <div class="option-col">
                  <div class="mb-1">
                    <label class="form-label" style="color:#444;">
                      <i class="ti ti-eye"></i> Public
                    </label>
                  </div>
                  <div class="form-text mb-1" style="margin-left:0.1rem;">
                    Turn ON to make event public<br>
                    You can secure it by enabling PIN
                  </div>
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="event_visibility_public" name="event_visibility" {{ old('event_visibility', true) ? 'checked' : '' }}>
                  </div>
                </div>
                <div class="option-col">
                  <div class="mb-1">
                    <label class="form-label" style="color:#444;">
                      <i class="ti ti-lock"></i> Enable PIN
                    </label>
                  </div>
                  <div class="form-text mb-1" style="margin-left:0.1rem;">
                    Secure the access using PIN<br>
                    Access Level will be decided by PIN
                  </div>
                  <div class="form-check form-switch opacity-50">
                    <input class="form-check-input" type="checkbox" id="enable_pin_toggle" name="enable_pin" {{ old('enable_pin') ? 'checked' : '' }}>
                  </div>
                </div>
              </div>

              <!-- Default Access Level (when PIN is disabled) -->
              <div id="access-level-section" class="access-level-section">
                <div class="mb-2 fw-semibold" style="color:#444;">Default Access Level</div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="default_access_level" id="default_guest_access" value="guest" {{ old('default_access_level', 'guest') == 'guest' ? 'checked' : '' }}>
                  <label class="form-check-label" for="default_guest_access">
                    Guest Access
                    <div class="form-text" style="margin-left:0;">Own images can be accessed using selfie</div>
                  </label>
                </div>
                <div class="form-check mt-1">
                  <input class="form-check-input" type="radio" name="default_access_level" id="default_full_access" value="full" {{ old('default_access_level') == 'full' ? 'checked' : '' }}>
                  <label class="form-check-label" for="default_full_access">
                    Full Access
                    <div class="form-text" style="margin-left:0;">All the images can be accessed.</div>
                  </label>
                </div>
              </div>

              <!-- Privacy Section (hidden unless PIN enabled) -->
              <div id="privacy-section" style="display:none;">
                <div class="my-4">
                  <h6 class="fw-bold mb-1">
                    <i class="ti ti-shield-lock"></i> Privacy
                  </h6>
                  <div class="form-text mb-2">How your clients should get notified about their photos</div>
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label for="guest_pin" class="form-label">Guest access PIN</label>
                      <div class="input-group">
                        <input type="text" id="guest_pin" name="guest_pin" class="form-control @error('guest_pin') is-invalid @enderror" maxlength="4" placeholder="4 digit PIN" value="{{ old('guest_pin', $guest_pin ?? '') }}" />
                        <button class="btn btn-outline-secondary" type="button" onclick="navigator.clipboard.writeText(document.getElementById('guest_pin').value)">
                          <i class="ti ti-copy"></i>
                        </button>
                      </div>
                      <div class="form-text">
                        * Please provide 4 digit PIN
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <label for="full_pin" class="form-label">Full access PIN</label>
                      <div class="input-group">
                        <input type="text" id="full_pin" name="full_pin" class="form-control @error('full_pin') is-invalid @enderror" maxlength="4" placeholder="4 digit PIN" value="{{ old('full_pin', $full_pin ?? '') }}" />
                        <button class="btn btn-outline-secondary" type="button" onclick="navigator.clipboard.writeText(document.getElementById('full_pin').value)">
                          <i class="ti ti-copy"></i>
                        </button>
                      </div>
                      <div class="form-text">
                        * Please provide 4 digit PIN<br>
                        * All images can be accessed.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /Privacy Section -->

               <div class="d-flex justify-content-end mt-4">
                <button type="submit" class="btn btn-primary">
                  Create Event
                </button>
              </div>
            </form>
            <!-- End Create Event Form -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Create Event Form -->
@endsection