@extends('layouts.index')
@section('title')
    Edit User
@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ url('users') }}" class="link">User</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Ubah
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Edit User</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <div class="col-12">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <form class="" action=" {{ route('users.update', $detail->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class=" form-floating mb-3">
                                    <input type="text" name="name" value="{{ $detail->name }}"
                                        class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Nama Lengkap" />
                                    <label><i data-feather="user" class="feather-sm text-info fill-white me-2"></i><span
                                            class="border-start border-info ps-3">Nama Lengkap</span></label>
                                </div>
                                <div class="form-floating mb-3">
                                    <input name="email" type="email" value="{{ $detail->email }}"
                                        class="form-control @error('email') is-invalid @enderror" placeholder="Email" />
                                    <label><i data-feather="mail" class="feather-sm text-info fill-white me-2"></i><span
                                            class="border-start border-info ps-3">Email address</span></label>
                                </div>
                                <div class="form-floating mb-3">
                                    <select name="roles" class="form-select @error('roles') is-invalid @enderror">
                                        <option value="">-Choose Role-</option>
                                        @foreach($roles as $data)
                                            <option value="{{ $data->id }}" {{ $data->id == $user_role->role_id ? 'selected' : '' }}>{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                    <label><i data-feather="key" class="feather-sm text-info fill-white me-2"></i><span
                                            class="border-start border-info ps-3">Role</span></label>
                                          @error('roles')
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                          @enderror
                                </div>

                                <div class="d-md-flex align-items-center">
                                    <div class="mt-3 mt-md-0 ms-auto">
                                        <a href="{{ url('users') }}"
                                            class="
                                                btn btn-outline-info
                                                font-weight-medium
                                                rounded-pill
                                                px-4
                                                ">
                                            <div class="d-flex align-items-center">
                                                <i data-feather="arrow-left-circle" class="feather-sm fill-white me-2"></i>
                                                Back
                                            </div>
                                        </a>
                                        <button type="submit"
                                            class="
                                                btn btn-info
                                                font-weight-medium
                                                rounded-pill
                                                px-4
                                                ">
                                            <div class="d-flex align-items-center">
                                                <i data-feather="send" class="feather-sm fill-white me-2"></i>
                                                Update
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#ubah-password"><i
                            class="fa fa-key"></i> Change Password ?</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="ubah-password" tabindex="-1" aria-labelledby="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title" id="">
                        Change Password
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('ubah-password', $detail->id) }}">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="recipient-name" class="control-label">New Password:</label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                name="password" placeholder="Enter New Password" />
                            @error('password')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="recipient-name" class="control-label">New Password Confirmation:</label>
                            <input type="password" class="form-control" name="password_confirmation" placeholder="Enter New Password Confirmation" />
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                btn btn-light-danger
                text-danger
                font-weight-medium
            "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endsection
@section('js')
<script>
    var myModal = new bootstrap.Modal(document.getElementById("ubah-password"), {});
        @error('password')
                    document.onreadystatechange = function () {
                    myModal.show();
                };
        @enderror
    </script>
    <script src="{{ asset('back') }}/extra-libs/prism/prism.js"></script>
@endsection