@extends('admin.layouts.app')

@section('title', 'Daftar Challenge')

@section('content')

<style>
    .page-title {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 10px;
        margin-top: -20px;
    }

    .custom-card {
        background: white;
        border-radius: 20px;
        border: 2px solid #e5e5e5;
        padding: 25px;
    }

    .btn-primary-custom {
        background: #2b8ef3;
        color: white;
        border-radius: 10px;
        padding: 8px 18px;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        text-decoration: none;
    }

    .table-header {
        background: #a5e6ba;
    }

    .search-box {
        background: #a5e6ba;
        border-radius: 30px;
        padding: 6px 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .search-box input {
        border: none;
        outline: none;
        background: transparent;
        width: 150px;
    }

    .action-icon {
        width: 20px;
        cursor: pointer;
        margin: 0 5px;
    }

    .modal-header-pastel {
        background: #FFD97D !important;
        color: black !important;
        border-bottom: none;
        padding: 15px 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
</style>

<h3 class="page-title">DAFTAR CHALLENGE</h3>

<div class="custom-card">

    <div class="d-flex justify-content-between align-items-center mb-3">

        <button class="btn-primary-custom" data-bs-toggle="modal" data-bs-target="#modalTambah">
            <img src="{{ asset('images/icon/main/add.png') }}" width="18">
            Tambah Data
        </button>

        <form method="GET">
            <div class="search-box">
                <input type="text" name="search" placeholder="Cari"
                       value="{{ request('search') }}">
                <button style="border:none;background:none">
                    <img src="{{ asset('images/icon/main/search.png') }}" width="18">
                </button>
            </div>
        </form>

    </div>

    {{-- Alert --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <table class="table text-center align-middle">
        <thead class="table-header">
            <tr>
                <th>No</th>
                <th>Judul Challenge</th>
                <th>EXP</th>
                <th>Tenggat</th>
                <th>Aksi</th>
            </tr>
        </thead>

        <tbody>
            @forelse($challenges as $index => $challenge)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $challenge->judul_challenge }}</td>
                <td>{{ $challenge->exp }}</td>
                <td>{{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('d M Y H:i') }}</td>

                <td>
                    <button onclick="openEditModal(
                        '{{ $challenge->id_challenge }}',
                        '{{ $challenge->judul_challenge }}',
                        '{{ $challenge->deskripsi }}',
                        '{{ $challenge->exp }}',
                        '{{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('Y-m-d\TH:i') }}'
                    )" style="border:none;background:none">
                        <img src="{{ asset('images/icon/main/edit.png') }}" class="action-icon">
                    </button>

                    <form action="{{ route('admin.challenge.destroy', $challenge->id_challenge) }}"
                          method="POST" class="d-inline"
                          onsubmit="return confirm('Yakin ingin menghapus challenge ini?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="border:none;background:none">
                            <img src="{{ asset('images/icon/main/del.png') }}" class="action-icon">
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5">Belum ada challenge</td>
            </tr>
            @endforelse
        </tbody>
    </table>

</div>

{{-- MODAL TAMBAH --}}
<div class="modal fade" id="modalTambah">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <form action="{{ route('admin.challenge.store') }}" method="POST">
                @csrf

                <div class="modal-header modal-header-pastel">
                    <h5 class="modal-title w-100 text-center">Tambah Challenge</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                {{-- STEP 1 --}}
                <div class="modal-body" id="tambahStep1">

                    <div class="mb-3">
                        <label>Judul *</label>
                        <input type="text" name="judul_challenge" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label>Deskripsi</label>
                        <textarea name="deskripsi" class="form-control"></textarea>
                    </div>

                    <div class="mb-3">
                        <label>Total EXP *</label>
                        <input type="number" name="exp" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label>Tenggat *</label>
                        <input type="datetime-local" name="tenggat_waktu" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label>Pilih Kelas *</label>
                        @foreach($kelass as $kelas)
                            <div class="form-check">
                                <input class="form-check-input"
                                       type="checkbox"
                                       name="kelas[]"
                                       value="{{ $kelas->id_kelas }}">
                                <label class="form-check-label">
                                    {{ $kelas->tingkat }} - {{ $kelas->nama_kelas }}
                                </label>
                            </div>
                        @endforeach
                    </div>

                </div>

                {{-- STEP 2 --}}
                <div class="modal-body d-none" id="tambahStep2">

                    <h5 class="mb-3">Tambah Soal</h5>

                    <div id="soalContainer"></div>

                    <button type="button"
                            class="btn btn-primary"
                            onclick="addSoal()">
                        + Tambah Soal
                    </button>

                </div>

                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button"
                            class="btn btn-warning d-none"
                            id="tambahBackBtn"
                            onclick="backTambahStep()">
                        Back
                    </button>

                    <button type="button"
                            class="btn btn-primary"
                            id="tambahNextBtn"
                            onclick="nextTambahStep()">
                        Next
                    </button>

                    <button type="submit"
                            class="btn btn-success d-none"
                            id="tambahSubmitBtn">
                        Simpan Semua
                    </button>
                </div>

            </form>

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

{{-- MODAL EDIT --}}
<div class="modal fade" id="modalEdit">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header modal-header-pastel">
        <h5 class="modal-title w-100 text-center">Edit Challenge</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <form id="formEdit" method="POST">
        @csrf
        @method('PUT')

        <div class="modal-body">

          <div class="mb-3">
            <label>Judul Challenge *</label>
            <input type="text" id="editJudul" name="judul_challenge" class="form-control" required>
          </div>

          <div class="mb-3">
            <label>Deskripsi</label>
            <textarea id="editDeskripsi" name="deskripsi" class="form-control"></textarea>
          </div>

          <div class="mb-3">
            <label>EXP *</label>
            <input type="number" id="editExp" name="exp" class="form-control" required>
          </div>

          <div class="mb-3">
            <label>Tenggat Waktu *</label>
            <input type="datetime-local" id="editTenggat" name="tenggat_waktu" class="form-control" required>
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-success">Update</button>
        </div>

      </form>

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

<script>

function openEditModal(id, judul, deskripsi, exp, tenggat) {
    document.getElementById('editJudul').value = judul;
    document.getElementById('editDeskripsi').value = deskripsi;
    document.getElementById('editExp').value = exp;
    document.getElementById('editTenggat').value = tenggat;
    document.getElementById('formEdit').action = '/admin/challenge/' + id;

    var modal = new bootstrap.Modal(document.getElementById('modalEdit'));
    modal.show();
}

function nextTambahStep(){
    document.getElementById('tambahStep1').classList.add('d-none');
    document.getElementById('tambahStep2').classList.remove('d-none');

    document.getElementById('tambahNextBtn').classList.add('d-none');
    document.getElementById('tambahSubmitBtn').classList.remove('d-none');
    document.getElementById('tambahBackBtn').classList.remove('d-none');
}

function backTambahStep(){
    document.getElementById('tambahStep1').classList.remove('d-none');
    document.getElementById('tambahStep2').classList.add('d-none');

    document.getElementById('tambahNextBtn').classList.remove('d-none');
    document.getElementById('tambahSubmitBtn').classList.add('d-none');
    document.getElementById('tambahBackBtn').classList.add('d-none');
}

function addSoal(){
    let html = `
    <div class="border rounded p-3 mb-3">
        <div class="mb-2">
            <label>Pertanyaan</label>
            <textarea name="pertanyaan[]" class="form-control" required></textarea>
        </div>

        <div class="row">
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_a[]" class="form-control" placeholder="Opsi A" required>
            </div>
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_b[]" class="form-control" placeholder="Opsi B" required>
            </div>
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_c[]" class="form-control" placeholder="Opsi C" required>
            </div>
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_d[]" class="form-control" placeholder="Opsi D" required>
            </div>
        </div>

        <div class="mb-2">
            <label>Jawaban Benar</label>
            <select name="jawaban_benar[]" class="form-control" required>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
        </div>
    </div>
    `;

    document.getElementById('soalContainer').insertAdjacentHTML('beforeend', html);
}

</script>

@endsection