@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="{{ asset('css/upload.css') }}" >
<style type="text/css">
	label{
		font-weight: bold !important;
	}
	span.required{
		color:red;
	}

	.btn-file{
		border: 1px solid #000;
		height: 50px;
		font-size: 20px;
	}
	.btn-file input[type=file] {
	  position: absolute;
	  top: 0;
	  right: 0;
	  min-width: 100%;
	  min-height: 100%;
	  font-size: 100px;
	  text-align: right;
	  filter: alpha(opacity=0);
	  opacity: 0;
	  outline: none;
	  background: white;
	  cursor: inherit;
	  display: block;
	}
	span.file{
		font-size: 15px;
		font-weight: 400;
		padding: 5px;
		color:#4D525B;
	}
	.uploadfrm{
		border:1px dotted #BEC0C2;
		padding: 10px;
		margin:10px;
	}
</style>
	<!-- 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">Testimonials Page</span>
	    <h3 class="page-title">{{isset($edit)? 'Edit': 'Add New'}} </h3>
	  </div>
	</div>
	<!-- End Page Header -->
    <form class="add-new-post" action="{{isset($edit)?route('top_student.update', $edit->id):route('top_student.store')}}" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="col-lg-9 col-md-12">
                <!-- Add New Post Form -->
                <div class="card card-small mb-3">
                    <div class="card-body">
                            @csrf
                            @if(isset($edit))
                            <input type="hidden" name="id" value="{{$edit->id}}" />
                            @endif
                            <label class="pl-3">Image <span class="required">*</span></label>
                            <div class="slider container py-2">
                                <div class="row py-1">
                                    <div class="col-lg-6 mx-auto">
                                        <!-- Upload image input-->
                                    <div class="input-group mb-3 px-2 py-2 rounded-pill bg-black shadow-sm {{$errors->first('image')?'border-danger':''}}">
                                            <input id="upload" type="file" onchange="readURL(this);" class="form-control border-0" name="image">
                                            <label id="upload-label" for="upload" class="font-weight-light  {{$errors->first('image')? 'text-danger':'text-muted'}}">
                                                {{$errors->first('image')?'** '.$errors->first('image') : 'Click inside box' }}
                                        </label>
                                            <div class="input-group-append">
                                                <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
                                            </div>
                                        </div>

                                        <!-- Uploaded image area-->
                                        <p class="font-italic text-black text-center">The image uploaded will be rendered inside the box below.</p>
                                    <div class="image-area mt-4 {{ $errors->first('image') ? 'border-danger':''}}">
                                        <img width="200px" height="200px" id="imageResult" src="{{ (isset($edit) && isset($edit->getMedia()[0])) ? $edit->getMedia()[0]->getFullUrl() : '#'}}" alt="" class="img-fluid rounded shadow-sm mx-auto d-block">
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="col-md-12 col-sm-12 p-0 pl-3">
                                <label for="name" class="">Name <span class="required">*</span> </label>
                                <input class="form-control form-control-lg mb-1 {{ $errors->first('name') ? 'is-invalid':'' }}" id="name" type="text" name="name" value="{{old('name')?old('name'):(isset($edit)?$edit->name:'')}}" placeholder="Enter name here">
                                @if($errors->first('name'))
                                    <div class="text text-danger ">
                                        ** {{$errors->first('name')}}
                                    </div>
                                @endif
                            </div>
                             <div class="col-md-12 col-sm-12 p-0 pl-3">
                                <label for="course_name" class="">Course Name <span class="required">*</span> </label>
                                <input class="form-control form-control-lg mb-1 {{ $errors->first('course_name') ? 'is-invalid':'' }}" id="course_name" type="text" name="course_name" value="{{old('course_name')?old('course_name'):(isset($edit)?$edit->course_name:'')}}" placeholder="Enter Course">
                                @if($errors->first('course_name'))
                                    <div class="text text-danger ">
                                        ** {{$errors->first('course_name')}}
                                    </div>
                                @endif
                            </div>
                             <div class="col-md-12 col-sm-12 p-0 pl-3">
                                <label for="gpa" class="">Gpa Points <span class="required">*</span> </label>
                                <input class="form-control form-control-lg mb-1 {{ $errors->first('gpa') ? 'is-invalid':'' }}" id="gpa" type="text" name="gpa" value="{{old('gpa')?old('gpa'):(isset($edit)?$edit->gpa:'')}}" placeholder="Enter Gpa points here">
                                @if($errors->first('gpa'))
                                    <div class="text text-danger ">
                                        ** {{$errors->first('gpa')}}
                                    </div>
                                @endif
                            </div>
                            <br>
                    </div>
                </div>
                <!-- / Add New Post Form -->
            </div>
            <div class="col-lg-3 col-md-12">
                <!-- Post Overview -->
                <div class='card card-small mb-3'>
                    <div class="card-header border-bottom">
                        <h6 class="m-0">Actions</h6>
                    </div>
                    <div class='card-body p-0'>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item p-3">
                                <span class="d-flex mb-2">
                                    <i class="material-icons mr-1">flag</i>
                                    <strong class="mr-1">Status:</strong>@if(isset($edit))<span class="text text-success" >Created </span>@else <span class="text text-danger" >Not Created</span> @endif
                                </span>
                            </li>
                            <li class="list-group-item d-flex px-3">
                                @if(isset($edit))
                                <button id="update" class="btn btn-sm btn-accent ml-auto">
                                    <i class="material-icons">file_copy</i> Update
                                </button>
                                @else
                                <button id="save" class="btn btn-sm btn-accent ml-auto">
                                    <i class="material-icons">file_copy</i> Publish
                                </button>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- / Post Overview -->
            </div>
        </div>
    </form>
    <script src="{{ asset('js/upload.js') }}"></script>
	<script type="text/javascript">

	</script>

@endsection