@extends('director.dashboard')

@section('title','Doctor list')

@section('content')
	<div class="row">
		@foreach($doctors as $key=>$doctor)
			@inject('doctorModel','App\Doctor')
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="single-product-item mb-30">
                <div class="product-card">
                    <a class="product-thumb" href="">
                    	<img src="{{ asset('storage/'.$doctor->user->photo) }}" alt="{{$doctor->name}}">
                    </a>
                    <h3 class="product-title">
                    	<a href="">{{$doctor->user->name}}</a>
                    </h3>
                    <p>{{substr($doctor->education, 0, 30)}}</p>
                    {{$doctor->reg}}
                    
                    <div class="product-buttons">
                        <a class="btn btn-primary btn-sm mt-20" href="#" data-toggle="modal" data-target="#details{{$key}}">
                        	<i class="fa fa-search-plus"></i> </a>

                        <a class="btn btn-primary btn-sm mt-20" href="{{$doctor->id}}" data-toggle="tooltip" data-placement="top" data-original-title="Edit doctor">
                        	<i class="fa fa-edit"></i> </a>

                        <a class="btn btn-primary btn-sm mt-20" href="{{$doctor->id}}" data-toggle="tooltip" data-placement="right" data-original-title="{{$doctor->chambers->count()}} chambers">
                        	<i class="ti-wheelchair"></i> </a>

                    </div>
                    <!-- <p>By  {{$doctorModel->user_name($doctor->add_by)}}</p> -->
                </div>
            </div>
        </div>

        <div class="modal inmodal" id="details{{$key}}" tabindex="-1" 
        	role="dialog" aria-hidden="true">
	        <div class="modal-dialog modal-lg">
	            <div class="modal-content animated bounceInRight">
	                <div class="modal-header">
	                    <h4 style="width:100%" class="modal-title d-block float-left">{{$doctor->user->name}}
	                    <button type="button" class="btn btn-danger float-right" data-dismiss="modal">Close</button></h4>
	                </div>
	                <div class="modal-body">
	                	<h5>Doctor Education:</h5>
	                    <pre>{{$doctor->education}}</pre>
	                    <h5>Comment/Views of the doctor</h5>
	                    <pre>{{$doctor->other_details}}</pre>
	                </div>
	                <div class="modal-footer">
	                    
	                    <a class="btn btn-primary btn-sm mt-20" href="">
                        	<i class="fa fa-edit"></i> Edit data</a>
                        	
                        <a class="btn btn-primary btn-sm mt-20" href="">
                        	<i class="ti-wheelchair"></i> Chamber details</a>
	                </div>
	            </div>
	        </div>
	    </div>
        @endforeach
        <div class="col-md-12 col-lg-12 col-xl-12 text-center">
	        <hr><center>{{$doctors->links()}}</center> <hr>
	   	</div>
    </div> 
@endsection

<style type="text/css">
	pre{
		overflow-x: auto;
    	white-space: pre-wrap;
	}
</style>