@extends('layouts.app')
  <!-- / .main-navbar -->
@section('content')
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />
  <style type="text/css">
    .change-password .rounded-circle{
      border:1px solid #000;
      border-radius: 25% !important;
    }
    .circle {
        width: 120px;
        height: 120px;
        position: relative;
    }
    .loader {
        /* content: ''; */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent;
        border-radius: 50%;
        border: 5px solid #f3f3f3;
        border-top: 6px solid  #008be8;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 2s linear infinite;
    }
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}



@keyframes fadein {
from{

    height: 100%;
    width: 100%;
}
to{
    display: none;
    height: 0%;
    width: 100%;
}

}
    /* .loader {
        border: 6px solid #f3f3f3;
        border-radius: 50%;
        border-top: 6px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    } */

    /* Safari
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    } */
  </style>
  <div class="main-content-container container-fluid px-4">
    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
      <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
        <span class="text-uppercase page-subtitle">Overview</span>
        <h3 class="page-title">Online Admission</h3>
      </div>
    </div>
    <!-- End Page Header -->
    <!-- Default Light Table -->
    <div class="row ">
      <div class="col-lg-5 offset-3">
        <div class="card card-small mb-4 pt-3 bg-dark">
          <div class="card-header border-bottom text-center">
                <div class="mb-2 mx-auto">
                    {{-- <form id="changePhotoForm" action="{{route('change_profile_image')}}" method="post" onsubmit="changePhoto(event, this)" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input id="photo" class="row d-none" type="file" style="" name="photo">
                    </form> --}}
                    <div class="d-flex justify-content-center align-content-center">
                        <div class="circle text-center">
                            <div class="loader d-none"></div>
                            @if($applyAdmission->hasMedia('photo'))
                            <img id="photoFrame" class="rounded-circle text-center stop" src="{{ $applyAdmission->getMedia('photo')[0]->getFullUrl() }}" alt="User Avatar" width="120" height="120px" style="object-fit:cover">
                            @endif
                        </div>
                    </div>
                </div>
                {{-- <div id="success" class="mx-auto justify-content-center align-content-center badge badge-success alert-dismissible mb-3 mt-2 d-none animate__animated" style="width:35%">
                    Photo has been uploaded.
                    <button type="button" class="close d-none" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                </div> --}}
                {{-- <span id="retry" class="d-none mb-2 badge badge-danger mx-auto" style="width:35%"> Upload Failed.
                    <small>
                        <a class="text text-white ml-2" href=""  style="text-decoration:underline" onclick="changePhoto(event,$('#changePhotoForm'))">Retry</a>
                    </small>
                </span> --}}
                {{-- <button id="changePhotoButton" type="button" class="mb-2 btn btn-sm btn-pill btn-outline-primary mr-1">
                <i class="material-icons mr-1">add_a_photo</i>Change Photo
                </button> --}}
                <h4 class="mb-0">{{$applyAdmission->full_name}}</h4>
                <span class="text-muted d-block mb-2">{{$applyAdmission->email}}</span>
                <span class="text-muted d-block mb-1">{{$applyAdmission->school_name}}</span>
          </div>
          <ul class="list-group list-group-flush ">
            <!-- <li class="list-group-item px-4">
              <div class="progress-wrapper">
                <strong class="text-muted d-block mb-2">Workload</strong>
                <div class="progress progress-sm">
                  <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;">
                    <span class="progress-value">74%</span>
                  </div>
                </div>
              </div>
            </li> -->
            <li class="list-group-item p-4">
                <div class="row">
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Guardian Name</strong>
                        <span>{{$applyAdmission->guardian_name}}</span>
                    </div>
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Guardian Number</strong>
                        <span>{{$applyAdmission->guardian_phone_no}}</span>
                    </div>
                </div>
            </li>
            <li class="list-group-item p-4">
                <div class="row">
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Province</strong>
                        <span>{{$applyAdmission->province ?? 'N/A'}}</span>
                    </div>
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">District</strong>
                        <span>{{$applyAdmission->district ?? 'N/A'}}</span>
                    </div>
                </div>
            </li>
            <li class="list-group-item p-4">
                <div class="row">
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Municipality</strong>
                        <span>{{$applyAdmission->municipality ?? 'N/A'}}</span>
                    </div>
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Guardian Occupation</strong>
                        <span>{{$applyAdmission->guardian_occupation ?? 'N/A'}}</span>
                    </div>
                </div>
            </li>
            <li class="list-group-item p-4">
                <div class="row">
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Gpa Or Marks</strong>
                        <span>{{$applyAdmission->total_marks_or_gpa ?? 'N/A'}}</span>
                    </div>
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Grade in English</strong>
                        <span>{{$applyAdmission->grade_in_english ?? 'N/A'}}</span>
                    </div>
                </div>
            </li>
            <li class="list-group-item p-4">
                <div class="row">
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Grade in Math</strong>
                        <span>{{$applyAdmission->grade_in_math ?? 'N/A'}}</span>
                    </div>
                    <div class="col-6">
                        <strong class="text-muted d-block mb-2">Grade in Science</strong>
                        <span>{{$applyAdmission->grade_in_science ?? 'N/A'}}</span>
                    </div>
                </div>
            </li>
            <li class="list-group-item p-4">
                <div class="row">
                    <div class="col-4">
                        <strong class="text-muted d-block mb-2">SLC Marksheet / SEE Gradesheet</strong>
                        @if($applyAdmission->hasMedia('certificate'))
                        <a target="_blank" class="btn btn-primary" href="{{ $applyAdmission->getMedia('certificate')[0]->getFullUrl()}}">View</a>
                        @endif
                    </div>
                    <div class="col-4">
                        <strong class="text-muted d-block mb-2">Birth Certificate / Citizenship</strong>
                        @if($applyAdmission->hasMedia('transcript'))
                        <a target="_blank" class="btn btn-primary" href="{{ $applyAdmission->getMedia('transcript')[0]->getFullUrl()}}">View</a>
                        @endif
                    </div>
                    <div class="col-4">
                        <strong class="text-muted d-block mb-2">Form</strong>
                        @if($applyAdmission->hasMedia('signature'))
                        <a target="_blank" class="btn btn-primary" href="{{ $applyAdmission->getMedia('signature')[0]->getFullUrl()}}">View</a>
                        @endif
                    </div>
                </div>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <!-- End Default Light Table -->
  </div>
@endsection