@extends('layouts.app')
@section('title', isset($user) ? 'Edit User' : 'Add User')
@section('page-title', isset($user) ? 'Edit User' : 'Add User')

@section('content')
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10">

<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('users.index') }}" class="btn btn-outline-secondary" style="border-radius:9px;">
        <i class="bi bi-arrow-left"></i>
    </a>
    <h5 class="mb-0" style="font-weight:700;">{{ isset($user) ? 'Edit: '.$user->name : 'Create New User' }}</h5>
</div>

<form method="POST" action="{{ isset($user) ? route('users.update', $user) : route('users.store') }}">
    @csrf
    @if(isset($user)) @method('PUT') @endif

    <div class="row g-4">
        <div class="col-lg-8">

            {{-- Personal Info --}}
            <div class="lp-card mb-4">
                <div class="lp-card-header">
                    <span><i class="bi bi-person me-2 text-primary"></i>Personal Information</span>
                </div>
                <div class="lp-card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $user->name ?? '') }}"
                                   class="form-control @error('name') is-invalid @enderror"
                                   placeholder="John Smith" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email Address <span class="text-danger">*</span></label>
                            <input type="email" name="email" value="{{ old('email', $user->email ?? '') }}"
                                   class="form-control @error('email') is-invalid @enderror"
                                   placeholder="user@company.com" required>
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="tel" name="phone" value="{{ old('phone', $user->phone ?? '') }}"
                                   class="form-control" placeholder="+1 000 000 0000">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Password --}}
            <div class="lp-card mb-4">
                <div class="lp-card-header">
                    <span><i class="bi bi-shield-lock me-2 text-primary"></i>
                        {{ isset($user) ? 'Reset Password (leave blank to keep current)' : 'Set Password' }}
                    </span>
                </div>
                <div class="lp-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Password {{ !isset($user) ? '*' : '' }}</label>
                            <input type="password" name="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   placeholder="Min. 8 characters"
                                   {{ !isset($user) ? 'required' : '' }}>
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirm Password {{ !isset($user) ? '*' : '' }}</label>
                            <input type="password" name="password_confirmation"
                                   class="form-control" placeholder="Repeat password"
                                   {{ !isset($user) ? 'required' : '' }}>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-lg-4">

            {{-- Role & Access --}}
            <div class="lp-card mb-4">
                <div class="lp-card-header"><span><i class="bi bi-shield-check me-2 text-primary"></i>Role & Access</span></div>
                <div class="lp-card-body">
                    <div class="mb-3">
                        <label class="form-label">Role <span class="text-danger">*</span></label>
                        <select name="role" id="roleSelect" class="form-select @error('role') is-invalid @enderror"
                                required onchange="toggleManager()">
                            @foreach($roles as $key => $label)
                            <option value="{{ $key }}"
                                {{ old('role', $user->role ?? '') === $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @error('role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div id="managerSection" class="mb-3" style="display:none;">
                        <label class="form-label">Assigned Manager</label>
                        <select name="manager_id" class="form-select">
                            <option value="">— None —</option>
                            @foreach($managers as $mgr)
                            <option value="{{ $mgr->id }}"
                                {{ old('manager_id', $user->manager_id ?? '') == $mgr->id ? 'selected' : '' }}>
                                {{ $mgr->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="d-flex align-items-center gap-2" style="cursor:pointer; font-size:13.5px;">
                            <input type="checkbox" name="is_active" value="1"
                                   {{ old('is_active', $user->is_active ?? true) ? 'checked' : '' }}
                                   style="accent-color:#3B6EFF; width:16px; height:16px;">
                            Account Active
                        </label>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="lp-card">
                <div class="lp-card-body">
                    <button type="submit" class="btn-primary-lp w-100 justify-content-center mb-2">
                        <i class="bi bi-{{ isset($user) ? 'check-lg' : 'person-plus' }}"></i>
                        {{ isset($user) ? 'Update User' : 'Create User' }}
                    </button>
                    <a href="{{ route('users.index') }}" class="btn btn-outline-secondary w-100" style="border-radius:9px; font-size:13.5px;">
                        Cancel
                    </a>
                </div>
            </div>

        </div>
    </div>
</form>

</div>
</div>
@endsection

@push('scripts')
<script>
function toggleManager() {
    const role = document.getElementById('roleSelect').value;
    const sec  = document.getElementById('managerSection');
    sec.style.display = role === 'sales_rep' ? 'block' : 'none';
}
document.addEventListener('DOMContentLoaded', toggleManager);
</script>
@endpush