@extends('frontend.header')
@section('content')

        <div class="container">
            <h1 style="text-align: center; margin:2% 0% 2% 0%;">Indigo Parking</h1>
            <div class="row" style="padding: 5%;display: block;">
                @if($details != '')
                @foreach($details as $row)
                <div class="col-sm-4">
                    <div class="card" style="width:100%;">
                        <div class="title" style="background-color: #e3e3e3; height:80px; width:100%; margin:0%; padding:0%;" >
                            <h4 style="padding-left: 11px; margin-bottom:0px !important; ">{{$row->provider_name}}</h4>

                            @if($row->service_type =='ParkingService')
                            <p style="padding-left: 3%;">Parking Service</p>
                            @elseif($row->service_type =='RidingService')
                            <p style="padding-left: 3%;">Riding Service</p>
                            @elseif($row->service_type =='Park&RidingService')
                            <p style="padding-left: 3%;">Park & Riding Service</p>
                            @else
                            <p style="padding-left: 3%;">Meet & Greet Service</p>
                            @endif

                           <!--  <p style="padding-left: 3%;"><i>{{$row->service_type}}</i></p> -->
                        </div>
                        <div class="contant">
                            @if($row->logo !="")
                            <a href="{{$row->logo}}" data-fancybox="images"><img src="{{$row->logo}}" class="my-img"></a>
                            @else
                            <img src="image/logo/briyani1.jpg">
                            @endif
                           <!--  <img src="image/logo/briyani1.jpg" alt="logo" style="width: 90%;  margin: 8% 0% 8% 4.5%;"> -->
                            <div class="rating">
                                <div class="star">
                                    @if($row->provider_rating =="5")
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    @elseif($row->provider_rating =="4")
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    @elseif($row->provider_rating =="3")
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    @elseif($row->provider_rating =="2")
                                    <span class="fa fa-star active"></span>
                                    <span class="fa fa-star active"></span>
                                    @elseif($row->provider_rating =="1")
                                    <span class="fa fa-star active"></span>
                                    @else

                                    @endif
                                </div>
                                <div class="right-rat">
                                    <p>Rating <span>{{$row->provider_rating}}</span> out of 5</p>
                                </div>
                            </div>
                            <div class="list viewlist">
                                                                <!-- <ul>
                                    <li><i class="fa fa-arrow-right"></i>Opening times: 24 Hours / 7 Days</li>
                                    <li><i class="fa fa-arrow-right"></i>No Need to Airport Transfer.</li>
                                    <li><i class="fa fa-arrow-right"></i>Comprehensively Insured Drivers.</li>
                                    <li><i class="fa fa-arrow-right"></i>Reliable, Punctual & professional staff</li>
                                    <li><i class="fa fa-arrow-right"></i>Meet & Greet Serice</li>
                                </ul> -->
                            </div>
                            <div style="text-align: center; margin:2%;">
                                <h5 class="viewprovider"  id="" data-toggle="modal" data-target="#myModal_{{$row->providerid}}"><i class="fa fa-plus"></i>&nbsp; Car Park Info</h5>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="modal-box">
                                            <!-- Modal -->
                                            <div class="modal myModal fade" id="myModal_{{$row->providerid}}" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                <div class="modal-dialog results" role="document">
                                                    <div class="modal-content">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">×</span>
                                                        </button>
                                                        <div class="modal-header top-head">
                                                            <!--  <h5 class="modal-title">Customer Support Policy</h5> -->
                                                            <div class="row">
                                                                <div class="col-lg-2">
                                                                    <a href="{{$row->logo}}" data-fancybox="images"><img src="{{$row->logo}}" class="pop-img"></a>
                                                                </div>
                                                                <div class="col-lg-6 viewlist">
                                                                    <h4>{{$row->provider_name}}</h4>

                                                                    @if($row->service_type =='ParkingService')
                                                                    <p>Parking Service</p>
                                                                    @elseif($row->service_type =='RidingService')
                                                                    <p>Riding Service</p>
                                                                    @elseif($row->service_type =='Park&RidingService')
                                                                    <p>Park & Riding Service</p>
                                                                    @else
                                                                    <p>Meet & Greet Service</p>
                                                                    @endif

                                                                    <div class="ratings">
                                                                        <div class="star">
                                                                            @if($row->provider_rating =="5")
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            @elseif($row->provider_rating =="4")
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            @elseif($row->provider_rating =="3")
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            @elseif($row->provider_rating =="2")
                                                                            <span class="fa fa-star active"></span>
                                                                            <span class="fa fa-star active"></span>
                                                                            @elseif($row->provider_rating =="1")
                                                                            <span class="fa fa-star active"></span>
                                                                            @else

                                                                            @endif
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="col-lg-2 views">
                                                                    <h3>Amount<span>${{$row->price}}</span></h3>
                                                                </div>
                                                                <div class="col-lg-2 bookbutton">
                                                                    <button>Book Now</button>
                                                                </div>
                                                            </div>


                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="container">
                                                                    <div class="col-lg-12 bg-clr">
                                                                    <div class="col-lg-3"><h3 class="overview">Overview</h3></div>
                                                                    <div class="col-lg-3"><h3 class="drop">Drop-off Procedure</h3></div>
                                                                    <div class="col-lg-3"><h3 class="return">Return Procedure</h3></div>
                                                                    </div>

                                                                    <div class="over_view">
                                                                                                                                            </div> 
                                                                    <div class="dropoff" style="display:none;">
                                                                          
                                                                    </div>
                                                                    <div class="returns" style="display:none;">
                                                                                                                                             </div>
                                                                </div>

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

                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-6 rate">
                                        <p>$ {{$row->price}}</p>
                                    </div>
                                    <div class="col-sm-6 text-right">
                                        <button class="btn btn-success" style="padding-bottom: 3%;margin-bottom: 15px; font-size: 15px;">Book Now</button>
                                    </div>
                                </div>
                            </div>
                            <!-- <button class="btn btn-primary" style="padding-bottom: 3%;margin-left: 74px;margin-bottom: 15px; font-size: 15px;">NO SPACE AVAILABLE</button> -->
                        </div>
                        <div class="title" style="background-color: #e3e3e3; height:35px; width:100%; margin:0%; padding:0%;" >
                             @if($row->cancellation =="1")
                            <p style="padding-left: 3%; text-align:center; padding-top:1%; color:orange;"><i class="fa fa-arrow-right"></i>&nbsp; Cancellation Cover Available.<i>
                            @else
                            <p style="padding-left: 3%; text-align:center; padding-top:1%; color:orange;"><i class="fa fa-arrow-right"></i>&nbsp; Cancellation Cover Available.<i>
                            @endif
                            </i></p>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif

            </div>
        </div>




        
<style>

.contant {
    margin: 0px !important;
}
 .rating {
    margin:15px 20px 0 20px;
    display: flex;
    justify-content: space-between;
 }
 .star {
     margin: 0px !important;
 }
 .right-rat {
    margin: 0px !important;
 }
 .right-rat p span {
    color: #ff0000;
    font-weight: 600;
 }
.star .fa-star.active{
    color: #6610f2 !important;
    background: none !important;
    padding: 0px !important;
    font-size: 18px;

}
.star .fa-star.active::before {
    color: #ffbe00;
}
/*.star .fa-star{
    color: #6610f2;
}*/
.list {
    margin: 0% 0% 0% 3%;
}
.fa-arrow-right {
    color: orange;
}
</style>        
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// function openCity(evt, cityName) {
//   var i, x, tablinks;
//   x = document.getElementsByClassName("city");
//   for (i = 0; i < x.length; i++) {
//     x[i].style.display = "none";
//   }
//   tablinks = document.getElementsByClassName("tablink");
//   for (i = 0; i < x.length; i++) {
//     tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
//   }
//   document.getElementById(cityName).style.display = "block";
//   evt.currentTarget.className += " w3-red";
// }
$(document).ready(function (e) { 

    $(".overview").click(function(){
        $(".over_view").show();
        $(".dropoff").hide();
        $(".returns").hide();
    });

    $(".drop").click(function(){
        $(".dropoff").show();
        $(".over_view").hide();
        $(".returns").hide();
    });

    $(".return").click(function(){
        $(".returns").show();
        $(".over_view").hide();
        $(".dropoff").hide();
    });

    });
</script>

@endsection