@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Create User</h5>
                        </div>
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form id="user-create-form" action="{{ route('users.store') }}" method="POST">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Name <span class="text-danger">*</span></label>
                                            <input type="text" name="name" id="name" class="form-control"
                                                value="{{ old('name') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="idno">ID No</label>
                                            <input type="text" name="idno" id="idno"
                                                class="form-control @error('idno') is-invalid @enderror"
                                                value="{{ old('idno') }}">
                                            @error('idno')
                                                <div class="text-danger fs-13 mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email">Email <span class="text-danger">*</span></label>
                                            <input type="email" name="email" id="email" class="form-control"
                                                value="{{ old('email') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="gender">Gender</label>
                                            <select name="gender" id="gender" class="form-control">
                                                <option value="">-- Select Gender --</option>
                                                <option value="L">Male</option>
                                                <option value="P">Female</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="password">Password <span class="text-danger">*</span></label>
                                            <div class="position-relative">
                                                <input type="password" name="password" id="password"
                                                    class="form-control @error('password') is-invalid @enderror"
                                                    style="padding-right: 40px;"
                                                    minlength="8" pattern="(?=.*[A-Z])(?=.*[^A-Za-z0-9]).{8,}"
                                                    title="At least 8 characters, including 1 uppercase letter and 1 symbol"
                                                    required>
                                                <i class="la la-eye toggle-password" data-target="password"
                                                    style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #8f9cad;"></i>
                                            </div>
                                            <div class="alert alert-info py-2 px-3 mt-2 mb-0" style="font-size: 12.5px;">
                                                <strong>Password requirements:</strong>
                                                <ul class="mb-0 pl-15">
                                                    <li>At least 8 characters long</li>
                                                    <li>At least 1 uppercase letter (A-Z)</li>
                                                    <li>At least 1 symbol (e.g. ! @ # $ % &amp; *)</li>
                                                </ul>
                                            </div>
                                            @error('password')
                                                <div class="text-danger fs-13 mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="password_confirmation">Confirm Password <span
                                                    class="text-danger">*</span></label>
                                            <div class="position-relative">
                                                <input type="password" name="password_confirmation" id="password_confirmation"
                                                    class="form-control" style="padding-right: 40px;" minlength="8" required>
                                                <i class="la la-eye toggle-password" data-target="password_confirmation"
                                                    style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #8f9cad;"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="d-block mb-5">Roles</label>
                                            <span class="text-muted d-block mb-10"><small>Select one or more roles to grant this user access.</small></span>

                                            @if ($roles->isEmpty())
                                                <p class="text-muted mb-0"><i class="la la-info-circle mr-5"></i>No roles have been created yet.</p>
                                            @else
                                                <div class="role-picker">
                                                    @foreach ($roles as $role)
                                                        <div class="role-chip">
                                                            <div class="custom-checkbox">
                                                                <input type="checkbox" name="roles[]" value="{{ $role->name }}"
                                                                    id="role-{{ $role->id }}"
                                                                    {{ in_array($role->name, old('roles', [])) ? 'checked' : '' }}>
                                                                <label for="role-{{ $role->id }}">
                                                                    <span class="role-chip__name text-capitalize">{{ $role->name }}</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex" style="gap: 10px;">
                                    <button type="submit" class="btn btn-primary px-30">Save</button>
                                    <a href="{{ route('users.index') }}" class="btn btn-light px-30">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .role-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .role-chip {
            border: 1px solid #e2e7f1;
            border-radius: 8px;
            background: #fff;
            transition: all 0.2s ease;
        }

        .role-chip:hover {
            border-color: #19bdb4;
            box-shadow: 0 2px 8px rgba(25, 189, 180, 0.12);
        }

        .role-chip:has(input:checked) {
            border-color: #19bdb4;
            background: rgba(25, 189, 180, 0.08);
        }

        .role-chip .custom-checkbox input[type=checkbox]+label {
            display: flex !important;
            flex-flow: row nowrap;
            align-items: center;
            gap: 8px;
            padding: 10px 16px 10px 34px;
            margin: 0;
            cursor: pointer;
            white-space: nowrap;
        }

        .role-chip .custom-checkbox input[type=checkbox]+label:after {
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
        }

        .role-chip .custom-checkbox input[type=checkbox]+label:before {
            left: 20px;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .role-chip__name {
            font-size: 14px;
            font-weight: 500;
            color: #45535f;
        }

        .role-chip:has(input:checked) .role-chip__name {
            color: #0a5f5a;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(function() {
            var form = document.getElementById('user-create-form');
            var idnoInput = document.getElementById('idno');
            var genderSelect = document.getElementById('gender');

            function autoSelectGenderFromIdno() {
                var digits = (idnoInput.value || '').replace(/\D/g, '');
                if (!digits.length) {
                    return;
                }

                var lastDigit = parseInt(digits.charAt(digits.length - 1), 10);
                genderSelect.value = (lastDigit % 2 === 0) ? 'P' : 'L';
            }

            idnoInput.addEventListener('input', autoSelectGenderFromIdno);
            idnoInput.addEventListener('blur', autoSelectGenderFromIdno);

            document.querySelectorAll('.toggle-password').forEach(function(icon) {
                icon.addEventListener('click', function() {
                    var target = document.getElementById(icon.getAttribute('data-target'));
                    if (!target) {
                        return;
                    }

                    if (target.type === 'password') {
                        target.type = 'text';
                        icon.classList.remove('la-eye');
                        icon.classList.add('la-eye-slash');
                    } else {
                        target.type = 'password';
                        icon.classList.remove('la-eye-slash');
                        icon.classList.add('la-eye');
                    }
                });
            });

            form.addEventListener('submit', function(e) {
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                e.preventDefault();

                Swal.fire({
                    icon: 'question',
                    title: 'Create this user?',
                    text: 'Please confirm the details are correct before creating this account.',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, create',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#19bdb4',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endsection