@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → Staff: the restaurant owner manages internal staff sub-accounts.
 *
 * @var array $staff array of rows: id, name, email, role, phone, status
 *                   (role: any staff role slug; status: active|suspended)
 * @var array $roles  slug => label for every role a member may hold (from the roles table)
 */
$staff = $staff ?? [];
$roles = $roles ?? [];
// Only the owner may touch an account whose role can itself manage staff — the same rule
// StaffController enforces on save and delete, mirrored here so the UI never offers an
// action the server would refuse.
$staffAdminRole = static fn (string $slug): bool => in_array('staff.manage', \App\Models\Role::permissionsFor($slug), true);
// Only the owner may manage manager accounts; managers see manager rows read-only
// and never get the "Manager" role option (server enforces this too).
$isOwner = $isOwner ?? \App\Support\Auth::is('vendor');
// Re-fill values + field error when a save was rejected (modal auto-re-opens).
$formData  = $formData ?? [];
$formError = (string) ($formError ?? '');
$reopen    = $formError !== '';
$fd = static fn (string $k, string $def = ''): string => (string) ($formData[$k] ?? $def);
// Filter-bar state (mirrors the admin Users page): role / status / search.
$frole      = $frole ?? '';
$fstatus    = $fstatus ?? '';
$fq         = $fq ?? '';
$hasFilters = $frole !== '' || $fstatus !== '' || $fq !== '';
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot (leaves the table card header for the
//      title + any table-scoped utility). ob_start captures the button HTML for the layout slot.
ob_start();
@endphp
<button type="button" class="qm-btn" data-bs-toggle="modal" data-bs-target="#staffModal" data-staff-add><i class="fas fa-plus me-1"></i> {{ t_raw('vendor.staff.btn_add_staff') }}</button>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp

<div class="qm-card">
    <div class="qm-ops-head">
        <div class="d-flex align-items-center gap-2">
            <h2 class="mb-0">{{ t_raw('vendor.staff.list_heading') }}</h2>
            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.staff.subtitle') }}" data-qm-tip="{{ t_raw('vendor.staff.subtitle') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
            @if (!empty($pager['total']))<span class="qm-pill qm-pill-grey">{{ t_raw('vendor.staff.total_pill', [':count' => (int) $pager['total']]) }}</span>@endif
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('vendor.staff.analytics') }}" class="qm-btn qm-btn-outline"><i class="fas fa-chart-pie me-1"></i> {{ t_raw('vendor.staff.link_staff_activity') }}</a>
        </div>
    </div>

    <form method="get" action="{{ route('vendor.staff') }}" class="qm-order-filters">
        @partial('filter-collapse')
        <div class="qm-of-field">
            <label class="qm-of-label" for="sf-role">{{ t_raw('vendor.staff.col_role') }}</label>
            <select name="role" id="sf-role" class="form-select" data-choices data-choices-dots data-placeholder="{{ t_raw('vendor.staff.filter_role_all') }}">
                <option value="">{{ t_raw('vendor.staff.filter_role_all') }}</option>
                @foreach ($roles as $slug => $label)<option value="{{ $slug }}"{{ $frole === (string) $slug ? ' selected' : '' }}>{{ $label }}</option>@endforeach
            </select>
        </div>
        <div class="qm-of-field">
            <label class="qm-of-label" for="sf-status">{{ t_raw('common.status') }}</label>
            <select name="status" id="sf-status" class="form-select" data-choices data-choices-dots data-placeholder="{{ t_raw('vendor.staff.status_filter_all') }}">
                <option value="">{{ t_raw('vendor.staff.status_filter_all') }}</option>
                <option value="active"{{ $fstatus === 'active' ? ' selected' : '' }}>{{ t_raw('common.active') }}</option>
                <option value="suspended"{{ $fstatus === 'suspended' ? ' selected' : '' }}>{{ t_raw('common.status_suspended') }}</option>
            </select>
        </div>
        <div class="qm-of-field qm-of-grow">
            <label class="qm-of-label" for="sf-q">{{ t_raw('common.search') }}</label>
            <input type="search" name="q" id="sf-q" class="form-control" placeholder="{{ t_raw('vendor.staff.search_placeholder') }}" value="{{ $fq }}">
        </div>
        <div class="qm-of-actions">
            <a href="{{ route('vendor.staff') }}" class="qm-filter-reset{{ $hasFilters ? ' is-active' : '' }}">{{ t_raw('common.reset') }}</a>
        </div>
    </form>

    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <caption class="visually-hidden">{{ t_raw('vendor.staff.list_heading') }}</caption>
        <thead><tr><th scope="col" data-sort="text">{{ t_raw('common.name') }}</th><th scope="col" data-sort="text">{{ t_raw('vendor.staff.col_role') }}</th><th scope="col" data-sort="text">{{ t_raw('common.status') }}</th><th scope="col">{{ t_raw('common.joined') }}</th><th class="text-end" scope="col">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody>
            @if (count($staff))
            @foreach ($staff as $row)
            @php
            $sid    = (int) $row['id'];
            $role   = (string) $row['role'];
            $status = (string) $row['status'];
@endphp
            <tr>
                <td>
                    <div class="qm-tbl-id">
                        {!! brandmark_html($row['avatar'] ?? null, (string) $row['name'], 'md', 'qm-brandmark--round') !!}
                        <div class="qm-tbl-id-text">
                            <strong>{{ $row['name'] }}</strong>
                            <small>{{ $row['email'] }}</small>
                            @if (!empty($row['phone']))<small>{{ $row['phone'] }}</small>@endif
                        </div>
                    </div>
                </td>
                <td>{!! role_pill($role) !!}</td>
                <td><span class="qm-pill {{ $status === 'active' ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! $status === 'active' ? t('common.active') : t('common.status_suspended') !!}</span></td>
                <td class="qm-cell-body qm-nowrap">{!! fmt_day($row['created_at']) !!}</td>
                <td class="qm-actions-cell">
                    @if ($isOwner || !$staffAdminRole($role))
                    <button type="button" class="qm-icon-btn" data-bs-toggle="modal" data-bs-target="#staffModal" data-staff-edit
                        data-id="{{ $sid }}" data-first="{{ $row['first_name'] ?? '' }}" data-last="{{ $row['last_name'] ?? '' }}" data-email="{{ $row['email'] }}"
                        data-role="{{ $role }}" data-phone="{{ $row['phone'] ?? '' }}" data-active="{{ $status === 'active' ? '1' : '0' }}"
                        data-avatar="{{ avatar_src($row['avatar'] ?? null) }}" data-avatar-path="{{ $row['avatar'] ?? '' }}" data-has-avatar="{{ !empty($row['avatar']) ? '1' : '0' }}"
                        aria-label="{{ t_raw('vendor.staff.aria_edit_prefix', [':name' => $row['name']]) }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    @endif
                    <a class="qm-icon-btn" href="{{ url('/vendor/staff/' . $sid . '/analytics') }}" aria-label="{{ t_raw('vendor.staff.aria_activity_for', [':name' => $row['name']]) }}" title="{{ t_raw('vendor.staff.title_view_activity') }}"><i class="fas fa-chart-line" aria-hidden="true"></i></a>
                    @if ($isOwner || !$staffAdminRole($role))
                    <form method="post" action="{{ route('vendor.staff.delete') }}" class="d-inline" data-confirm="{{ t_raw('vendor.staff.confirm_remove_staff') }}">@csrf<input type="hidden" name="id" value="{{ $sid }}"><button type="submit" class="qm-icon-btn danger" aria-label="{{ t_raw('vendor.staff.aria_remove_prefix', [':name' => $row['name']]) }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button></form>
                    @endif
                </td>
            </tr>
            @endforeach
            @else
            {!! partial('table-empty', [
                'colspan' => 5,
                'icon'    => 'fa-user-friends',
                // Role / status / search can all empty this table on a restaurant that has plenty of
                // staff. Saying "No staff yet" there is simply untrue, and it hides the Reset link's
                // purpose — the operator is told there is nothing to reset to.
                'msg'     => $hasFilters ? t_raw('vendor.staff.empty_filtered') : t_raw('vendor.staff.empty_no_staff'),
            ]) !!}
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/vendor/staff'])
</div>

@php /* ====================================================== STAFF MODAL */
@endphp
<div class="modal fade" id="staffModal" tabindex="-1" aria-labelledby="staff-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('vendor.staff.save') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="staff-id" value="{{ (int) $fd('id') }}">
            <div class="modal-header"><h2 class="modal-title h5" id="staff-modal-title" data-title-add="{{ t_raw('vendor.staff.btn_add_staff') }}" data-title-edit="{{ t_raw('vendor.staff.modal_edit_title') }}">{!! $reopen && (int) $fd('id') > 0 ? t('vendor.staff.modal_edit_title') : t('vendor.staff.btn_add_staff') !!}</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button></div>
            <div class="modal-body">
                @if ($formError !== '')
                <div class="alert alert-danger py-2 px-3" role="alert">{{ $formError }}</div>
                @endif
                <div class="mb-3">
                    <label class="form-label">{{ t_raw('vendor.staff.label_profile_photo') }}</label>
                    @php // Circular media-library picker, reused across rows: the row-switch JS below
                          // sets/clears it per selected member via window.QM.mediaField.
@endphp
                    {!! media_field_html('avatar', null, ['accept' => 'image', 'circle' => true, 'allowClear' => true, 'label' => t_raw('vendor.staff.label_profile_photo')]) !!}
                </div>
                <div class="row g-3">
                    <div class="col-md-6 mb-3"><label class="form-label" for="staff-first">{{ t_raw('vendor.staff.label_first_name') }}</label><input type="text" class="form-control" id="staff-first" name="first_name" maxlength="60" value="{!! $fd('first_name') !!}" required placeholder="{{ t_raw('auth.first_name_placeholder') }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label" for="staff-last">{{ t_raw('vendor.staff.label_last_name') }}</label><input type="text" class="form-control" id="staff-last" name="last_name" maxlength="60" value="{!! $fd('last_name') !!}" required placeholder="{{ t_raw('auth.last_name_placeholder') }}"></div>
                </div>
                <div class="mb-3"><label class="form-label" for="staff-email">{{ t_raw('common.email') }}</label><input type="email" class="form-control" id="staff-email" name="email" maxlength="190" value="{!! $fd('email') !!}" required placeholder="{{ t_raw('auth.email_placeholder') }}"></div>
                <div class="row g-3">
                    <div class="col-7 mb-3"><label class="form-label" for="staff-role">{{ t_raw('vendor.staff.col_role') }}</label>
                        <select class="form-select" id="staff-role" name="role">
                            @foreach ($roles as $rk => $rl)
@php if (!$isOwner && $staffAdminRole((string) $rk)) { continue; }; @endphp
                            <option value="{{ $rk }}"{!! $fd('role') === (string) $rk ? ' selected' : '' !!}>{{ $rl }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-5 mb-3"><label class="form-label" for="staff-phone">{{ t_raw('common.phone') }}</label><input type="text" class="form-control" id="staff-phone" name="phone" maxlength="30" value="{!! $fd('phone') !!}" placeholder="{{ t_raw('vendor.staff.placeholder_phone') }}"></div>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="staff-pin">{{ t_raw('vendor.staff.label_pin') }}</label>
                    <input type="text" inputmode="numeric" pattern="\d{4}" maxlength="4" class="form-control" id="staff-pin" name="pin" autocomplete="off" placeholder="{{ t_raw('vendor.staff.placeholder_pin') }}"{{ $reopen && (int) $fd('id') === 0 ? ' required' : '' }}>
                    <p class="qm-hint{{ $reopen && (int) $fd('id') > 0 ? '' : ' qm-hidden' }}" id="staff-pin-hint">{{ t_raw('vendor.staff.pin_hint_keep_current') }}</p>
                    <p class="qm-hint">{!! t_raw('vendor.staff.pin_hint_full') !!}</p>
                </div>
                <label class="qm-check"><input type="checkbox" id="staff-active" name="is_active" value="1"{{ (!$reopen || !empty($formData['is_active'])) ? ' checked' : '' }}> {{ t_raw('common.active') }}</label>
            </div>
            <div class="modal-footer"><button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{{ t_raw('common.cancel') }}</button><button type="submit" class="qm-btn">{{ t_raw('vendor.staff.btn_save_staff') }}</button></div>
        </form>
    </div>
</div>

<script>
/* Populate the staff modal from the clicked button's data-* (plain JS, no jQuery):
   clear fields on Add; pre-fill from the row on Edit (mirrors admin/taxonomy.php). */
(function () {
    function set(elId, attr, def, add, btn) {
        var el = document.getElementById(elId);
        if (!el) { return; }
        el.value = add ? def : (btn.getAttribute(attr) || def);
    }

    document.querySelectorAll('[data-staff-add], [data-staff-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-staff-add');
            var title = document.getElementById('staff-modal-title');
            if (title) { title.textContent = add ? (title.getAttribute('data-title-add') || 'Add staff') : (title.getAttribute('data-title-edit') || 'Edit staff'); }
            set('staff-id', 'data-id', '0', add, btn);
            set('staff-first', 'data-first', '', add, btn);
            set('staff-last', 'data-last', '', add, btn);
            set('staff-email', 'data-email', '', add, btn);
            set('staff-role', 'data-role', {!! json_encode((string) (array_key_first($roles) ?? '')) !!}, add, btn);
            set('staff-phone', 'data-phone', '', add, btn);

            // Avatar: drive the circular media-library field per row — load the member's
            // photo on Edit, clear on Add — via the picker's public API. Clearing the field
            // (or Add) posts an empty value, which the controller reads as "no change".
            var avatarField = document.querySelector('#staffModal [data-media-field]');
            if (avatarField && window.QM && window.QM.mediaField) {
                var hasAvatar = !add && btn.getAttribute('data-has-avatar') === '1';
                var avatarPath = btn.getAttribute('data-avatar-path') || '';
                if (hasAvatar && avatarPath) {
                    window.QM.mediaField.set(avatarField, { path: avatarPath, url: btn.getAttribute('data-avatar') || '', kind: 'image' });
                } else {
                    window.QM.mediaField.clear(avatarField);
                }
            }

            // PIN: required on Add, optional on Edit (hint shown only on Edit).
            var pin = document.getElementById('staff-pin');
            if (pin) {
                pin.value = '';
                if (add) { pin.setAttribute('required', 'required'); } else { pin.removeAttribute('required'); }
            }
            var hint = document.getElementById('staff-pin-hint');
            if (hint) { hint.style.display = add ? 'none' : 'block'; }

            // Active checkbox: default checked on Add; on Edit follow the row's status.
            var active = document.getElementById('staff-active');
            if (active) { active.checked = add ? true : btn.getAttribute('data-active') === '1'; }
        });
    });

    // A rejected save re-renders this page with the form pre-filled + an error;
    // re-open the modal so the owner sees the message without losing their input.
    // Deferred to DOMContentLoaded because bootstrap.min.js loads after this view.
    @if ($reopen)
    document.addEventListener('DOMContentLoaded', function () {
        var modalEl = document.getElementById('staffModal');
        if (modalEl && window.bootstrap && window.bootstrap.Modal) {
            window.bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }
    });
    @endif
})();
</script>

</div>@php /* /.qm-d2 */
@endphp
@endsection