@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">
    <form id="frminvoice" target="_blank" method="post" action="{{ route('permohonan.download') }}">
        @csrf
        <input type="hidden" id="invoice_id" name="files_id"/>
    </form>

    <form id="frmresit" target="_blank" method="post" action="{{ route('permohonan.download') }}">
        @csrf
        <input type="hidden" id="resit_id" name="files_id"/>
    </form>

    <form id="frmpb" target="_blank" method="post" action="{{ route('permohonan.download') }}">
        @csrf
        <input type="hidden" id="pb_id" name="files_id"/>
    </form>

    <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">   
                    {{-- {{ dd($permohonan) }} --}}
                    
                    <div class="row d-flex justify-content-between px-3 top">
    
                        <div class="ml-4">
            
                            <h5>NO PERMOHONAN : <span class="text-primary font-weight-bold">{{ $permohonan['nopermohonan'] }}</span></h5>
                            <h5>JUMLAH MOHON : <span class="text-primary font-weight-bold">{{ 'RM ' . number_format($permohonan['amaun_mohon'],2) }}</span></h5>
            
                        </div>

                        <div class="mr-4">
            
                            <h5>@php
                                 if($permohonan['jenismohon'] == 'permohonanwang')
                                    echo '<span class="bg-warning rounded p-2">Permohonan Wang </span>';
                                else
                                    echo '<span class="bg-info rounded p-2">Bayaran Balik </span>';
                                 @endphp</h5>
            
                        </div>
            
                    </div>

                  
            
                    <!-- Add class 'active' to progress -->
            
                    @if($permohonan['jenismohon'] == 'permohonanwang')
                        <div class="row d-flex justify-center">
                            <div class="col-12">
                                <ul id="progressbar" class="text-center flex">
                                    <li class="{{ ($permohonan['tarikh_permohonan'] !== null) ? 'active' : '' }} step0 col-2"></li>
                                    <li class="{{ ($permohonan['tagoperasi'] === 1) ? 'active' : '' }} step0 col-2"></li>
                                    <li class="{{ ($permohonan['tagakaun'] === 1) ? 'active' : '' }} step0 col-2"></li>
                                    <li class="{{ ($permohonan['tagpb'] === 1) ? 'active' : '' }} step0 col-2"></li>
                                    <li class="{{ ($permohonan['tagdeposit'] === 1) ? 'active' : '' }} step0 col-2"></li>
                                    <li class="{{ ($permohonan['tagterima'] === 1) ? 'active' : '' }} step0 col-2"></li>
                                </ul>
                            </div>
                        </div>
                    @else
                        <div class="row d-flex justify-content-center">
                            <div class="col-10">
                                <ul id="progressbar" class="text-center d-flex">
                                    <li class="{{ ($permohonan['tarikh_permohonan'] !== null) ? 'active' : '' }} step0 col-3"></li>
                                    <li class="{{ ($permohonan['tagcit'] === 1) ? 'active' : '' }} step0 col-3"></li>
                                    <li class="{{ ($permohonan['tagoperasi'] === 1) ? 'active' : '' }} step0 col-3"></li>
                                    <li class="{{ ($permohonan['tagakaun'] === 1) ? 'active' : '' }} step0 col-3"></li>
                                </ul>
                            </div>
                        </div>

                    @endif
            
            
                    @if($permohonan['jenismohon'] == 'permohonanwang')
                    
                    <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">Permohonan <br>Cawangan</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">Pengesahan<br>Operasi</p>
                                {!! ($permohonan['tagoperasi'] === 2) ? '<img class="icon position-absolute" style="top:0;left:20;"  src=' .  asset('img/batal.png')  .'>' : '' !!}
                            </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</p>
                                {!! ($permohonan['tagakaun'] === 2) ? '<img class="icon position-absolute" style="top:0;left:20;"  src=' .  asset('img/batal.png')  .'>' : '' !!}
                            </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">Kelulusan <br>Pengurus Besar</p>
                                {!! ($permohonan['tagpb'] === 2) ? '<img class="icon position-absolute" style="top:0;left:20;"  src=' .  asset('img/batal.png')  .'>' : '' !!}
                            </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> Deposit Ke Bank <br>Selesai</p>
                                {!! ($permohonan['tagdeposit'] === 2) ? '<img class="icon position-absolute" style="top:0;left:20;"  src=' .  asset('img/batal.png')  .'>' : '' !!}
                            </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">Cawangan<br> Terima Wang</p>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="d-flex col-10 mx-auto justify-content-center">
                        <div class="text-center icon-content col-3"> <img class="icon mx-auto" src="{{ asset('img/proposal.png') }}">
                            <div class="flex flex-column">
                                <p class="font-weight-bold text-center">Permohonan <br>Cawangan</p>
                            </div>
                        </div>

                        <div class="justify-center text-center icon-content col-3"> <img class="icon mx-auto" src="{{ asset('img/operasicek.png') }}">
                            <div class="flex flex-column">
                                <p class="font-weight-bold text-center">CIT Selesai Deposit ke Bank</p>
                            </div>
                        </div>
            
                        <div class="justify-center text-center icon-content col-3"> <img class="icon mx-auto" src="{{ asset('img/operasicek.png') }}">
                            <div class="flex flex-column">
                                <p class="font-weight-bold text-center">Pengesahan<br>Operasi</p>
                            </div>
                        </div>
            
                        <div class="flex flex-col text-center icon-content col-3"> <img class="icon mx-auto" src="{{ asset('img/operasicek.png') }}">
                            <div class="d-flex flex-column">
                                <p class="font-weight-bold text-center">Akaun</p>
                            </div>
                        </div>
                    </div>

                    @endif

                    <table class="table table-striped">
                        <thead class="thead-dark">
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">Tarikh</th>
                            <th scope="col">Masa</th>
                            <th scope="col">Penerangan</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach($getdescription as $index=>$desc)
                          <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $desc[0]['tarikh'] }}</td>
                            <td>{{ $desc[0]['masa'] }}</td>
                            <td>@php
                             
                             switch($desc['statusid']){
                                case 1: echo $desc['description'] . '<br>' . 'NAMA :' . $desc[0]['nama_pemohon'];
                                        break;
                                case 2: echo $desc['description'] . '<br>' . 'NAMA :' . $desc[0]['nama_operasi'];
                                        break;
                                case 3: echo $desc['description'] . '<br>' . 'NAMA :' . $desc[0]['nama_akaun'];
                                        break;
                                case 4: echo $desc['description'] . '<br>' . 'JUMLAH DILULUSKAN :RM' . number_format($desc[0]['jumlah_diluluskan'],2) . '<br><button class="mt-2 btn btn-info mr-2" onclick="pbdownload(' . $desc[0]['pbfiles'] . ')">Muat Turun Surat</button>';
                                        break;
                                case 5: echo $desc['description'] . '<br>' . 'NAMA BANK :' . $desc[0]['jenisbank'] . '<br>' . 'JENIS CIT:' . $desc[0]['jeniscit'] . '<br>' . 'NO RUJUKAN :' . $desc[0]['noresit'] . '<br>' . 'NOTA:' . $desc[0]['namasyarikat'];
                                        break;
                                case 6: echo $desc['description'] . '<br>' . 'NAMA:' . $desc[0]['nama_penerima'];
                                        break;
                                case 7: echo $desc['description'];
                                        break;
                                case 8: echo $desc['description'] . '<br>' . 'NAMA BANK :' . $desc[0]['jenisbank'] .'<br><button class="mt-2 btn btn-info mr-2" onclick="resitdownload(' . $desc[0]['resitfiles'] . ')">Muat Turun Resit</button><button class="mt-2 btn btn-info" onclick="invoicedownload('  . $desc[0]['invoicefiles'] . ')">Muat Turun Invoice</button>';
                                        break;
                             }
                             
                             
                             
                             @endphp</td>
                          </tr>
                          @endforeach
                        </tbody>
                    </table>
                      
            

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

    function invoicedownload(invoiceid){
     $('#invoice_id').val(invoiceid);

     $('#frminvoice').submit();
    }

    function resitdownload(resitid){
     $('#resit_id').val(resitid);
     $('#frmresit').submit();
    }

    function pbdownload(pbid){
        $('#pb_id').val(pbid);
        $('#frmpb').submit();
    }

</script>
@endsection