@extends('layouts.admin.index')

@section('content')
<div class="row">
  <div class="col-sm-12">
    <div class="home-tab">
      <div class="tab-content tab-content-basic">
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
          <div class="container-fluid">

            <!-- Header Image -->
            <div class="image-box mb-4 rounded border border-secondary">
              <img src="{{ asset('img/popupAdmin.png') }}" alt="Popup Image" class="img-fluid" style="width: 100%; height: auto;">
            </div>

            <!-- Info Section -->
            <div class="alert alert-info mt-4">
              <strong>Info:</strong>
              <ul style="margin-top:10px; font-size: 15px;">
                <li><strong>Upload Image:</strong> Please upload an image for the pop-up display. Recommended size: <strong>1080 x 2340 px</strong>.</li>
                <li><strong>File Size:</strong> Ensure the image file size is below <strong>10MB</strong>.</li>
                <li><strong>Event Name:</strong> Enter a short and clear name for the pop-up event.</li>
              </ul>
              After submission, the pop-up will be shown on the main page of the app.
            </div>

            <!-- Form Card -->
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Create Pop-up Display</h6>
              </div>
              <div class="card-body">
                @if(session('success'))
                  <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <form action="{{ route('admin.popup.store') }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  <div class="form-group">
                    <label for="name_event">Event Name</label>
                    <input type="text" name="name_event" id="name_event" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label for="image_event">Upload Image</label>
                    <input type="file" name="image_event" id="image_event" class="form-control" required>
                  </div>

                  <button type="submit" class="btn btn-primary">Create Pop-up</button>
                </form>

                <!-- Existing Popups -->
                <!-- <h2 class="mt-5">Existing Pop-ups</h2>
                <table class="table mt-3">
                  <thead>
                    <tr>
                      <th>Image</th>
                      <th>Event Name</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($popups as $popup)
                      <tr>
                        <td><img src="{{ asset($popup->image_event) }}" width="100" alt=""></td>
                        <td>{{ $popup->name_event }}</td>
                        <td>
                          <form action="{{ route('admin.popup.delete', $popup->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                          </form>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table> -->

                <!-- Existing Popups -->
                <h2 class="mt-5">Existing Pop-ups</h2>
                <table class="table mt-3 align-middle">
                  <thead class="table-light">
                    <tr>
                      <th>Image</th>
                      <th>Event Name</th>
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($popups as $popup)
                    <tr>
                      <td><img src="{{ asset($popup->image_event) }}" width="100" alt=""></td>
                      <td>{{ $popup->name_event }}</td>
                      <td>
                        <form action="{{ route('admin.popup.toggle', $popup->id) }}" method="POST">
                          @csrf
                          <label class="form-check form-switch">
                            <input type="checkbox" class="form-check-input" onchange="this.form.submit()" {{ $popup->is_enabled ? 'checked' : '' }}>
                            <span class="ms-2">{{ $popup->is_enabled ? 'Enabled' : 'Disabled' }}</span>
                          </label>
                        </form>
                      </td>

                      <td>
                        <form action="{{ route('admin.popup.delete', $popup->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this popup?');">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div> <!-- container -->
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  @if(session('success'))
    Swal.fire({
      icon: 'success',
      title: 'Success',
      text: "{{ session('success') }}",
      showConfirmButton: false,
      timer: 2000
    });
  @endif

  @if(session('error'))
    Swal.fire({
      icon: 'error',
      title: 'Oops!',
      text: "{{ session('error') }}",
      showConfirmButton: true
    });
  @endif
</script>

@endsection