@extends('layouts.app')

@section('title', 'Create New User')

@section('content')
<section class="py-5 bg-light">
    <div class="container">
        {{-- Success Message --}}
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        {{-- Error Messages --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <h2 class="fw-bold mb-2 text-center d-flex align-items-center justify-content-center gap-2">
            <i class="bi bi-person-plus text-primary"></i>
            Create New User
        </h2>
        <p class="text-muted text-center mb-4">Add a new user to the system</p>

        <form action="{{ route('users.store') }}" method="POST" class="form-card p-4 shadow rounded">
            @csrf
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="mb-0 text-primary d-flex align-items-center gap-2">
                    <i class="bi bi-person-vcard"></i> User Information
                </h5>
                <span class="badge rounded-pill bg-light text-secondary">User Creation</span>
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Full Name</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                           name="name" value="{{ old('name') }}" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Username</label>
                    <input type="text" class="form-control @error('username') is-invalid @enderror"
                           name="username" value="{{ old('username') }}" required>
                    @error('username')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Role</label>
                    <select class="form-select @error('role') is-invalid @enderror"
                            name="role" id="role_select" required>
                        <option value="">-- Select Role --</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->name }}" {{ old('role') == $role->name ? 'selected' : '' }}>
                                {{ $role->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('role')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6" id="service_center_field" style="display: none;">
                    <label for="service_center" class="form-label fw-semibold">Service Center</label>
                    <select name="service_center" id="service_center" class="form-control">
                        <option value="">-- Select Service Center --</option>
                        @foreach ($serviceCenters as $center)
                            <option value="{{ $center->sc }}" {{ old('service_center') == $center->sc ? 'selected' : '' }}>
                                {{ $center->sc }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Password</label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror"
                           name="password" required>
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Confirm Password</label>
                    <input type="password" class="form-control"
                           name="password_confirmation" required>
                </div>
            </div>

            <script>
            document.addEventListener('DOMContentLoaded', function() {
                const roleSelect = document.getElementById('role_select');
                const serviceCenterField = document.getElementById('service_center_field');

                function toggleServiceCenterField() {
                    if (roleSelect.value === 'ServiceCenter') {
                        serviceCenterField.style.display = 'block';
                    } else {
                        serviceCenterField.style.display = 'none';
                    }
                }

                // Initial check
                toggleServiceCenterField();

                // Listen for changes
                roleSelect.addEventListener('change', toggleServiceCenterField);
            });
            </script>

            <div class="mt-4 text-center">
                <button type="submit" class="btn btn-primary px-5">
                    <i class="bi bi-person-plus"></i> Create User
                </button>
                <a href="{{ route('users.index') }}" class="btn btn-secondary px-5 ms-2">
                    <i class="bi bi-arrow-left"></i> Back to Users
                </a>
            </div>
        </form>
    </div>
</section>

@endsection