@extends('adminlte::page')

@section('title', 'User Details')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>User Details</h1>
    </div>
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="/users">Users</a></li>
            <li class="breadcrumb-item active">User Details</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title">General</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputFullName">Full Name</label>
                            <input type="text" id="inputFullName" class="form-control" value="Rahul Swami">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="inputAlias">Alias</label>
                            <input type="text" id="inputAlias" class="form-control" value="S Rahul">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputEmailAddress">Email Address</label>
                            <input type="text" id="inputEmailAddress" class="form-control"
                                value="rahul.swami@ranosys.com">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="inputUsername">Username</label>
                            <input type="text" id="inputUsername" class="form-control" value="rahul.swami">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputRole">Role</label>
                            <select id="inputRole" class="form-control custom-select">
                                <option>Select Role</option>
                                <option selected="">Admin</option>
                                <option>Approver</option>
                                <option>Normal User</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            {{-- With multiple slots, and plugin config parameters --}}
                            @php
                                $config = [
                                    "placeholder" => "Select Workstream",
                                    "allowClear" => false,
                                ];
                            @endphp
                            <!-- Select2 Input -->
                            <x-adminlte-select2 id="sel2Category" name="sel2Category[]" label="Workstream"
                                :config="$config" multiple>
                                <option selected>Jurong</option>
                                <option selected>Bukom</option>
                            </x-adminlte-select2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="inputStatus">Status</label>
                            <div class="row mt-1">
                                <div class="col-sm-3">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input custom-control-input-success" type="radio"
                                            id="activeUser" name="activeUserInput" checked="">
                                        <label for="activeUser" class="custom-control-label">Active</label>
                                    </div>
                                </div>
                                <div class="col-sm-9">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input custom-control-input-danger" type="radio"
                                            id="disabledUser" name="disabledUserInput">
                                        <label for="disabledUser" class="custom-control-label">Inactive</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <!-- text input -->
                        <div class="form-group">
                            <label for="inputCreatedBy">Created By</label>
                            <select id="inputCreatedBy" class="form-control custom-select" disabled>
                                <option>Select User</option>
                                <option selected="">Robert Johnson</option>
                                <option>Alexander Morgan</option>
                                <option>Rahul Swami</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Created Date</label>
                            <input type="text" id="inputCreatedDate" class="form-control" value="27-12-2024" disabled>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>
<div class="row">
    <div class="col-12">
        <a href="{{route('users')}}" class="btn btn-secondary">Cancel</a>
        <input type="submit" value="Save Changes" class="btn btn-success float-right">
    </div>
</div>
@endsection

@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
    <script>
        $(".btn-success").click(function () {
            const Toast = Swal.mixin({
                toast: true,
                position: "top",
                showConfirmButton: false,
                timer: 4000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: "success",
                title: "Changes saved successfully."
            });
            window.location = "/users";
        });
    </script>
@endpush