@extends('layouts/blankLayout')

{{-- Set the page title to company_name --}}
@section('title', $company_name ?? 'Help Center')

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-help-center.css')}}" />
<style>
  .event-card {
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(16,30,54,0.06);
    background: #fff;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: box-shadow 0.2s;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    text-decoration: none;
  }
  .event-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: #f8f9fa;
    display: block;
  }
  .event-card-noimg {
    width: 100%;
    height: 180px;
    background: #f3f3f3;
    color: #b5b5b5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    flex-direction: column;
    font-size: 1.1rem;
    font-weight: 500;
  }
  .event-card-noimg svg {
    margin-bottom: 0.25rem;
  }
  .event-card-body {
    padding: 1.5rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .event-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3b3f5c;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .event-card-date {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  /* --- Selfie Modal styles --- */
  #webcamModal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 5000;
    background: rgba(0,0,0,.7);
    align-items: center;
    justify-content: center;
  }
  #webcamModal .webcam-content {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    max-width: 95vw;
    max-height: 95vh;
    text-align: center;
  }
</style>
@endsection

@section('content')
<!-- Help Center Header -->
<div class="help-center-header rounded d-flex flex-column justify-content-center align-items-center bg-help-center">
  <h3 class="text-center">{{ $company_name ?? 'Company' }}</h3>
  <div class="input-wrapper mb-3 input-group input-group-lg input-group-merge">
    <span class="input-group-text" id="basic-addon1"><i class="ti ti-search"></i></span>
    <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" />
  </div>
  <p class="text-center px-3 mb-0">Common troubleshooting topics: eCommerce, Blogging to payment</p>
</div>

<!-- Events Gallery -->
<div class="help-center-popular-articles bg-help-center py-5">
  <div class="container-xl">
    <h4 class="mb-4">LIVE EVENTS</h4>
    <div class="row">
      @forelse($events as $event)
        <div class="col-lg-4 col-md-6">
          <a href="javascript:void(0);" 
             class="event-card" 
             data-event-id="{{ $event->id }}"
             data-galleryurl="{{ $galleryurl }}"
             data-is-public="{{ $event->is_public }}"
             data-enable-pin="{{ $event->enable_pin }}"
             data-default-access-level="{{ $event->default_access_level }}">
            @if($event->event_cover)
              <img src="{{ asset('storage/event_covers/' . basename($event->event_cover)) }}" alt="{{ $event->event_name }}" class="event-card-img">
            @else
              <div class="event-card-noimg">
                <svg width="40" height="40" fill="#b5b5b5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <rect x="2" y="2" width="20" height="20" rx="4" fill="#eee"/>
                  <path d="M8 16l3-4 5 6H6l2-2zM10 10a2 2 0 1 0 4 0 2 2 0 0 0-4 0z" />
                </svg>
                No Image
              </div>
            @endif
            <div class="event-card-body">
              <div class="event-card-title" title="{{ $event->event_name }}">
                {{ $event->event_name }}
              </div>
              <div class="event-card-date">
                {{ \Carbon\Carbon::parse($event->event_date)->format('l, F d, Y') }}
              </div>
            </div>
          </a>
        </div>
      @empty
        <p class="text-center">No events available at this moment.</p>
      @endforelse
    </div>
  </div>
</div>

<!-- PIN Entry Modal -->
<div class="modal fade" id="pinModal" tabindex="-1" aria-labelledby="pinModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Enter PIN to Access Photos</h5></div>
      <div class="modal-body">
        <input type="text" class="form-control" id="pinInput" placeholder="Enter PIN">
        <div id="pinError" class="text-danger mt-2" style="display:none;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="pinModalBtn">Access Gallery</button>
      </div>
    </div>
  </div>
</div>

<!-- Guest Info & Take Selfie Modal -->
<div class="modal fade" id="guestInfoModal" tabindex="-1" aria-labelledby="guestInfoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form id="guestInfoForm" enctype="multipart/form-data">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Find Your Event Photos</h5>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" name="name" class="form-control" placeholder="Your Name" required>
          </div>
          <div class="mb-3">
            <input type="email" name="email" class="form-control" placeholder="Your Email" required>
          </div>
          <div class="mb-3">
            <input type="tel" name="phone" class="form-control" placeholder="Your Phone Number" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Take Your Selfie</label>
            <input type="file" name="selfie" id="selfieInput" class="d-none" accept="image/*" capture="user" required>
            <div id="selfiePreview" class="mb-2"></div>
            <button type="button" class="btn btn-secondary mb-2" id="takeSelfieBtn">Take Selfie</button>
            <small class="text-muted">Use your phone or webcam to take a selfie now.</small>
            <div id="webcamModal">
              <div class="webcam-content">
                <video id="selfieVideo" width="320" height="240" autoplay style="border-radius:10px;"></video>
                <div class="text-center mt-2">
                  <button type="button" class="btn btn-primary" id="captureSelfieBtn">Capture</button>
                  <button type="button" class="btn btn-secondary" id="cancelWebcamBtn">Cancel</button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-check mb-3">
            <input type="checkbox" name="terms" class="form-check-input" id="acceptTerms" required>
            <label class="form-check-label" for="acceptTerms">
              I accept the <a href="#" target="_blank">Terms and Conditions</a>
            </label>
          </div>
          <div id="guestInfoError" class="text-danger mb-2" style="display:none;"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="guestInfoSearchBtn">Search</button>
        </div>
      </div>
    </form>
  </div>
</div>


<!-- Help Area -->
<div class="help-center-contact-us help-center-bg-alt">
  <div class="container-xl">
    <div class="row justify-content-center py-5">
      <div class="col-md-8 col-lg-6 text-center mt-4">
        <h3>Still need help?</h3>
        <p class="mb-3"> Our specialists are always happy to help. Contact us during standard business hours or email us 24/7 and we'll get back to you. </p>
        <div class="d-flex justify-content-center flex-wrap gap-4">
          <a href="javascript:void(0);" class="btn btn-primary">Visit our community</a>
          <a href="javascript:void(0);" class="btn btn-primary">Contact us</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Help Area -->



























@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    let selectedEventId = null;
    let selectedGalleryUrl = null;

    document.querySelectorAll('.event-card').forEach(function(card) {
        card.addEventListener('click', function () {
            const isPublic = card.dataset.isPublic == "1";
            const enablePin = card.dataset.enablePin == "1";
            const accessLevel = card.dataset.defaultAccessLevel;
            selectedEventId = card.dataset.eventId;
            selectedGalleryUrl = card.dataset.galleryurl;

            if (enablePin) {
                $('#pinModal').modal('show');
            } else if (isPublic) {
                if (accessLevel === 'full') {
                    window.location.href = `/${selectedGalleryUrl}/${selectedEventId}/view`;
                } else {
                    $('#guestInfoModal').modal('show');
                }
            } else {
                alert('Access restricted.');
            }
        });
    });

    document.getElementById('pinModalBtn').onclick = function() {
        const pin = document.getElementById('pinInput').value;
        if (!pin) {
            document.getElementById('pinError').innerText = 'Please enter a PIN.';
            document.getElementById('pinError').style.display = 'block';
            return;
        }
        document.getElementById('pinError').style.display = 'none';
        // Submit the PIN via POST using JS (AJAX or via form)
        let form = document.createElement('form');
        form.method = 'POST';
        form.action = `/${selectedGalleryUrl}/${selectedEventId}/view`;
        // Add CSRF token
        let csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        // Add pin input
        let pinInput = document.createElement('input');
        pinInput.type = 'hidden';
        pinInput.name = 'pin';
        pinInput.value = pin;
        form.appendChild(pinInput);

        document.body.appendChild(form);
        form.submit();
    };

    document.getElementById('guestInfoSearchBtn').onclick = function() {
        let form = document.getElementById('guestInfoForm');
        let errorDiv = document.getElementById('guestInfoError');
        errorDiv.style.display = 'none';
        if(!form.name.value || !form.email.value || !form.phone.value || !form.selfie.files.length || !form.terms.checked) {
            errorDiv.innerText = "All fields are required and you must accept the terms.";
            errorDiv.style.display = 'block';
            return;
        }
        let action = `/${selectedGalleryUrl}/${selectedEventId}/view`;
        form.method = 'POST';
        form.action = action;
        if(!form.querySelector('[name="_token"]')) {
            let csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '{{ csrf_token() }}';
            form.appendChild(csrf);
        }
        form.submit();
    };

    // --- Selfie logic ---
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    const takeSelfieBtn = document.getElementById('takeSelfieBtn');
    const selfieInput = document.getElementById('selfieInput');
    const webcamModal = document.getElementById('webcamModal');
    const selfieVideo = document.getElementById('selfieVideo');
    const captureSelfieBtn = document.getElementById('captureSelfieBtn');
    const cancelWebcamBtn = document.getElementById('cancelWebcamBtn');
    const selfiePreview = document.getElementById('selfiePreview');
    let stream = null;

    takeSelfieBtn.onclick = function() {
        if (isMobile) {
            selfieInput.click();
        } else {
            webcamModal.style.display = 'flex';
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function(s) {
                    stream = s;
                    selfieVideo.srcObject = stream;
                })
                .catch(function(err) {
                    alert("Could not access webcam: " + err);
                    webcamModal.style.display = 'none';
                });
        }
    };

    selfieInput.onchange = function(e) {
        if (selfieInput.files.length > 0) {
            const file = selfieInput.files[0];
            selfiePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Selfie Preview" style="max-width:100%;border-radius:8px;">`;
        }
    };

    captureSelfieBtn.onclick = function() {
        const canvas = document.createElement('canvas');
        canvas.width = selfieVideo.videoWidth;
        canvas.height = selfieVideo.videoHeight;
        canvas.getContext('2d').drawImage(selfieVideo, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(function(blob) {
            const file = new File([blob], "selfie.png", {type: "image/png"});
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            selfieInput.files = dataTransfer.files;
            selfiePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Selfie Preview" style="max-width:100%;border-radius:8px;">`;
        }, 'image/png');

        stopStream();
        webcamModal.style.display = 'none';
    };

    cancelWebcamBtn.onclick = function() {
        stopStream();
        webcamModal.style.display = 'none';
    };

    function stopStream() {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            stream = null;
        }
    }
});
</script>
@endsection