{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/static/css/availability-grid.css">
{% endblock %}

{% block content %}
<main class="mx-auto flex w-full max-w-3xl flex-col gap-5 px-4 py-6 sm:px-6 sm:py-8">
    <nav aria-label="Breadcrumb">
        <a href="/plugins/gate-pass/issuer" class="blocks-button blocks-button-secondary blocks-button-sm">
            <i class="fas fa-arrow-left" aria-hidden="true"></i>
            <span>Back to passes</span>
        </a>
    </nav>

    <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm"
        id="authorizeFormCard"
        data-default-schedule="{{ default_schedule | default(value='[]') }}"
        data-today="{{ today | default(value='') }}">
        <header class="border-b border-divider px-5 py-5 sm:px-7 sm:py-6">
            <p class="mb-1 text-sm font-semibold text-brand">Gate Pass · Staff</p>
            <h1 class="text-2xl font-bold tracking-tight text-foreground">Issue staff authorization</h1>
            <p class="mt-2 text-sm leading-6 text-muted">Create one QR code for a staff member and set the dates and hours when it is valid.</p>
        </header>

        <form id="authorizeForm" class="flex flex-col gap-5 p-5 sm:p-7">
            <div id="authorizeError" class="rounded-lg border border-danger px-4 py-3 text-sm text-danger" role="alert" aria-live="assertive" hidden></div>

            <div class="blocks-form-field">
                <label for="person_id">Saved staff member <span class="font-normal text-muted">(optional)</span></label>
                <select class="blocks-input" id="person_id" name="person_id" aria-describedby="savedStaffHelp">
                    <option value="">Add a new staff member</option>
                    {% for person in people %}
                    <option value="{{ person.id }}"
                        data-name="{{ person.display_name }}"
                        data-phone="{{ person.phone | default(value='') }}"
                        data-vehicle="{{ person.vehicle_number | default(value='') }}">
                        {{ person.display_name }}
                    </option>
                    {% endfor %}
                </select>
                <p id="savedStaffHelp" class="text-sm text-muted">Choose an existing person to reuse their saved details.</p>
            </div>

            <div class="blocks-form-field">
                <label for="display_name">Staff full name <span class="text-danger" aria-hidden="true">*</span></label>
                <input class="blocks-input" type="text" id="display_name" name="display_name" required autocomplete="name" placeholder="e.g. Ramesh Kumar">
            </div>

            <div class="blocks-responsive-form-grid">
                <div class="blocks-form-field">
                    <label for="phone">Phone <span class="font-normal text-muted">(optional)</span></label>
                    <input class="blocks-input" type="tel" id="phone" name="phone" autocomplete="tel" placeholder="Contact number">
                </div>
                <div class="blocks-form-field">
                    <label for="vehicle_number">Vehicle or staff ID <span class="font-normal text-muted">(optional)</span></label>
                    <input class="blocks-input" type="text" id="vehicle_number" name="vehicle_number" autocomplete="off" placeholder="Badge number or license plate">
                </div>
            </div>

            <fieldset class="min-w-0 border-0 p-0">
                <legend class="mb-2 text-sm font-semibold text-foreground">Authorization dates <span class="text-danger" aria-hidden="true">*</span></legend>
                <div class="blocks-responsive-form-grid">
                    <div class="blocks-form-field">
                        <label for="valid_from">Valid from</label>
                        <input class="blocks-input" type="date" id="valid_from" name="valid_from" required>
                    </div>
                    <div class="blocks-form-field">
                        <label for="valid_to">Valid through</label>
                        <input class="blocks-input" type="date" id="valid_to" name="valid_to" required>
                    </div>
                </div>
            </fieldset>

            <fieldset class="min-w-0 border-0 p-0">
                <legend class="text-sm font-semibold text-foreground">Permitted hours <span class="text-danger" aria-hidden="true">*</span></legend>
                <p id="scheduleHelp" class="mt-1 text-sm text-muted">Select the allowed hours for each day. Tap or click cells to toggle them; the grid runs Monday–Sunday, 00:00–23:00.</p>
                <div id="scheduleGrid" class="mt-3 min-h-11 rounded-xl border border-divider bg-surface p-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand" tabindex="-1" aria-describedby="scheduleHelp"></div>
                <input type="hidden" id="scheduleData" name="schedule_data" value="">
            </fieldset>

            <div class="flex flex-col-reverse gap-3 border-t border-divider pt-5 sm:flex-row sm:justify-end">
                <a href="/plugins/gate-pass/issuer" class="blocks-button blocks-button-secondary">Cancel</a>
                <button type="submit" class="blocks-button blocks-button-primary sm:min-w-56">
                    <i class="fas fa-qrcode" aria-hidden="true"></i>
                    <span>Issue authorization and QR</span>
                </button>
            </div>
        </form>
    </section>
</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/availability-grid.js"></script>
<script src="/plugins/gate-pass/assets/js/gate_pass_authorize.js"></script>
{% endblock %}