@extends('layouts.app')

@section('title','Create Users')

@section('content')

    <div class="row">
        <!-- Page header -->
        <div class="page-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1>Dashboard Overview</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard</li>
                        </ol>
                    </nav>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn-outline-brand"><i class="bi bi-download me-1"></i>Export</button>
                    <button class="btn-brand"><i class="bi bi-plus-lg me-1"></i>New Report</button>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header-custom">
                <div>
                    <div class="ch-title"><i class="bi bi-ui-checks me-2" style="color:var(--brand)"></i>Form Components — All Input Types</div>
                    <div class="ch-sub">Labels on top and below each field · Medium size · Select2 powered</div>
                </div>
            </div>
            <div class="card-body-custom">
                <form onsubmit="return false">

                    <!-- ── Text Inputs ── -->
                    <div class="form-section-title"><i class="bi bi-keyboard"></i> Text & Number Inputs</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Full Name <span class="req">*</span></label>
                                <input type="text" class="form-control" placeholder="e.g. Alex Kim">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Enter your legal full name as on government ID.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Email Address <span class="req">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                    <input type="email" class="form-control" placeholder="you@example.com">
                                </div>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Used for login and notifications.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Password <span class="req">*</span></label>
                                <input type="password" class="form-control" placeholder="Min 8 characters">
                                <div class="form-hint error"><i class="bi bi-x-circle"></i> Must include uppercase, number & symbol.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Phone Number</label>
                                <div class="input-group">
                                    <span class="input-group-text">+1</span>
                                    <input type="tel" class="form-control" placeholder="(555) 000-0000">
                                </div>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Optional. For 2FA purposes.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Website URL</label>
                                <div class="input-group">
                                    <span class="input-group-text">https://</span>
                                    <input type="url" class="form-control" placeholder="yoursite.com">
                                </div>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Your portfolio or company URL.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Age</label>
                                <input type="number" class="form-control" min="18" max="120" placeholder="25">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Must be 18 or older.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Search</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                                    <input type="search" class="form-control" placeholder="Search users…">
                                </div>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Press Enter to search.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Hidden Input</label>
                                <input type="text" class="form-control is-valid" value="Hidden value stored" readonly>
                                <div class="form-hint"><i class="bi bi-check-circle"></i> This value is pre-filled automatically.</div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Textarea ── -->
                    <div class="form-section-title"><i class="bi bi-text-paragraph"></i> Textarea</div>
                    <div class="row g-3 mb-4">
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label-top">Bio / Description</label>
                                <textarea class="form-control" rows="4" placeholder="Tell us a bit about yourself…" style="resize:vertical"></textarea>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Max 500 characters. Shown on your public profile.</div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Select / Select2 ── -->
                    <div class="form-section-title"><i class="bi bi-menu-button-wide"></i> Select2 — Single, Multiple, Tags, Grouped</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Country <span class="req">*</span></label>
                                <select class="form-control select2-single" style="width:100%">
                                    <option></option>
                                    <option value="US">🇺🇸 United States</option>
                                    <option value="GB">🇬🇧 United Kingdom</option>
                                    <option value="CA">🇨🇦 Canada</option>
                                    <option value="AU">🇦🇺 Australia</option>
                                    <option value="DE">🇩🇪 Germany</option>
                                    <option value="FR">🇫🇷 France</option>
                                    <option value="JP">🇯🇵 Japan</option>
                                </select>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Select2 single with search and placeholder.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Assign Roles</label>
                                <select class="form-control select2-multi" multiple style="width:100%">
                                    <option value="admin">Admin</option>
                                    <option value="editor">Editor</option>
                                    <option value="viewer">Viewer</option>
                                    <option value="billing">Billing Manager</option>
                                    <option value="support">Support Agent</option>
                                </select>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Select2 multiple — pick one or more roles.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Skills (Tags)</label>
                                <select class="form-control select2-tags" multiple style="width:100%">
                                    <option value="js" selected>JavaScript</option>
                                    <option value="react" selected>React</option>
                                    <option value="python">Python</option>
                                </select>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Select2 tags — type to create new tags.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Department (Grouped)</label>
                                <select class="form-control select2-grouped" style="width:100%">
                                    <option></option>
                                    <optgroup label="Engineering">
                                        <option>Frontend</option>
                                        <option>Backend</option>
                                        <option>DevOps</option>
                                    </optgroup>
                                    <optgroup label="Business">
                                        <option>Marketing</option>
                                        <option>Sales</option>
                                        <option>Finance</option>
                                    </optgroup>
                                    <optgroup label="Operations">
                                        <option>HR</option>
                                        <option>Legal</option>
                                    </optgroup>
                                </select>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Select2 with optgroup labels.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Native HTML Select</label>
                                <select class="form-select">
                                    <option>-- Choose plan --</option>
                                    <option>Free</option>
                                    <option>Pro — $29/mo</option>
                                    <option>Business — $79/mo</option>
                                    <option>Enterprise</option>
                                </select>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Standard Bootstrap select.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Priority (Select2 — Disabled option)</label>
                                <select class="form-control select2-priority" style="width:100%">
                                    <option></option>
                                    <option value="low">🟢 Low</option>
                                    <option value="med">🟡 Medium</option>
                                    <option value="high">🔴 High</option>
                                    <option value="crit" disabled>⛔ Critical (locked)</option>
                                </select>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> "Critical" option is disabled.</div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Date / Time ── -->
                    <div class="form-section-title"><i class="bi bi-calendar3"></i> Date, Time & DateTime</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Birth Date</label>
                                <input type="date" class="form-control">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Day / Month / Year format.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Preferred Time</label>
                                <input type="time" class="form-control">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> 24-hour clock.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Schedule (Date + Time)</label>
                                <input type="datetime-local" class="form-control">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Precise scheduling timestamp.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Month</label>
                                <input type="month" class="form-control">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Month and year only.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label-top">Week</label>
                                <input type="week" class="form-control">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Useful for sprint planning.</div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Range / Color ── -->
                    <div class="form-section-title"><i class="bi bi-sliders"></i> Range & Color</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Budget Limit <span id="range-val">$5,000</span></label>
                                <input type="range" class="form-range" min="0" max="10000" step="500" value="5000" id="budgetRange" oninput="document.getElementById('range-val').textContent='$'+parseInt(this.value).toLocaleString()">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Drag to set your monthly budget cap.</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label-top">Brand Color</label>
                                <input type="color" class="form-control" value="#4f46e5" style="height:40px">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Pick a primary accent color.</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label-top">Secondary Color</label>
                                <input type="color" class="form-control" value="#22c55e" style="height:40px">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> Used for success states.</div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Checkboxes & Radios ── -->
                    <div class="form-section-title"><i class="bi bi-check2-square"></i> Checkboxes & Radio Buttons</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label-top">Notification Preferences</label>
                            <div class="d-flex flex-column gap-2 mt-1">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="chk1" checked>
                                    <label class="form-check-label" for="chk1">Email notifications</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="chk2" checked>
                                    <label class="form-check-label" for="chk2">SMS alerts</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="chk3">
                                    <label class="form-check-label" for="chk3">Push notifications</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="chk4" disabled>
                                    <label class="form-check-label text-muted" for="chk4">Fax (unavailable)</label>
                                </div>
                            </div>
                            <div class="form-hint mt-2"><i class="bi bi-info-circle"></i> Choose how you want to be notified.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label-top">Subscription Plan</label>
                            <div class="d-flex flex-column gap-2 mt-1">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan" id="planFree" value="free">
                                    <label class="form-check-label" for="planFree">Free — up to 5 projects</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan" id="planPro" value="pro" checked>
                                    <label class="form-check-label" for="planPro">Pro — $29/month</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan" id="planBiz" value="biz">
                                    <label class="form-check-label" for="planBiz">Business — $79/month</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan" id="planEnt" value="ent" disabled>
                                    <label class="form-check-label text-muted" for="planEnt">Enterprise — contact sales</label>
                                </div>
                            </div>
                            <div class="form-hint mt-2"><i class="bi bi-info-circle"></i> Plan can be changed anytime.</div>
                        </div>
                    </div>

                    <!-- ── Toggle Switches ── -->
                    <div class="form-section-title"><i class="bi bi-toggle-on"></i> Toggle Switches</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label-top">Account Status</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" id="sw1" checked style="width:2.5em;height:1.3em">
                                <label class="form-check-label ms-2" for="sw1">Active</label>
                            </div>
                            <div class="form-hint"><i class="bi bi-info-circle"></i> Disable to suspend this account.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label-top">Two-Factor Auth</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" id="sw2" style="width:2.5em;height:1.3em">
                                <label class="form-check-label ms-2" for="sw2">Disabled</label>
                            </div>
                            <div class="form-hint"><i class="bi bi-info-circle"></i> Highly recommended for admins.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label-top">Dark Mode</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" id="sw3" style="width:2.5em;height:1.3em">
                                <label class="form-check-label ms-2" for="sw3">Off</label>
                            </div>
                            <div class="form-hint"><i class="bi bi-info-circle"></i> Applies system-wide immediately.</div>
                        </div>
                    </div>

                    <!-- ── File ── -->
                    <div class="form-section-title"><i class="bi bi-upload"></i> File Upload</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Profile Picture</label>
                                <div class="custom-file-btn">
                                    <button class="file-btn" type="button" onclick="this.nextElementSibling.textContent='photo.jpg'"><i class="bi bi-image me-1"></i>Choose Image</button>
                                    <span class="file-name">No file chosen</span>
                                </div>
                                <div class="form-hint"><i class="bi bi-info-circle"></i> JPG, PNG, GIF — max 2 MB.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label-top">Attachment</label>
                                <input type="file" class="form-control" accept=".pdf,.doc,.docx">
                                <div class="form-hint"><i class="bi bi-info-circle"></i> PDF or Word document — max 10 MB.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit -->
                    <div class="d-flex gap-3 pt-2">
                        <button type="submit" class="btn-brand"><i class="bi bi-check-lg me-2"></i>Save Changes</button>
                        <button type="button" class="btn-outline-brand">Cancel</button>
                        <button type="reset" class="btn-outline-brand ms-auto" style="color:var(--danger);border-color:var(--danger)"><i class="bi bi-trash me-1"></i>Reset Form</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection