@extends('layouts.admin')

@section('title', 'Add Staff Member')

@section('content')
@php
    $selectedLocationIds = collect(old('location_ids', $assignedLocationIds ?? []))->map(fn ($id) => (int) $id)->all();
    $defaultLocationId = old('default_location_id');
    $staffRoles = $roles->filter(fn ($role) => $role->name !== 'customer');
@endphp

<div class="user-create-page" x-data="userEditForm({
    selectedLocations: @js($selectedLocationIds),
    defaultLocationId: @js($defaultLocationId ? (int) $defaultLocationId : null)
})">
    <x-admin.form-page
        title="Add Staff Member"
        :crumbs="[['label' => 'Users', 'url' => null], ['label' => 'Staff', 'url' => route('admin.users.staff')], 'Create']"
        :back-url="route('admin.users.staff')"
        :action="route('admin.users.store')"
        method="POST"
        form-id="staffCreateForm"
        submit-label="Create Staff"
    >
        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon"><i class="bi bi-person-badge"></i></span>
                <div>
                    <h2 class="pp-card__title">Staff Profile</h2>
                    <p class="pp-card__sub">Name, contact and login credentials</p>
                </div>
            </div>
            <div class="pp-card__body">
                <div class="pp-grid pp-grid--2">
                    <div class="pp-field">
                        <label for="name">Full Name <span class="pp-req">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                               id="name" name="name" value="{{ old('name') }}" required
                               placeholder="Staff full name" data-uc-sync>
                        @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="pp-field">
                        <label for="staff_number">Staff Number</label>
                        <input type="text" class="form-control @error('staff_number') is-invalid @enderror"
                               id="staff_number" name="staff_number" value="{{ old('staff_number') }}"
                               placeholder="e.g. STF001" data-uc-sync>
                        <span class="pp-hint">Optional internal ID</span>
                        @error('staff_number')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="pp-field">
                        <label for="mobile">Mobile <span class="pp-req">*</span></label>
                        <div class="uc-mobile">
                            <span class="uc-mobile__prefix">+91</span>
                            <input type="text" class="form-control @error('mobile') is-invalid @enderror"
                                   id="mobile" name="mobile"
                                   value="{{ old('mobile') ? preg_replace('/^\+91/', '', old('mobile')) : '' }}"
                                   placeholder="9876543210" maxlength="10" pattern="[6-9]\d{9}" required data-uc-sync>
                        </div>
                        <span class="pp-hint">Used for login (OTP / password)</span>
                        @error('mobile')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="pp-field">
                        <label for="email">Email</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                               id="email" name="email" value="{{ old('email') }}" placeholder="optional@email.com">
                        @error('email')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </section>

        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon"><i class="bi bi-shield-lock"></i></span>
                <div>
                    <h2 class="pp-card__title">Access &amp; Security</h2>
                    <p class="pp-card__sub">Role and password for this staff account</p>
                </div>
            </div>
            <div class="pp-card__body">
                <div class="pp-grid pp-grid--2">
                    <div class="pp-field">
                        <label for="roles">Role <span class="pp-req">*</span></label>
                        <select class="form-select @error('roles') is-invalid @enderror" id="roles" name="roles[]" required data-uc-sync>
                            <option value="">Select role</option>
                            @foreach($staffRoles as $role)
                                <option value="{{ $role->name }}" @selected(in_array($role->name, old('roles', []), true))>
                                    {{ $role->display_name ?: ucwords(str_replace('_', ' ', $role->name)) }}
                                </option>
                            @endforeach
                        </select>
                        @error('roles')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="pp-field">
                        <label for="password">Password <span class="pp-req">*</span></label>
                        <input type="password" class="form-control @error('password') is-invalid @enderror"
                               id="password" name="password" required minlength="8" autocomplete="new-password">
                        <span class="pp-hint">Minimum 8 characters</span>
                        @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="pp-field">
                        <label for="password_confirmation">Confirm Password <span class="pp-req">*</span></label>
                        <input type="password" class="form-control"
                               id="password_confirmation" name="password_confirmation" required minlength="8" autocomplete="new-password">
                    </div>
                </div>
            </div>
        </section>

        @if(($storeLocations ?? collect())->count())
        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon"><i class="bi bi-geo-alt"></i></span>
                <div>
                    <h2 class="pp-card__title">Store Access</h2>
                    <p class="pp-card__sub">Assign locations and set the default workplace</p>
                </div>
            </div>
            <div class="pp-card__body">
                <div class="uc-loc-toolbar">
                    <label class="pp-label mb-0">Assigned Stores / Warehouses <span class="pp-req">*</span></label>
                    <div class="uc-loc-actions">
                        <button type="button" class="pp-btn pp-btn--ghost uc-btn-sm" @click="selectByType('store')">All stores</button>
                        <button type="button" class="pp-btn pp-btn--ghost uc-btn-sm" @click="selectByType('warehouse')">All warehouses</button>
                        <button type="button" class="pp-btn pp-btn--ghost uc-btn-sm" @click="clearLocations()">Clear</button>
                    </div>
                </div>

                <div class="pp-field mb-3">
                    <input type="search" class="form-control" placeholder="Search locations…" x-model="locationQuery">
                </div>

                <div class="ue-check-grid">
                    @foreach($storeLocations as $loc)
                        @php $isSelected = in_array((int) $loc->id, $selectedLocationIds, true); @endphp
                        <label class="ue-check-card"
                               x-show="matchesLocation(@js(strtolower($loc->name.' '.$loc->type.' '.$loc->code)))"
                               :class="{ 'is-on': selectedLocations.includes({{ (int) $loc->id }}) }">
                            <input type="checkbox" name="location_ids[]" value="{{ $loc->id }}"
                                   class="form-check-input" data-loc-type="{{ $loc->type }}"
                                   @checked($isSelected)
                                   @change="toggleLocation({{ (int) $loc->id }}, $event.target.checked); $nextTick(() => window.ucRefreshSummary && window.ucRefreshSummary())">
                            <span class="ue-check-card__body">
                                <span class="ue-check-card__title">{{ $loc->name }}</span>
                                <span class="ue-check-card__meta">
                                    <span class="ue-pill {{ $loc->type === 'warehouse' ? 'is-wh' : 'is-st' }}">
                                        {{ $loc->type === 'warehouse' ? 'Warehouse' : 'Store' }}
                                    </span>
                                    @if($loc->code)
                                        <span class="ue-code">{{ $loc->code }}</span>
                                    @endif
                                </span>
                            </span>
                        </label>
                    @endforeach
                </div>
                @error('location_ids')<div class="text-danger small mt-2">{{ $message }}</div>@enderror

                <div class="pp-field mt-3">
                    <label for="default_location_id">Default Location <span class="pp-req">*</span></label>
                    <select name="default_location_id" id="default_location_id"
                            class="form-select @error('default_location_id') is-invalid @enderror"
                            x-model="defaultLocationId"
                            @change="window.ucRefreshSummary && window.ucRefreshSummary()"
                            required>
                        <option value="">— Select default —</option>
                        @foreach($storeLocations as $loc)
                            <option value="{{ $loc->id }}"
                                    x-show="selectedLocations.includes({{ (int) $loc->id }})"
                                    @selected((int) $defaultLocationId === (int) $loc->id)>
                                {{ $loc->name }} ({{ $loc->type }})
                            </option>
                        @endforeach
                    </select>
                    <span class="pp-hint">POS and admin open against this location first</span>
                    @error('default_location_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
            </div>
        </section>
        @endif

        <x-slot:aside>
            <section class="pp-card">
                <div class="pp-card__head">
                    <span class="pp-card__icon pp-card__icon--summary"><i class="bi bi-person-check"></i></span>
                    <div>
                        <h2 class="pp-card__title">Summary</h2>
                    </div>
                </div>
                <div class="pp-card__body">
                    <div class="pp-summary__rows" style="margin-top: 0;">
                        <div class="pp-summary__row"><span>Name</span><span id="ucSumName">—</span></div>
                        <div class="pp-summary__row"><span>Mobile</span><span id="ucSumMobile">—</span></div>
                        <div class="pp-summary__row"><span>Role</span><span id="ucSumRole">—</span></div>
                        <div class="pp-summary__row"><span>Locations</span><span id="ucSumLocs" x-text="selectedLocations.length ? selectedLocations.length + ' assigned' : '—'">—</span></div>
                        <div class="pp-summary__row"><span>Default</span><span id="ucSumDefault">—</span></div>
                    </div>
                    <p class="pp-hint mb-3">Staff can sign in with mobile + password or OTP once created.</p>
                    <button type="submit" class="pp-btn pp-btn--primary pp-btn--block">
                        <i class="bi bi-person-plus"></i> Create Staff
                    </button>
                </div>
            </section>
        </x-slot:aside>
    </x-admin.form-page>
</div>
@endsection

@push('styles')
<style>
.user-create-page .uc-mobile {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.user-create-page .uc-mobile__prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem;
    border: 1px solid var(--pp-border, #e4e0d8);
    border-right: 0;
    border-radius: 0.65rem 0 0 0.65rem;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}
.user-create-page .uc-mobile .form-control {
    border-radius: 0 0.65rem 0.65rem 0;
}
.user-create-page .uc-loc-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
.user-create-page .uc-loc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.user-create-page .uc-btn-sm {
    height: 2rem;
    padding: 0 0.7rem;
    font-size: 0.75rem;
}
.user-create-page .ue-check-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    max-height: 300px;
    overflow: auto;
    padding: 0.15rem;
}
.user-create-page .ue-check-card {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    border: 1px solid var(--pp-border, #e4e0d8);
    border-radius: 0.75rem;
    padding: 0.7rem 0.75rem;
    background: #fff;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.user-create-page .ue-check-card.is-on {
    border-color: var(--admin-primary, #0f766e);
    background: color-mix(in srgb, var(--admin-primary, #0f766e) 8%, #fff);
}
.user-create-page .ue-check-card .form-check-input { margin-top: 0.2rem; }
.user-create-page .ue-check-card__title {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text, #161b26);
}
.user-create-page .ue-check-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
    align-items: center;
}
.user-create-page .ue-pill {
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 650;
    border: 1px solid var(--pp-border, #e4e0d8);
    background: #f8fafc;
}
.user-create-page .ue-pill.is-wh {
    background: color-mix(in srgb, var(--admin-primary, #0f766e) 12%, #fff);
    color: var(--admin-primary-dark, #0d5f59);
    border-color: color-mix(in srgb, var(--admin-primary, #0f766e) 30%, #fff);
}
.user-create-page .ue-pill.is-st {
    background: #f8fafc;
    color: #475569;
}
.user-create-page .ue-code {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
}
</style>
@endpush

@push('scripts')
<script>
function userEditForm({ selectedLocations = [], defaultLocationId = null } = {}) {
    return {
        selectedLocations: selectedLocations.map(Number),
        defaultLocationId: defaultLocationId ? Number(defaultLocationId) : '',
        locationQuery: '',
        matchesLocation(haystack) {
            const q = (this.locationQuery || '').trim().toLowerCase();
            return !q || String(haystack || '').includes(q);
        },
        toggleLocation(id, on) {
            id = Number(id);
            if (on) {
                if (!this.selectedLocations.includes(id)) this.selectedLocations.push(id);
            } else {
                this.selectedLocations = this.selectedLocations.filter((x) => x !== id);
                if (Number(this.defaultLocationId) === id) this.defaultLocationId = '';
            }
        },
        selectByType(type) {
            document.querySelectorAll('.ue-check-card input[data-loc-type="' + type + '"]').forEach((el) => {
                el.checked = true;
                this.toggleLocation(Number(el.value), true);
                el.closest('.ue-check-card')?.classList.add('is-on');
            });
            window.ucRefreshSummary && window.ucRefreshSummary();
        },
        clearLocations() {
            this.selectedLocations = [];
            this.defaultLocationId = '';
            document.querySelectorAll('.ue-check-card input[type="checkbox"]').forEach((el) => {
                el.checked = false;
                el.closest('.ue-check-card')?.classList.remove('is-on');
            });
            window.ucRefreshSummary && window.ucRefreshSummary();
        },
    };
}

(function () {
    function refresh() {
        const name = (document.getElementById('name')?.value || '').trim();
        const mobile = (document.getElementById('mobile')?.value || '').trim();
        const roleSel = document.getElementById('roles');
        const role = roleSel?.value
            ? (roleSel.selectedOptions[0]?.textContent || '').trim()
            : '—';
        const defSel = document.getElementById('default_location_id');
        let defLabel = '—';
        if (defSel?.value && defSel.selectedOptions?.length) {
            defLabel = defSel.selectedOptions[0].textContent.trim();
        }

        const set = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
        set('ucSumName', name || '—');
        set('ucSumMobile', mobile ? '+91 ' + mobile : '—');
        set('ucSumRole', role || '—');
        set('ucSumDefault', defLabel);
    }

    window.ucRefreshSummary = refresh;
    document.querySelectorAll('[data-uc-sync]').forEach((el) => {
        el.addEventListener('input', refresh);
        el.addEventListener('change', refresh);
    });
    document.addEventListener('DOMContentLoaded', refresh);
    refresh();
})();
</script>
@endpush