@extends('layouts.app')
<style>
.card {
    z-index: 0;
    background-color: #ECEFF1;
    padding-bottom: 20px;
    margin-top: 90px;
    margin-bottom: 90px;
    border-radius: 10px
}

.top {
    padding-top: 40px;
    padding-left: 13% !important;
    padding-right: 13% !important
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: #455A64;
    padding-left: 0px;
    margin-top: 30px;
}

#progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 17%;
    float: left;
    position: relative;
    font-weight: 400;
    z-index: 1;
}

#progressbar .step0:before {
    /* font-family: FontAwesome; */
    content: '\f057';
    font-family: "Font Awesome 5 Free"; 
    color: #fff;
}

#progressbar li:before {
    width: 40px;
    height: 40px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    background: #C5CAE9;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 12px;
    background: #c5cae9e8;
    position: absolute;
    left: 0;
    top: 16px;
    z-index: -1;
}

#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    /* left: -50%; */
    width: 50%;
}

/* #progressbar li:nth-child(2):after,
#progressbar li:nth-child(3):after,
#progressbar li:nth-child(4):after {
    left: -50%
}  */

#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
}

#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px
}

#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #e67e22
}

#progressbar li.active:before {
    /* font-family: FontAwesome; */
    /* content: "\f095";  */
    content: '\f058'; 
    font-family: "Font Awesome 5 Free"; 
}

.icon {
    width: 60px;
    height: 60px;
    /* margin-right: 15px */
}

.icon-content {
    padding-bottom: 20px
}

@media screen and (max-width: 992px) {
    .icon-content {
        width: 50%
    }
}
</style>
@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb pb-3">
                      <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                      <li class="breadcrumb-item"><a href="{{ route('permohonan.index') }}">Permohonan</a></li>
                      <li class="breadcrumb-item active" aria-current="page">Status</li>
                    </ol>
                </nav>

                <div class="card-body mx-auto col-12">   
                    
                    
                    <div class="row d-flex justify-content-between px-3 top">
    
                        <div class="d-flex">
            
                            <h5>NO PERMOHONAN : <span class="text-primary font-weight-bold">{{ $permohonan['nopermohonan'] }}</span></h5>
            
                        </div>
            
                    </div>
            
                    <!-- Add class 'active' to progress -->
            
                    <div class="row d-flex justify-center">
            
                        <div class="col-12">
            
                            <ul id="progressbar" class="text-center flex">
            
                                <li class="{{ ($permohonan[0]) ? 'active' : '' }} step0 col-2"></li>
            
                                <li class="{{ ($permohonan[1]) ? 'active' : '' }} step0 col-2"></li>
            
                                <li class="{{ ($permohonan[2]) ? 'active' : '' }} step0 col-2"></li>
            
                                <li class="{{ ($permohonan[3]) ? 'active' : '' }} step0 col-2"></li>
            
                                <li class="{{ ($permohonan[4]) ? 'active' : '' }} step0 col-2"></li>
            
                                <li class="{{ ($permohonan[5]) ? 'active' : '' }} step0 col-2"></li>
            
                            </ul>
            
                        </div>
            
                    </div>
            
            
            
                    <div class="d-flex col-12">
            
                        <div class="text-center icon-content col-2"> <img class="icon mx-auto" src="{{ asset('img/proposal.png') }}">
            
                            <div class="flex flex-column">
            
                                <p class="font-weight-bold text-center">PPC / PC<br>Mohon Wang</p>
            
                            </div>
            
                        </div>
            
                        <div class="justify-center text-center icon-content col-2"> <img class="icon mx-auto" src="{{ asset('img/operasicek.png') }}">
            
                            <div class="flex flex-column">
            
                                <p class="font-weight-bold text-center">Operasi <br> Mengesahkan <br> Permohonan</p>
            
                            </div>
            
                        </div>
            
                        <div class="flex flex-col text-center icon-content col-2"> <img class="icon mx-auto" src="{{ asset('img/operasicek.png') }}">
            
                            <div class="d-flex flex-column">
            
                                <p class="font-weight-bold text-center">Akaun <br> Mengesahkan<br> Permohonan</p>
            
                            </div>
            
                        </div>
            
                        <div class="flex flex-col text-center icon-content col-2"> <img class="icon mx-auto" src="{{ asset('img/leaderapproval.png') }}">
            
                            <div class="d-flex flex-column">
            
                                <p class="font-weight-bold text-center">PB <br> Mengesahkan <br> Permohonan</p>
            
                            </div>
            
                        </div>
            
                        <div class="flex flex-col text-center icon-content col-2"> <img class="icon mx-auto" src="{{ asset('img/chequetick.png') }}">
            
                            <div class="d-flex flex-column">
            
                                <p class="font-weight-bold text-center">Akaun <br> Menghantar <br> Deposit</p>
            
                            </div>
            
                        </div>
            
                        <div class="flex flex-col text-center icon-content col-2"> <img class="icon mx-auto" src="{{ asset('img/money.png') }}">
            
                            <div class="d-flex flex-column">
            
                                <p class="font-weight-bold text-center">PPC / PC <br> Terima Wang</p>
            
                            </div>
            
                        </div>
            
                    </div>
            

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
@endsection