@extends('admin/layouts/layoutMaster')
@section('title', 'Update Passport')

@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.css')}}" />
@endsection

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.js')}}"></script>

@endsection

@section('content')
<h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Dashboard /</span> Upload Passport
  </h4>

  <div class="row">
    <!-- Basic  -->
    <div class="col-md-7">
      <div class="card mb-4">
        <h5 class="card-header"><i class="fa fa-image"></i> Update Student Passport</h5>
        <div class="card-body">
          @if(session()->has('errors'))
            <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert">
              <i class="fas fa-times-circle me-2"></i>{{session('errors')->first() }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
              </button>
            </div>
          @endif
          @if(session()->has('success'))
            <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
              <i class="fas fa-check-circle me-2"></i>{{session()->get('success')}}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
              </button>
            </div>
            <script>setTimeout(()=>{location.reload()}, 4000)</script>
          @endif

          <form action="{{route('admin.studentPic',$user->id)}}" method="post" autocomplete="" enctype="multipart/form-data">
            @csrf
            <div class="mb-0">Name: <span class="name fw-semibold">{{$user->surname.' '.$user->other_names}}</span></div>
            <div class="mb-0">Email: <span class="email fw-semibold">{{$user->email}}</span></div>
            <div class="mb-0">Reg No.: <span class="reg fw-semibold">{{$user->reg_number}}</span></div>
            <div id="previewDiv" @if(!$user->avatar)style="display:none;" @endif class="bm-2">
              <img id="preview" style="max-width:200px; margin-top:10px;" src="{{$user->avatar}}">
            </div>
            
            <div class="mb-3">
              <label class="form-label">Upload Passport</label>
              <input type="file" name="passport" id="passport" class="form-control" accept="image/*">
            </div>
            <a href="{{route('admin.studentList')}}" class="btn btn-dark">Back</a>
            <button type="submit" class="btn btn-outline-primary float-end">UPLOAD</button>
          </form>
        </div>
      </div>
    </div>
    <!-- /Basic  -->

  </div>
 <script>
  document.getElementById('passport').addEventListener('change', function(e){
    let reader = new FileReader();
    reader.onload = function(){
        document.getElementById('preview').src = reader.result;
        document.getElementById('previewDiv').style.display = 'block';
    }

    reader.readAsDataURL(e.target.files[0]);

});
</script>
@endsection