@extends('layouts.dashboard')

@section('title', 'Personeel - ' . $restaurant->name)
@section('eyebrow', 'Restaurant')
@section('page-title', 'Personeel & PIN')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/pages/restaurant-staff.css') }}">
@endpush

@section('content')
<section class="staff-page" data-staff-page>
    <div class="staff-page__header">
        <div>
            <span class="staff-page__eyebrow">
                <i class="ri-team-line"></i>
                Teambeheer
            </span>

            <h2>Personeel van {{ $restaurant->name }}</h2>

            <p>
                Medewerkers gebruiken uitsluitend hun persoonlijke pincode. Er worden geen wachtwoorden of aparte medewerkersaccounts meer aangemaakt.
            </p>
        </div>

        <button type="button" class="secondary-btn" data-staff-create-open>
            <i class="ri-user-add-line"></i>
            Medewerker toevoegen
        </button>
    </div>

    <div class="staff-overview">
        @foreach([
            ['blue', 'ri-team-line', 'Totaal', $statistics['total']],
            ['green', 'ri-checkbox-circle-line', 'Actief', $statistics['active']],
            ['gray', 'ri-user-unfollow-line', 'Inactief', $statistics['inactive']],
            ['gold', 'ri-key-2-line', 'PIN actief', $statistics['pin_enabled']],
        ] as [$color, $icon, $label, $value])
            <article class="staff-overview-card">
                <span class="staff-overview-card__icon staff-overview-card__icon--{{ $color }}">
                    <i class="{{ $icon }}"></i>
                </span>

                <div>
                    <span>{{ $label }}</span>
                    <strong>{{ $value }}</strong>
                </div>
            </article>
        @endforeach
    </div>

    <div class="staff-toolbar">
        <div class="staff-search">
            <i class="ri-search-line"></i>

            <input
                type="search"
                placeholder="Zoek op naam, rol of personeelsnummer..."
                data-staff-search
            >
        </div>

        <div class="staff-filter">
            <label for="staffStatusFilter">Status</label>

            <select id="staffStatusFilter" data-staff-status-filter>
                <option value="all">Alle medewerkers</option>
                <option value="active">Actief</option>
                <option value="inactive">Inactief</option>
                <option value="pin">PIN actief</option>
                <option value="no-pin">Geen PIN</option>
            </select>
        </div>

        <span class="staff-toolbar__count" data-staff-count>
            {{ $staffMembers->count() }}
            {{ $staffMembers->count() === 1 ? 'medewerker' : 'medewerkers' }}
        </span>
    </div>

    @if($staffMembers->isEmpty())
        <div class="staff-empty">
            <div class="staff-empty__icon">
                <i class="ri-team-line"></i>
            </div>

            <h3>Nog geen medewerkers</h3>

            <p>
                Voeg een medewerker toe met een rol en persoonlijke pincode.
            </p>

            <button type="button" class="primary-btn" data-staff-create-open>
                <i class="ri-user-add-line"></i>
                Eerste medewerker toevoegen
            </button>
        </div>
    @else
        <div class="staff-grid" data-staff-grid>
            @foreach($staffMembers as $staffMember)
                @php($staffName = $staffMember->displayName())

                <article
                    class="staff-card"
                    data-staff-card
                    data-staff-status="{{ $staffMember->active ? 'active' : 'inactive' }}"
                    data-staff-pin="{{ $staffMember->pin_enabled ? 'pin' : 'no-pin' }}"
                    data-staff-search="{{ strtolower(
                        $staffName . ' ' .
                        ($staffMember->role?->name ?? '') . ' ' .
                        ($staffMember->employee_number ?? '')
                    ) }}"
                >
                    <div class="staff-card__top">
                        <div class="staff-card__avatar">
                            {{ strtoupper(substr($staffName, 0, 1)) }}
                        </div>

                        <div class="staff-card__identity">
                            <span>{{ $staffMember->role?->name ?? 'Geen rol' }}</span>
                            <h3>{{ $staffName }}</h3>
                            <p>{{ $staffMember->employee_number ?: 'Geen personeelsnummer' }}</p>
                        </div>

                        <div class="staff-card__status {{ $staffMember->active ? 'is-active' : 'is-inactive' }}">
                            <span></span>
                            {{ $staffMember->active ? 'Actief' : 'Inactief' }}
                        </div>
                    </div>

                    <div class="staff-card__details">
                        <div>
                            <span>Rol</span>
                            <strong>{{ $staffMember->role?->name ?? 'Geen rol' }}</strong>
                        </div>

                        <div>
                            <span>Pincode</span>
                            <strong class="{{ $staffMember->pin_enabled ? 'is-pin-active' : '' }}">
                                {{ $staffMember->pin_enabled ? 'Actief' : 'Niet ingesteld' }}
                            </strong>
                        </div>

                        <div>
                            <span>Laatst actief</span>
                            <strong>
                                {{ $staffMember->last_active_at?->format('d/m/Y H:i') ?? 'Nog niet' }}
                            </strong>
                        </div>
                    </div>

                    <div class="staff-card__footer">
                        <button
                            type="button"
                            class="staff-card__edit"
                            data-staff-edit-open
                            data-id="{{ $staffMember->id }}"
                            data-name="{{ $staffName }}"
                            data-role="{{ $staffMember->restaurant_role_id }}"
                            data-number="{{ $staffMember->employee_number }}"
                            data-active="{{ $staffMember->active ? '1' : '0' }}"
                            data-update-url="{{ route('restaurants.staff.update', [$restaurant, $staffMember]) }}"
                        >
                            <i class="ri-edit-line"></i>
                            Bewerken
                        </button>

                        <button
                            type="button"
                            class="staff-card__pin"
                            data-staff-pin-open
                            data-name="{{ $staffName }}"
                            data-update-url="{{ route('restaurants.staff.pin.update', [$restaurant, $staffMember]) }}"
                            data-disable-url="{{ route('restaurants.staff.pin.disable', [$restaurant, $staffMember]) }}"
                            data-pin-enabled="{{ $staffMember->pin_enabled ? '1' : '0' }}"
                        >
                            <i class="ri-key-2-line"></i>
                            PIN wijzigen
                        </button>

                        <button
                            type="button"
                            class="staff-card__delete"
                            data-staff-delete-open
                            data-name="{{ $staffName }}"
                            data-delete-url="{{ route('restaurants.staff.destroy', [$restaurant, $staffMember]) }}"
                        >
                            <i class="ri-delete-bin-6-line"></i>
                        </button>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="staff-no-results" data-staff-no-results hidden>
            <div class="staff-no-results__icon">
                <i class="ri-search-eye-line"></i>
            </div>

            <h3>Geen medewerkers gevonden</h3>
            <p>Pas je zoekopdracht of filter aan.</p>
        </div>
    @endif
</section>

<div class="staff-modal" data-staff-form-modal>
    <div class="staff-modal__backdrop" data-staff-modal-close></div>

    <div class="staff-modal__dialog">
        <button type="button" class="staff-modal__close" data-staff-modal-close>
            <i class="ri-close-line"></i>
        </button>

        <div class="staff-modal__icon">
            <i class="ri-user-add-line"></i>
        </div>

        <span class="staff-modal__eyebrow" data-staff-form-eyebrow>Medewerker toevoegen</span>
        <h3 data-staff-form-title>Nieuwe medewerker</h3>

        <form
            method="POST"
            action="{{ route('restaurants.staff.store', $restaurant) }}"
            data-staff-form
            data-create-url="{{ route('restaurants.staff.store', $restaurant) }}"
        >
            @csrf
            <input type="hidden" name="_method" value="POST" data-staff-method>

            <div class="staff-form-grid">
                <div class="staff-field staff-field--full">
                    <label for="staffName">Naam</label>
                    <input id="staffName" type="text" name="name" required data-staff-name-input>
                </div>

                <div class="staff-field">
                    <label for="staffRole">Rol</label>
                    <select id="staffRole" name="restaurant_role_id" required data-staff-role-input>
                        <option value="">Kies een rol</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="staff-field">
                    <label for="staffNumber">Personeelsnummer</label>
                    <input id="staffNumber" type="text" name="employee_number" data-staff-number-input>
                </div>

                <div class="staff-field" data-staff-create-pin-field>
                    <label for="staffPin">Pincode</label>
                    <input id="staffPin" type="password" name="pin" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="8" data-staff-pin-input>
                    <small>4 tot 8 cijfers.</small>
                </div>

                <div class="staff-field" data-staff-create-pin-confirmation-field>
                    <label for="staffPinConfirmation">Pincode herhalen</label>
                    <input id="staffPinConfirmation" type="password" name="pin_confirmation" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="8" data-staff-pin-confirmation-input>
                </div>

                <label class="staff-switch staff-field--full">
                    <input type="checkbox" name="active" value="1" checked data-staff-active-input>
                    <span class="staff-switch__track"><span></span></span>
                    <span>
                        <strong>Medewerker actief</strong>
                        <small>Actieve medewerkers kunnen met hun PIN aanmelden.</small>
                    </span>
                </label>
            </div>

            <div class="staff-modal__actions">
                <button type="button" class="secondary-btn" data-staff-modal-close>Annuleren</button>
                <button type="submit" class="primary-btn" data-staff-submit>Medewerker toevoegen</button>
            </div>
        </form>
    </div>
</div>

<div class="staff-modal" data-staff-pin-modal>
    <div class="staff-modal__backdrop" data-staff-pin-close></div>

    <div class="staff-modal__dialog">
        <button type="button" class="staff-modal__close" data-staff-pin-close>
            <i class="ri-close-line"></i>
        </button>

        <div class="staff-modal__icon">
            <i class="ri-key-2-line"></i>
        </div>

        <span class="staff-modal__eyebrow">Pincode</span>
        <h3>PIN wijzigen voor <span data-staff-pin-name></span></h3>

        <form method="POST" data-staff-pin-form>
            @csrf
            @method('PUT')

            <div class="staff-form-grid">
                <div class="staff-field">
                    <label for="newPin">Nieuwe pincode</label>
                    <input id="newPin" type="password" name="pin" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="8" required>
                </div>

                <div class="staff-field">
                    <label for="newPinConfirmation">Pincode herhalen</label>
                    <input id="newPinConfirmation" type="password" name="pin_confirmation" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="8" required>
                </div>
            </div>

            <div class="staff-modal__actions">
                <button type="button" class="secondary-btn" data-staff-pin-close>Annuleren</button>
                <button type="submit" class="primary-btn">PIN opslaan</button>
            </div>
        </form>

        <form method="POST" class="staff-pin-disable-form" data-staff-pin-disable-form hidden>
            @csrf
            @method('DELETE')
            <button type="submit" class="staff-pin-disable">
                <i class="ri-key-line"></i>
                PIN uitschakelen
            </button>
        </form>
    </div>
</div>

<div class="staff-modal" data-staff-delete-modal>
    <div class="staff-modal__backdrop" data-staff-delete-close></div>

    <div class="staff-modal__dialog">
        <button type="button" class="staff-modal__close" data-staff-delete-close>
            <i class="ri-close-line"></i>
        </button>

        <div class="staff-modal__icon staff-modal__icon--danger">
            <i class="ri-delete-bin-6-line"></i>
        </div>

        <span class="staff-modal__eyebrow staff-modal__eyebrow--danger">Verwijderen</span>
        <h3><span data-staff-delete-name></span> verwijderen?</h3>

        <form method="POST" data-staff-delete-form>
            @csrf
            @method('DELETE')

            <div class="staff-modal__actions">
                <button type="button" class="secondary-btn" data-staff-delete-close>Annuleren</button>
                <button type="submit" class="staff-delete-submit">Definitief verwijderen</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const page = document.querySelector('[data-staff-page]');

    if (!page) {
        return;
    }

    const formModal = document.querySelector('[data-staff-form-modal]');
    const form = document.querySelector('[data-staff-form]');
    const methodInput = document.querySelector('[data-staff-method]');
    const nameInput = document.querySelector('[data-staff-name-input]');
    const roleInput = document.querySelector('[data-staff-role-input]');
    const numberInput = document.querySelector('[data-staff-number-input]');
    const activeInput = document.querySelector('[data-staff-active-input]');
    const pinInput = document.querySelector('[data-staff-pin-input]');
    const pinConfirmationInput = document.querySelector('[data-staff-pin-confirmation-input]');
    const pinField = document.querySelector('[data-staff-create-pin-field]');
    const pinConfirmationField = document.querySelector('[data-staff-create-pin-confirmation-field]');
    const formTitle = document.querySelector('[data-staff-form-title]');
    const formEyebrow = document.querySelector('[data-staff-form-eyebrow]');
    const submitButton = document.querySelector('[data-staff-submit]');
    const createUrl = form?.dataset.createUrl;

    function openModal(modal) {
        modal?.classList.add('is-open');
        document.body.classList.add('staff-modal-open');
    }

    function closeModal(modal) {
        modal?.classList.remove('is-open');
        document.body.classList.remove('staff-modal-open');
    }

    function createMode() {
        form.action = createUrl;
        methodInput.value = 'POST';
        form.reset();
        activeInput.checked = true;
        pinField.hidden = false;
        pinConfirmationField.hidden = false;
        pinInput.required = true;
        pinConfirmationInput.required = true;
        formEyebrow.textContent = 'Medewerker toevoegen';
        formTitle.textContent = 'Nieuwe medewerker';
        submitButton.textContent = 'Medewerker toevoegen';
        openModal(formModal);
    }

    document.querySelectorAll('[data-staff-create-open]').forEach(function (button) {
        button.addEventListener('click', createMode);
    });

    document.querySelectorAll('[data-staff-edit-open]').forEach(function (button) {
        button.addEventListener('click', function () {
            form.action = button.dataset.updateUrl;
            methodInput.value = 'PUT';
            nameInput.value = button.dataset.name || '';
            roleInput.value = button.dataset.role || '';
            numberInput.value = button.dataset.number || '';
            activeInput.checked = button.dataset.active === '1';
            pinField.hidden = true;
            pinConfirmationField.hidden = true;
            pinInput.required = false;
            pinConfirmationInput.required = false;
            pinInput.value = '';
            pinConfirmationInput.value = '';
            formEyebrow.textContent = 'Medewerker bewerken';
            formTitle.textContent = button.dataset.name || 'Medewerker';
            submitButton.textContent = 'Wijzigingen opslaan';
            openModal(formModal);
        });
    });

    document.querySelectorAll('[data-staff-modal-close]').forEach(function (button) {
        button.addEventListener('click', function () {
            closeModal(formModal);
        });
    });

    const pinModal = document.querySelector('[data-staff-pin-modal]');
    const pinForm = document.querySelector('[data-staff-pin-form]');
    const pinName = document.querySelector('[data-staff-pin-name]');
    const pinDisableForm = document.querySelector('[data-staff-pin-disable-form]');

    document.querySelectorAll('[data-staff-pin-open]').forEach(function (button) {
        button.addEventListener('click', function () {
            pinName.textContent = button.dataset.name || 'medewerker';
            pinForm.action = button.dataset.updateUrl;
            pinDisableForm.action = button.dataset.disableUrl;
            pinDisableForm.hidden = button.dataset.pinEnabled !== '1';
            pinForm.reset();
            openModal(pinModal);
        });
    });

    document.querySelectorAll('[data-staff-pin-close]').forEach(function (button) {
        button.addEventListener('click', function () {
            closeModal(pinModal);
        });
    });

    const deleteModal = document.querySelector('[data-staff-delete-modal]');
    const deleteForm = document.querySelector('[data-staff-delete-form]');
    const deleteName = document.querySelector('[data-staff-delete-name]');

    document.querySelectorAll('[data-staff-delete-open]').forEach(function (button) {
        button.addEventListener('click', function () {
            deleteName.textContent = button.dataset.name || 'Deze medewerker';
            deleteForm.action = button.dataset.deleteUrl;
            openModal(deleteModal);
        });
    });

    document.querySelectorAll('[data-staff-delete-close]').forEach(function (button) {
        button.addEventListener('click', function () {
            closeModal(deleteModal);
        });
    });

    const search = document.querySelector('[data-staff-search]');
    const statusFilter = document.querySelector('[data-staff-status-filter]');
    const cards = Array.from(document.querySelectorAll('[data-staff-card]'));
    const noResults = document.querySelector('[data-staff-no-results]');
    const count = document.querySelector('[data-staff-count]');

    function filterCards() {
        const query = (search?.value || '').trim().toLowerCase();
        const status = statusFilter?.value || 'all';
        let visible = 0;

        cards.forEach(function (card) {
            const matchesSearch = !query || card.dataset.staffSearch.includes(query);
            const matchesStatus = status === 'all'
                || card.dataset.staffStatus === status
                || card.dataset.staffPin === status;
            const show = matchesSearch && matchesStatus;

            card.hidden = !show;

            if (show) {
                visible += 1;
            }
        });

        if (noResults) {
            noResults.hidden = visible !== 0;
        }

        if (count) {
            count.textContent = visible + (visible === 1 ? ' medewerker' : ' medewerkers');
        }
    }

    search?.addEventListener('input', filterCards);
    statusFilter?.addEventListener('change', filterCards);
});
</script>
@endpush