@extends('layouts.master')

@section('content')

<div class="page-header mb-3">

    <div class="row">

      <div class="col-lg-12 col-md-12 col-12">

        <ul class="breadcrumb">

            <li class="breadcrumb-item">

                <a href="#">{{ $title }}</a>

            </li>

            <li class="breadcrumb-item active">{{ $subtitle }}</li>

        </ul>

    </div>

    </div>

</div>

<div class="row">

    <div class="col-lg-8 col-12">

      <div class="card mb-4">

        <div class="card-body">

            <form action="{{ route('users/updated') }}" method="POST" enctype="multipart/form-data">

            @method('patch')

            @csrf

            <div class="form-group mb-2">

              <label class="form-label">Nama Lengkap<a class="text-danger">*</a></label>

              <input type="hidden" name="id" id="id" value="{{ $user->id }}">

              <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control @error('name') is-invalid @enderror" autofocus placeholder="Nama lengkap" />

              @error('name')

                  <span class="invalid-feedback" role="alert">

                      <strong>{{ $message }}</strong>

                  </span>

              @enderror

            </div>

            <div class="form-group mb-2">

              <label class="form-label">Email<a class="text-danger">*</a></label>

              <input type="email" name="email" value="{{ old('email', $user->email) }}" class="form-control @error('email') is-invalid @enderror" placeholder="Email" />

              @error('email')

                  <span class="invalid-feedback" role="alert">

                      <strong>{{ $message }}</strong>

                  </span>

              @enderror

            </div>

          </div>        

      </div>

      <div class="card mb-4">

            <div class="card-body">

                  <div class="form-group mb-3">

                    <label class="form-label mb-0">Photo</label>

                    <input type="hidden" name="old_photo" value="{{ $user->photo }}">

                    @if ($user->photo)

                        <img src="{{ asset('storage/'.$user->photo) }}" id="output" class="img-fluid col-sm-5 mb-2 d-block" style="border-radius: 5px; width:100px">

                    @else 

                        <img id="output" class="img-fluid col-sm-5 mb-2 d-block" style="border-radius: 5px; width:100px">

                    @endif

                    <input type="file" name="photo" id="photo" class="form-control @error('photo') is-invalid @enderror" accept="photo/*" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])"/>

                    @error('photo')

                        <span class="invalid-feedback" role="alert">

                            <strong>{{ $message }}</strong>

                        </span>

                    @enderror

                  </div>

            </div>

      </div>

    </div>

    <div class="col-sm-4">

        <div class="card">

          <div class="card-body">

              <div class="row">

                <div class="col-xl-12">

                    <div class="form-group mb-2">

                      <label class="form-label">Username<a class="text-danger">*</a></label>

                      <input type="text" autocapitalize="none" name="username" value="{{ old('username',$user->username) }}" placeholder="Username" class="form-control @error('username') is-invalid @enderror" />

                      @error('username')

                          <span class="invalid-feedback" role="alert">

                              <strong>{{ $message }}</strong>

                          </span>

                      @enderror

                    </div>

                    <div class="row">

                    <div class="form-group mb-2">

                      <label class="form-label">Password<a class="text-danger">*</a></label>

                      <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Password"/>

                      @error('password')

                          <span class="invalid-feedback" role="alert">

                              <strong>{{ $message }}</strong>

                          </span>

                      @enderror

                    </div>

                        <div class="form-group mb-2">

                          <label class="form-label">Ulangi password</label>

                          <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="Ulangi password" />

                          @error('password_confirmation')

                          <span class="invalid-feedback" role="alert">

                              <strong>{{ $message }}</strong>

                          </span>

                          @enderror

                        </div>

                      <div class="form-group mb-2">

                        <label class="form-label">Status<a class="text-danger">*</a></label>

                        <select class="form-select" name="is_active">

                            @if ($user->is_active == 1)

                            <option value="{{ $user->is_active }}">Active</option>

                            @else

                            <option value="{{ $user->is_active }}">Tidak Active</option>

                            @endif

                          <option value="1">Active</option>

                          <option value="2">Tidak Active</option>

                        </select>

                      </div>

                    </div>

                </div>

              </div>

          </div>

        </div>

        <div class="d-grid mb-4">

            <button type="submit" class="btn btn-primary mb-2">

                Update User

            </button>

            <a href="{{ route('users') }}" type="submit" class="btn btn-warning">

                Keluar

              </a>

          </div>

      </div>

    </form>

  </div>

@endsection