<?php

include_once 'auth.php';

include_once '../config/database.php';

/* =========================================================
   SEARCH
========================================================= */

$search = isset($_GET['search'])
    ? trim($_GET['search'])
    : '';

/* =========================================================
   PENDING LIST
========================================================= */

$pending = mysqli_query(

    $conn,

    "SELECT

        participants.*

     FROM participant_collection

     INNER JOIN participants

     ON participant_collection.participant_id =
        participants.id

     WHERE participant_collection.status='pending'

     AND (

        participants.full_name LIKE '%$search%'

        OR

        participants.bib_number LIKE '%$search%'

     )

     ORDER BY participants.id DESC

     LIMIT 10"
);

/* =========================================================
   COLLECTED LIST
========================================================= */

$collected = mysqli_query(

    $conn,

    "SELECT

        participants.*,

        participant_collection.collected_at

     FROM participant_collection

     INNER JOIN participants

     ON participant_collection.participant_id =
        participants.id

     WHERE participant_collection.status='collected'

     AND (

        participants.full_name LIKE '%$search%'

        OR

        participants.bib_number LIKE '%$search%'

     )

     ORDER BY participant_collection.collected_at DESC

     LIMIT 10"
);

?>


<script src="https://unpkg.com/html5-qrcode"></script>


<div class="page-header">

    <h1 class="page-title">
        Race Pack Collection
    </h1>

</div>

<!-- SEARCH -->
<div class="admin-card racepack-search">

    <form method="GET"
          class="racepack-search__form">

        <input type="hidden"
               name="page"
               value="racepack">

        <input type="text"
               name="search"
               placeholder="Search name or BIB"
               value="<?php echo htmlspecialchars($search); ?>"
               class="admin-input"
               id="racepack-search-input">

        <button class="admin-btn admin-btn--primary"
                id="racepack-search-btn">

            <svg viewBox="0 0 24 24" width="16" height="16"
                 stroke="currentColor" fill="none"
                 stroke-width="2" stroke-linecap="round"
                 stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/>
                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>

            Search

        </button>

    </form>

</div>

<!-- MAIN GRID -->
<div class="racepack-grid">

    <!-- LEFT — QR SCANNER -->
    <div class="racepack-scanner">

        <div class="admin-card">

            <div class="racepack-card-header">

                <div class="racepack-card-icon racepack-card-icon--scanner">
                    <svg viewBox="0 0 24 24" width="20" height="20"
                         stroke="currentColor" fill="none"
                         stroke-width="1.8" stroke-linecap="round"
                         stroke-linejoin="round">
                        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                        <circle cx="12" cy="13" r="4"/>
                    </svg>
                </div>

                <h2>QR Scanner</h2>

            </div>

            <div id="reader"></div>

            <div id="scan-result"
                 style="margin-top:20px;"></div>

        </div>

    </div>

    <!-- RIGHT — TABLES -->
    <div class="racepack-tables">

        <!-- PENDING -->
        <div class="admin-card racepack-table-card">

            <div class="racepack-card-header">

                <div style="display:flex;align-items:center;gap:12px;">

                    <div class="racepack-card-icon racepack-card-icon--pending">
                        <svg viewBox="0 0 24 24" width="20" height="20"
                             stroke="currentColor" fill="none"
                             stroke-width="1.8" stroke-linecap="round"
                             stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="8" x2="12" y2="12"/>
                            <line x1="12" y1="16" x2="12.01" y2="16"/>
                        </svg>
                    </div>

                    <h2>Pending Pickup</h2>

                </div>

                <span class="badge badge--pending">
                    Latest 10
                </span>

            </div>

            <div style="overflow:auto">

                <table class="admin-table racepack-table">

                    <thead>

                        <tr>

                            <th>BIB</th>
                            <th>Name</th>
                            <th>Distance</th>

                        </tr>

                    </thead>

                    <tbody>

                        <?php while($row = mysqli_fetch_assoc($pending)){ ?>

                        <tr>

                            <td data-label="BIB">
                                <?php echo $row['bib_number']; ?>
                            </td>

                            <td data-label="Name">
                                <?php echo $row['full_name']; ?>
                            </td>

                            <td data-label="Distance">
                                <?php echo $row['distance_category']; ?>
                            </td>

                        </tr>

                        <?php } ?>

                    </tbody>

                </table>

            </div>

        </div>

        <!-- COLLECTED -->
        <div class="admin-card racepack-table-card">

            <div class="racepack-card-header">

                <div style="display:flex;align-items:center;gap:12px;">

                    <div class="racepack-card-icon racepack-card-icon--collected">
                        <svg viewBox="0 0 24 24" width="20" height="20"
                             stroke="currentColor" fill="none"
                             stroke-width="1.8" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                            <polyline points="22 4 12 14.01 9 11.01"/>
                        </svg>
                    </div>

                    <h2>Collected</h2>

                </div>

                <span class="badge badge--verified">
                    Latest 10
                </span>

            </div>

            <div style="overflow:auto">

                <table class="admin-table racepack-table">

                    <thead>

                        <tr>

                            <th>BIB</th>
                            <th>Name</th>
                            <th>Collected At</th>

                        </tr>

                    </thead>

                    <tbody>

                        <?php while($row = mysqli_fetch_assoc($collected)){ ?>

                        <tr>

                            <td data-label="BIB">
                                <?php echo $row['bib_number']; ?>
                            </td>

                            <td data-label="Name">
                                <?php echo $row['full_name']; ?>
                            </td>

                            <td data-label="Collected At">
                                <?php echo $row['collected_at']; ?>
                            </td>

                        </tr>

                        <?php } ?>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<script>

let lastScan = '';

function onScanSuccess(decodedText){

    if(decodedText === lastScan) return;

    lastScan = decodedText;

    fetch(

        'process_scan.php?code=' +

        encodeURIComponent(decodedText)

    )

    .then(response => response.text())

    .then(data => {

        document.getElementById(

            'scan-result'

        ).innerHTML = data;


    });

}

const html5QrcodeScanner =
    new Html5QrcodeScanner(

        "reader",

        {
            fps:10,
            qrbox:{ width: 250, height: 250 }
        },

        false
    );

html5QrcodeScanner.render(onScanSuccess);

function collectParticipant(id){

    fetch(

        'collect.php?id=' + id

    )

    .then(() => {

        location.reload();

    });

}

</script>