@extends('layouts.app')

@section('content')
<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="{{asset('')}}/assets/img/photos/bg4.jpg">
    <div class="container py-10 py-md-10" data-cue="slideInLeft" data-duration="1500">
        <h2 class="display-4 mb-3 text-center text-white">{{$layanan->nama}}</h2>

    </div>
</section>
<section class="wrapper bg-pale-ash py-10 px-12">
    <div class="card ">
        <div class="card-body">
            <ul class="nav nav-tabs nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab_info">
                        <i class="uil uil-comment-info pe-1"></i>
                        <span>Informasi</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_list">
                        <i class="uil uil-clipboard-notes pe-1"></i>
                        <span>List Pengajuan</span>
                    </a>
                </li>
                <li class="nav-item">
                @if($layanan->jenis_url == 1)
                    <a class="nav-link" href="{{ route($layanan->url) }}">
                        <i class="uil uil-envelope-upload pe-1"></i>
                        <span>Form Pengajuan</span>
                    </a>
                @else
                    <a class="nav-link" href="{{ $layanan->url }}" target="_blank">
                        <i class="uil uil-globe pe-1"></i>
                        <span>Buka Website</span>
                    </a>
                @endif
                    
                </li>
            </ul>
            <!-- /.nav-tabs -->
        
            <div class="tab-content shadow-lg">
                <div class="tab-pane fade show active" id="tab_info">
                    <div class="card mb-4 p-5 text-justify">
                    @if (count($info) == 0)
                    <p class="mb-6 text-center"><b> INFORMASI BELUM TERSEDIA</b></p>
                    @else
                        @foreach ($info as $key => $value)
                            <h7><b>{{$value->judul}}</b></h7>
                            {!! $value->isi !!}
                                @php 
                                    $ext = strtolower(pathinfo($value->file, PATHINFO_EXTENSION));
                                @endphp
                                @if (!empty($value->file))
                                    @if ($ext=="jpg" || $ext=="jpeg" || $ext=="png" || $ext=="webp")
                                    <!-- <img class="rounded-circle w-20 h-20 mx-auto mb-4" src="{{asset('file_informasi/')."/".$value->file}}" alt="" /> -->
                                        <figure class="overlay overlay-3 overlay-gradient-1 hover-scale rounded  w-30 h-30 mx-auto mb-4">
                                            <a href="{{asset('file_informasi/')."/".$value->file}}" target="_blank"> 
                                                <img src="{{asset('file_informasi/')."/".$value->file}}"  alt="" />
                                            </a>
                                            <figcaption>
                                                <h5 class="from-left mb-1">File {{$value->judul}}</h5>
                                                <p class="from-left mb-0">{{$value->file}}</p>
                                            </figcaption>
                                        </figure>
                                    @else
                                        <a href="{{asset('file_informasi/')."/".$value->file}}" target="_blank" class="btn btn-primary btn-sm><i class="uil uil-file me-1"></i> Lihat File</a>
                                    @endif
                                @else
                                    
                                @endif
                            <hr class="my-8">
                        @endforeach
                    @endif
                    </div>
                </div>
                <!--/.tab-pane -->
                <div class="tab-pane fade" id="tab_list">
                    <div class="card">
                        <div class="job-list mb-10">
                            <a href="#" class="card mb-2 lift">
                                <div class="card-body p-5">
                                    <span class="row justify-content-between align-items-center">
                                        <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                            <span class="avatar bg-blue text-white w-9 h-9 fs-17 me-3"><i class="uil uil-comment-dots"></i> </span> Ahamd Reza </span>
                                        <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                            <i class="uil uil-clock me-1"></i> Senin, 7/11/2022 </span>
                                        <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                            <i class="uil uil-comment-alt-verify me-1"></i> Belum diverifikasi</span>
                                    </span>
                                    </span>
                                </div>
                            </a>
                        </div>
        
                        <div class="job-list mb-10">
                            <a href="#" class="card mb-2 lift">
                                <div class="card-body p-5">
                                    <span class="row justify-content-between align-items-center">
                                        <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                            <span class="avatar bg-green text-white w-9 h-9 fs-17 me-3"><i class="uil uil-comment-check"></i> </span> Ahamd Reza </span>
                                        <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                            <i class="uil uil-clock me-1"></i> Jumat, 3/11/2022 </span>
                                        <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                            <i class="uil uil-comment-alt-verify me-1"></i> Sudah diverifikasi</span>
                                    </span>
                                    </span>
                                </div>
                            </a>
                        </div>
        
                        <div class="job-list mb-10">
                            <a href="#" class="card mb-2 lift">
                                <div class="card-body p-5">
                                    <span class="row justify-content-between align-items-center">
                                        <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                            <span class="avatar bg-red text-white w-9 h-9 fs-17 me-3"><i class="uil uil-comment-exclamation"></i> </span> Ahamd Reza </span>
                                        <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                            <i class="uil uil-clock me-1"></i> Kamis, 2/11/2022 </span>
                                        <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                            <i class="uil uil-comment-alt-verify me-1"></i> Ditolak</span>
                                    </span>
                                    </span>
                                </div>
                            </a>
                        </div>
        
                    </div>
                </div>
                <!--/.tab-pane -->
            </div>
            <!-- /.tab-content -->
        </div>
    </div>
</section>
<!-- /section -->


@endsection

@section('script')
<script>
    function showModalLayanan(_this) {
        let url = $(_this).data("url");
        let nama_layanan = $(_this).data("nama_layanan");

        $('#nama_layanan').empty();
        $('#nama_layanan').append(nama_layanan);
        $('#modal_informasi_layanan').modal('show');
        $('#btn_into_service').attr("href", `${url}`)
        // console.log("link : "+url);
    }
</script>
@endsection