@extends('layouts.app')

@push('css')
    <style>
        .profile-userpic img {
            float: none;
            margin: 0 auto;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
        }
    </style>
@endpush

@section('content')
<h1 class="page-header">Users Management</h1>
<div class="row">
    <div class="col-md-3">
        @include('user.menu')
    </div>
    <div class="col-md-9">
        <div class="card mb-3 border-0">
            @include('user.tab')
            <form action="{{ route('user.updateAccount', $user->id) }}" method="POST">
                @method('PUT')
                @csrf
                <div class="card-body border-bottom  p-4">
                    <div class="row mb-4">
                        <label for="username" class="col-form-label fw-semibold text-muted col-md-3">Username</label>
                        <div class="col-md-9">
                            <input type="text" id="username" name="username" value="{{ $user->username }}" class="form-control @error('username') is-invalid @enderror" disabled>
                            @error('username')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row my-4">
                        <label for="account_no" class="col-form-label fw-semibold text-muted col-md-3">Account No.</label>
                        <div class="col-md-9">
                            <input type="text" id="account_no" name="account_no" value="{{ $user->cardHolder->account_no ?? '' }}" class="form-control @error('account_no') is-invalid @enderror" disabled>
                            @error('account_no')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row my-4">
                        <label class="col-form-label fw-semibold text-muted col-md-3" for="email">New Password</label>
                        <div class="col-md-8">
                            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="password">
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-0">
                        <label class="col-form-label fw-semibold text-muted col-md-3" for="email">Confirm New Password</label>
                        <div class="col-md-8">
                            <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" id="password_confirmation">
                            @error('password_confirmation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="row mb-4">
                        <label for="name" class="col-form-label fw-semibold text-muted col-md-3">Nama</label>
                        <div class="col-md-9">
                            <input type="text" id="name" name="name" value="{{ $user->name }}" class="form-control @error('name') is-invalid @enderror">
                            @error('name')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="email" class="col-form-label fw-semibold text-muted col-md-3">Email</label>
                        <div class="col-md-9">
                            <input type="text" id="email" name="email" value="{{ $user->email }}" class="form-control @error('email') is-invalid @enderror">
                            @error('email')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="roles" class="col-form-label fw-semibold text-muted col-md-3">Select Role</label>
                        <div class="col-md-9">
                            <select name="roles" id="roles" class="form-select @error('roles') is-invalid @enderror text-capitalize">
                                <option value="">--Select--</option>
                                @foreach ($roles as $item)
                                    <option value="{{ $item->id }}" @selected($item->id == $user->roles->pluck('id')->first())>{{ $item->name }}</option>
                                @endforeach
                            </select>
                            @error('roles')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="serial_no" class="col-form-label fw-semibold text-muted col-md-3">Serial No.</label>
                        <div class="col-md-9">
                            <input type="text" id="serial_no" name="serial_no" value="{{ $user->serial_no }}" class="form-control @error('serial_no') is-invalid @enderror">
                            @error('serial_no')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-0">
                        <label for="staff_id" class="col-form-label fw-semibold text-muted col-md-3">Staff Id</label>
                        <div class="col-md-9">
                            <input type="text" id="staff_id" name="staff_id" value="{{ $user->staff_id }}" class="form-control @error('staff_id') is-invalid @enderror">
                            @error('staff_id')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('user.index') }}" class="btn btn-white">Back</a>
                    <button type="submit" class="btn btn-primary">Confirm Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection