@extends('layouts.templateuni')
@section('content')
<style>
    h3{font-size: 20px;}
    .respoimg{ max-width: 100%;
  height: auto;}
img {
        width: 100%;
    max-height: 400px!important;
}
.youtubeframewidt{width:331px;}
img#optionalstuff {
      max-width: 250px;
    }
@media (max-width: 1200px){
        .youtubeframewidt{width:300px;}
}
@media (max-width: 923px){
        .youtubeframewidt{width:300px;}
}
@media (max-width: 768px){
.uni-details {
    height: 400px;
}
.youtubeframewidt{width:100%;}

    img#optionalstuff {
      max-height:150px !important;
      max-width: auto;
    }
 
}
@media only screen and (max-width: 600px) {
        .youtubeframewidt{width:100%;}
        .uni-details {
    height: 300px;
}
}

.btn.btn-primary {
    border: 1px solid #ffa827;
    background-image: linear-gradient(to bottom,rgba(84,47,107,1) ,rgba(84,47,107,1) );
}
.rc-box {
    background-image: linear-gradient(to bottom,rgba(84,47,107,1) ,rgba(84,47,107,1) );
    border-bottom: 1px solid #ffa827;
    padding: 8px;
    position: relative;
}
    </style>
      <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
    <section class="inner_header uni-details ">
        <div class="uni-title-video-cut-1">
            
                <div class="col-md-12 col-sm-12   cut-color-1"> 
                        <div class="col-md-12 col-sm-12  cut-color-1 "> 
                        <img src="{{url('/storage/university/logo/'.$university->uni_logo)}}" id="optionalstuff" alt="{{$university->uni_name}}">
                             
                       
                        </div>
                        <div class="col-md-12 col-sm-12  cust-h2-tag cut-color-1"> 
                                <h1>{{$university->uni_name}}</h1>
                        </div>             
                        </div>  

        </div>
        <picture>
                <source media="(max-width: 576px)"
                        srcset="{{url('/storage/university/mobile/'.$university->uni_mob_image)}}">
                <source media="{{url('/storage/university/'.$university->uni_image)}}"
                        srcset="{{url('/storage/university/'.$university->uni_image)}}">

                <source media="(max-width: 768px)"
                        srcset="{{url('/storage/university/tab/'.$university->uni_tab_img)}}">
                <source media="{{url('/storage/university/'.$university->uni_image)}}"
                        srcset="{{url('/storage/university/'.$university->uni_image)}}">


                <source media="(max-width: 992px)"
                        srcset="{{url('/storage/university/lap/'.$university->uni_lap_img)}}">
                <source media="{{url('/storage/university/'.$university->uni_image)}}"
                                srcset="{{url('/storage/university/'.$university->uni_image)}}">


                <source media="(min-width: 993px)"
                srcset="{{url('/storage/university/'.$university->uni_image)}}">
        <img src="{{url('/storage/university/'.$university->uni_image)}}">
              </picture>
 
      
     

    </div>
    </section>   

    <section class="inner_header white bottom-mrg">
    <div class="container-desc" > 
    <div class="row-desc">
    <div class="row bottom-mrg">
     <div class="col-md-8 col-sm-12 cust-flaot-left">               
    <div class="col-md-12 col-sm-12  cust-flaot-left"> 
    <div class="col-md-4 col-sm-12  "> 
    <img src="{{url('/storage/university/logo/'.$university->uni_logo)}}" style="max-width:200px;" alt="{{$university->uni_name}}"  >
    </div>
    <div class="col-md-8 col-sm-12  "> 
        <div class="cust-title-3">
                <h2>{{$university->uni_name}}</h2>
        <div class="col-md-12 col-sm-12">
        <ul>
        <li><small><i class="fa fa-map-marker"></i><span>{{$university->country->country_name}}</span></small></li>
                <li><small><i class="fa fa-trophy"></i><span>The world ranking: {{$university->uni_rank}}</span></small></li>
                <li><small><i class="fa fa-globe"></i><span><a href="https://{{$university->uni_website}}" target="_blank">Visit website </a></span></small></li>
        </ul> 
       </div>
        <div class="col-md-12 col-sm-12">
                <div class="detail-footer-btn pull-right">
                    <a  onclick="bootstappopup('{{$university->uni_name}}','{{$university->country->country_name}}')" class="footer-btn btn btn-primary" title="">Get application guidence</a>
                    
                </div></div>    
        </div>
    </div>
        <div class="col-md-12 col-sm-12 border-bottom-blue">
                {!!$university->uni_desc!!} 

        </div>
        <div class="col-md-12 col-sm-12 border-bottom-blue bottom-padding">
         <h4>Average Tuition Fee Per Year</h4> 
         <div class="col-md-6 col-sm-12">
                <div class="col-md-12 col-sm-12"><strong> Undergraduate</strong></div> 
             <div class="col-md-12 col-sm-12">{!!$currencycode!!} {{number_format($university->uni_ug_fee)}}</div> 
         </div> 
         <div class="col-md-6 col-sm-12">
                <div class="col-md-12 col-sm-12"><strong> Postgraduate</strong></div> 
             <div class="col-md-12 col-sm-12">{!!$currencycode!!} {{number_format($university->uni_pg_fee)}}</div> 
         </div> 
       
         <div class="clearfix"></div> 
         <h4>Costs per year</h4> 
         <div class="col-md-6 col-sm-12">
                <div class="col-md-12 col-sm-12"><strong> Overall cost of living</strong></div> 
             <div class="col-md-12 col-sm-12">{!!$currencycode!!} {{number_format($university->uni_overall_cost)}}</div> 
         </div> 
         <div class="col-md-6 col-sm-12">
                <div class="col-md-12 col-sm-12"><strong> Campus accommodation</strong></div> 
             <div class="col-md-12 col-sm-12">{!!$currencycode!!} {{number_format($university->uni_campus_cost)}}</div> 
         </div> 
        <div  class="col-md-12 col-sm-12" ><small>
               Please note that  fees will vary.
              Always check the exact cost of the program and bear in mind likely additional expenses.</small></div>
        </div>
                <div class="col-md-12 col-sm-12 border-bottom-blue bottom-padding">
                <h4>Courses offered</h4> 
               
                <ul>
                @foreach($subjects as $subject)
                        <li  class="col-md-6 col-sm-12 cust-float-left"><a href="{{url('university-course-subject/'.$university->uni_id.'/'.$subject->subject_id)}}">{{$subject->subjects->subject_name}}</a></li>
                     
                        @endforeach
                 
                <li><a href="{{url('overseas-education-courses/?course_country_id='.$university->uni_countryid.'&course_university_id='.$university->uni_id)}}"><strong>View all courses</strong></a></li>
                </ul>
            </div>
             
    </div>  

     </div>
    <div class="col-md-4 col-sm-12 cust-flaot-left">   
    
    @include('inc.unifacilities')
    </div>        
    </div>


    </div>
    </div>
    </section>     

   
    <script>
    function bootstappopup(uniname,countryname){
        $("#myModal").modal();        
      
    
        $('#pop_uni').val(uniname);
        $('#pop_country').val(countryname);
        
    }
            </script>  
             @include('inc.applicationuniversity')
    @endsection