@extends('layouts.dashboard')

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

@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>
                Beheer medewerkers, rollen, personeelsnummers en persoonlijke pincodes voor het tafelmenu.
            </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, e-mail, 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 personeel gekoppeld</h3>

            <p>
                Maak een medewerkersaccount aan en wijs een restaurantrol en persoonlijke pincode toe.
            </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)
                <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(
                        ($staffMember->user?->name ?? '') . ' ' .
                        ($staffMember->user?->email ?? '') . ' ' .
                        ($staffMember->role?->name ?? '') . ' ' .
                        ($staffMember->employee_number ?? '')
                    ) }}"
                >
                    <div class="staff-card__top">
                        <div class="staff-card__avatar">
                            {{ strtoupper(substr($staffMember->user?->name ?? 'M', 0, 1)) }}
                        </div>

                        <div class="staff-card__identity">
                            <span>{{ $staffMember->role?->name ?? 'Geen rol' }}</span>
                            <h3>{{ $staffMember->user?->name ?? 'Onbekende gebruiker' }}</h3>
                            <p>{{ $staffMember->user?->email }}</p>
                        </div>

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

                    <div class="staff-card__details">
                        <div>
                            <span>Personeelsnummer</span>
                            <strong>{{ $staffMember->employee_number ?: 'Niet ingesteld' }}</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 nooit' }}
                            </strong>
                        </div>
                    </div>

                    <div class="staff-card__footer">
                        <button
                            type="button"
                            class="staff-card__edit"
                            data-staff-edit
                            data-staff-name="{{ $staffMember->user?->name }}"
                            data-staff-email="{{ $staffMember->user?->email }}"
                            data-staff-role="{{ $staffMember->restaurant_role_id }}"
                            data-staff-number="{{ $staffMember->employee_number }}"
                            data-staff-active="{{ $staffMember->active ? '1' : '0' }}"
                            data-staff-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-staff-name="{{ $staffMember->user?->name }}"
                            data-staff-pin-enabled="{{ $staffMember->pin_enabled ? '1' : '0' }}"
                            data-staff-pin-url="{{ route('restaurants.staff.pin.update', [$restaurant, $staffMember]) }}"
                            data-staff-pin-disable-url="{{ route('restaurants.staff.pin.disable', [$restaurant, $staffMember]) }}"
                        >
                            <i class="ri-key-2-line"></i>
                            PIN
                        </button>

                        @if($staffMember->user_id !== $restaurant->owner_id)
                            <button
                                type="button"
                                class="staff-card__delete"
                                data-staff-delete
                                data-staff-name="{{ $staffMember->user?->name }}"
                                data-staff-delete-url="{{ route('restaurants.staff.destroy', [$restaurant, $staffMember]) }}"
                            >
                                <i class="ri-delete-bin-6-line"></i>
                                Verwijderen
                            </button>
                        @endif
                    </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 zoekterm of filter aan.</p>
        </div>
    @endif

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

        <div class="staff-modal__dialog" role="dialog" aria-modal="true">
            <button type="button" class="staff-modal__close" data-staff-form-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-modal-eyebrow>
                Nieuwe medewerker
            </span>

            <h3 data-staff-modal-title>Medewerker toevoegen</h3>

            <form
                method="POST"
                action="{{ route('restaurants.staff.store', $restaurant) }}"
                data-staff-form
                data-store-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" data-staff-name-field>
                        <label for="staffName">Naam</label>
                        <input
                            id="staffName"
                            type="text"
                            name="name"
                            maxlength="255"
                            required
                            data-staff-name-input
                        >
                    </div>

                    <div class="staff-field staff-field--full" data-staff-email-field>
                        <label for="staffEmail">E-mailadres</label>
                        <input
                            id="staffEmail"
                            type="email"
                            name="email"
                            maxlength="255"
                            required
                            data-staff-email-input
                        >
                        <small>Dit wordt het persoonlijke loginadres van de medewerker.</small>
                    </div>

                    <div class="staff-field" data-staff-password-field>
                        <label for="staffPassword">Wachtwoord</label>
                        <input
                            id="staffPassword"
                            type="password"
                            name="password"
                            minlength="8"
                            required
                            data-staff-password-input
                        >
                    </div>

                    <div class="staff-field" data-staff-password-confirmation-field>
                        <label for="staffPasswordConfirmation">Bevestig wachtwoord</label>
                        <input
                            id="staffPasswordConfirmation"
                            type="password"
                            name="password_confirmation"
                            minlength="8"
                            required
                            data-staff-password-confirmation-input
                        >
                    </div>

                    <div class="staff-field">
                        <label for="staffRole">Restaurantrol</label>

                        <select id="staffRole" name="restaurant_role_id" required data-staff-role-input>
                            @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" maxlength="50" data-staff-number-input>
                    </div>

                    <div class="staff-field staff-field--full" data-staff-create-pin-field>
                        <label for="staffCreatePin">Eerste pincode</label>
                        <input id="staffCreatePin" type="password" name="pin" inputmode="numeric" maxlength="8">
                        <small>Optioneel, 4 tot 8 cijfers.</small>
                    </div>

                    <div class="staff-field staff-field--full">
                        <label class="staff-switch">
                            <input type="checkbox" name="active" value="1" checked data-staff-active-input>
                            <span class="staff-switch__track"><span></span></span>
                            <span>
                                <strong>Actief</strong>
                                <small>Medewerker kan in dit restaurant werken</small>
                            </span>
                        </label>
                    </div>
                </div>

                <div class="staff-modal__actions">
                    <button type="button" class="light-btn" data-staff-form-close>Annuleren</button>

                    <button type="submit" class="primary-btn" data-staff-submit>
                        <i class="ri-save-line"></i>
                        Opslaan
                    </button>
                </div>
            </form>
        </div>
    </div>

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

        <div class="staff-modal__dialog" role="dialog" aria-modal="true">
            <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">Persoonlijke pincode</span>
            <h3>PIN beheren voor <span data-staff-pin-name></span></h3>

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

                <div class="staff-form-grid">
                    <div class="staff-field staff-field--full">
                        <label for="staffPin">Nieuwe pincode</label>
                        <input id="staffPin" type="password" name="pin" inputmode="numeric" maxlength="8" required>
                    </div>

                    <div class="staff-field staff-field--full">
                        <label for="staffPinConfirmation">Bevestig pincode</label>
                        <input id="staffPinConfirmation" type="password" name="pin_confirmation" inputmode="numeric" maxlength="8" required>
                    </div>
                </div>

                <div class="staff-modal__actions">
                    <button
                        type="button"
                        class="staff-pin-disable"
                        data-staff-pin-disable
                        hidden
                    >
                        <i class="ri-lock-unlock-line"></i>
                        PIN uitschakelen
                    </button>

                    <button type="submit" class="primary-btn">
                        <i class="ri-key-2-line"></i>
                        PIN opslaan
                    </button>
                </div>
            </form>

            <form method="POST" action="" data-staff-pin-disable-form hidden>
                @csrf
                @method('DELETE')
            </form>
        </div>
    </div>

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

        <div class="staff-modal__dialog" role="dialog" aria-modal="true">
            <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">
                Definitief verwijderen
            </span>

            <h3>Weet je zeker dat je <span data-staff-delete-name></span> wilt verwijderen?</h3>

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

                <div class="staff-field">
                    <label for="staffDeleteConfirmation">Typ de naam ter bevestiging</label>
                    <input id="staffDeleteConfirmation" type="text" data-staff-delete-confirmation>
                </div>

                <div class="staff-modal__actions">
                    <button type="button" class="light-btn" data-staff-delete-close>Annuleren</button>

                    <button type="submit" class="staff-delete-submit" data-staff-delete-submit disabled>
                        <i class="ri-delete-bin-6-line"></i>
                        Verwijderen
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

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

    if (!page) {
        return;
    }

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

    const updateFilters = () => {
        const query = search?.value.trim().toLocaleLowerCase('nl-BE') || '';
        const status = statusFilter?.value || 'all';
        let visible = 0;

        cards.forEach((card) => {
            const matchesSearch =
                (card.dataset.staffSearch || '').includes(query);

            const matchesStatus =
                status === 'all' ||
                card.dataset.staffStatus === status ||
                card.dataset.staffPin === status;

            const matches = matchesSearch && matchesStatus;
            card.hidden = !matches;

            if (matches) {
                visible++;
            }
        });

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

        if (grid) {
            grid.hidden = visible === 0;
        }

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

    search?.addEventListener('input', updateFilters);
    statusFilter?.addEventListener('change', updateFilters);

    const openModal = (modal) => {
        modal?.classList.add('is-open');
        modal?.setAttribute('aria-hidden', 'false');
        document.body.classList.add('staff-modal-open');
    };

    const closeModal = (modal) => {
        modal?.classList.remove('is-open');
        modal?.setAttribute('aria-hidden', 'true');

        if (!page.querySelector('.staff-modal.is-open')) {
            document.body.classList.remove('staff-modal-open');
        }
    };

    const formModal = page.querySelector('[data-staff-form-modal]');
    const form = page.querySelector('[data-staff-form]');
    const methodInput = page.querySelector('[data-staff-method]');
    const title = page.querySelector('[data-staff-modal-title]');
    const eyebrow = page.querySelector('[data-staff-modal-eyebrow]');
    const submitButton = page.querySelector('[data-staff-submit]');

    const nameField = page.querySelector('[data-staff-name-field]');
    const nameInput = page.querySelector('[data-staff-name-input]');
    const emailField = page.querySelector('[data-staff-email-field]');
    const emailInput = page.querySelector('[data-staff-email-input]');
    const passwordField = page.querySelector('[data-staff-password-field]');
    const passwordConfirmationField =
        page.querySelector('[data-staff-password-confirmation-field]');
    const passwordInput = page.querySelector('[data-staff-password-input]');
    const passwordConfirmationInput =
        page.querySelector('[data-staff-password-confirmation-input]');
    const roleInput = page.querySelector('[data-staff-role-input]');
    const numberInput = page.querySelector('[data-staff-number-input]');
    const activeInput = page.querySelector('[data-staff-active-input]');
    const createPinField = page.querySelector('[data-staff-create-pin-field]');

    const setCreateMode = () => {
        form.action = form.dataset.storeUrl || '';
        form.reset();
        methodInput.value = 'POST';

        title.textContent = 'Medewerker toevoegen';
        eyebrow.textContent = 'Nieuwe medewerker';
        submitButton.innerHTML =
            '<i class="ri-user-add-line"></i> Medewerker aanmaken';

        nameField.hidden = false;
        emailField.hidden = false;
        passwordField.hidden = false;
        passwordConfirmationField.hidden = false;
        createPinField.hidden = false;

        nameInput.required = true;
        emailInput.required = true;
        passwordInput.required = true;
        passwordConfirmationInput.required = true;
        activeInput.checked = true;
    };

    const setEditMode = (button) => {
        form.action = button.dataset.staffUpdateUrl || '';
        form.reset();
        methodInput.value = 'PUT';

        title.textContent =
            `Bewerk ${button.dataset.staffName || 'medewerker'}`;
        eyebrow.textContent = 'Medewerker aanpassen';
        submitButton.innerHTML =
            '<i class="ri-save-line"></i> Wijzigingen opslaan';

        nameField.hidden = false;
        emailField.hidden = false;
        passwordField.hidden = true;
        passwordConfirmationField.hidden = true;
        createPinField.hidden = true;

        nameInput.required = true;
        emailInput.required = true;
        passwordInput.required = false;
        passwordConfirmationInput.required = false;

        passwordInput.value = '';
        passwordConfirmationInput.value = '';

        nameInput.value = button.dataset.staffName || '';
        emailInput.value = button.dataset.staffEmail || '';
        roleInput.value = button.dataset.staffRole || '';
        numberInput.value = button.dataset.staffNumber || '';
        activeInput.checked = button.dataset.staffActive === '1';
    };

    page.querySelectorAll('[data-staff-create-open]').forEach((button) => {
        button.addEventListener('click', () => {
            setCreateMode();
            openModal(formModal);
            window.setTimeout(() => nameInput?.focus(), 100);
        });
    });

    page.querySelectorAll('[data-staff-edit]').forEach((button) => {
        button.addEventListener('click', () => {
            setEditMode(button);
            openModal(formModal);
            window.setTimeout(() => nameInput?.focus(), 100);
        });
    });

    page.querySelectorAll('[data-staff-form-close]').forEach((button) => {
        button.addEventListener('click', () => closeModal(formModal));
    });

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

    page.querySelectorAll('[data-staff-pin-open]').forEach((button) => {
        button.addEventListener('click', () => {
            pinForm.reset();
            pinForm.action = button.dataset.staffPinUrl || '';
            disableForm.action =
                button.dataset.staffPinDisableUrl || '';
            pinName.textContent =
                button.dataset.staffName || 'medewerker';
            disableButton.hidden =
                button.dataset.staffPinEnabled !== '1';

            openModal(pinModal);
        });
    });

    disableButton?.addEventListener('click', () => {
        disableForm?.submit();
    });

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

    const deleteModal = page.querySelector('[data-staff-delete-modal]');
    const deleteForm = page.querySelector('[data-staff-delete-form]');
    const deleteName = page.querySelector('[data-staff-delete-name]');
    const deleteConfirmation =
        page.querySelector('[data-staff-delete-confirmation]');
    const deleteSubmit = page.querySelector('[data-staff-delete-submit]');

    let expectedName = '';

    page.querySelectorAll('[data-staff-delete]').forEach((button) => {
        button.addEventListener('click', () => {
            expectedName = button.dataset.staffName || '';
            deleteName.textContent = expectedName;
            deleteForm.action = button.dataset.staffDeleteUrl || '';
            deleteConfirmation.value = '';
            deleteSubmit.disabled = true;
            openModal(deleteModal);
        });
    });

    deleteConfirmation?.addEventListener('input', () => {
        deleteSubmit.disabled =
            deleteConfirmation.value.trim() !== expectedName;
    });

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

    document.addEventListener('keydown', (event) => {
        if (event.key !== 'Escape') {
            return;
        }

        closeModal(formModal);
        closeModal(pinModal);
        closeModal(deleteModal);
    });
});
</script>
@endpush