@extends('layouts.mobile')

@section('title', 'Home')

@section('main')

<style>
    .surat{
        border-radius: 20px; 
        padding: 20px;
    }
</style>

	<!-- navbar -->
	<div class="navbar">
		<div class="left">
			<a href="#" class="link link-back"><i class="icon ion-ios-arrow-back"></i></a>
		</div>
		<div class="title">
			Daftar Surat
		</div>
		<div class="right">
			
		</div>
	</div>
	<!-- end navbar -->

<!-- pages wrapper -->
<div class="pages-wrapper">

    <!-- separator -->
    <div class="separator-medium"></div>
    <!-- end separator -->
    
    <!-- gallery -->
    <div class="gallery">
        <div class="container">
            <div class="gallery-action">
                <div class="row">
                    <div class="col-6">
                        <div class="content">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="content">
                            <ul class="nav nav-fill nav-tab-icon" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="column-tab" data-toggle="tab" href="#column" role="tab" aria-controls="column" aria-selected="true"><i class="icon ion-ios-keypad"></i></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="fullwidth-tab" data-toggle="tab" href="#fullwidth" role="tab" aria-controls="fullwidth" aria-selected="false"><i class="icon ion-ios-square"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- separator -->
        <div class="separator-medium"></div>
        <!-- end separator -->

        <div class="tab-content">
            <div class="tab-pane fade show active" id="column" role="tabpanel" aria-labelledby="column-tab">
                <div class="container">
                    <div class="row">
                        <div class="col-4" >
                            <a href="{{ $id }}/sku">
                                <img style="background-color: #fcea9e;" class="surat" src="{{ asset('mobile/images/surat/sku.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Keterangan Usaha</p>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ $id }}/sku">
                                <img class="surat" style="background-color: #90a2d0" src="{{ asset('mobile/images/surat/skck.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">SKCK</p>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ $id }}/sku">
                                <img class="surat" style="background-color: #f96062;" src="{{ asset('mobile/images/surat/daftar-ktp.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Pendaftaran KTP</p>
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4" >
                            <a href="{{ $id }}/sku">
                                <img style="background-color: #fa9136;" class="surat" src="{{ asset('mobile/images/surat/kehilangan.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Keterangan Hilang</p>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ $id }}/sku">
                                <img class="surat" style="background-color: #2ab1aa" src="{{ asset('mobile/images/surat/domisili-tinggal.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Domisili Tinggal</p>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ $id }}/sku">
                                <img class="surat" style="background-color: #92959b;" src="{{ asset('mobile/images/surat/domisili-usaha.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Domisili Usaha</p>
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4" >
                            <a href="{{ $id }}/sku">
                                <img style="background-color: #2b507c;" class="surat" src="{{ asset('mobile/images/surat/sktm.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">SKTM</p>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ $id }}/sku">
                                <img class="surat" style="background-color: #cbac7f" src="{{ asset('mobile/images/surat/daftar-nikah.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Daftar Nikah</p>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ $id }}/sku">
                                <img class="surat" style="background-color: #934447;" src="{{ asset('mobile/images/surat/domisili-sekolah.png') }}" alt="image-demo">
                                <p align="center" style="font-size: 13px; padding: 5px;">Domisili Sekolah</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="fullwidth" role="tabpanel" aria-labelledby="fullwidth-tab">
                <div class="container">
                    
                    <div class="row">
                        <div class="col-12">
                            <img src="images/square1.jpg" alt="image-demo">
                            <div class="img-caption">
                                <div class="gallery-category">
                                    <span>Nature</span>
                                </div>
                                <h5 class="mb-1">Banana Clean Pattern</h5>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <img src="images/square1.jpg" alt="image-demo">
                            <div class="img-caption">
                                <div class="gallery-category">
                                    <span>Nature</span>
                                </div>
                                <h5 class="mb-1">Banana Clean Pattern</h5>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <img src="images/square1.jpg" alt="image-demo">
                            <div class="img-caption">
                                <div class="gallery-category">
                                    <span>Nature</span>
                                </div>
                                <h5 class="mb-1">Banana Clean Pattern</h5>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <img src="images/square1.jpg" alt="image-demo">
                            <div class="img-caption">
                                <div class="gallery-category">
                                    <span>Nature</span>
                                </div>
                                <h5 class="mb-1">Banana Clean Pattern</h5>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end gallery -->

    <div id="succesModal" class="modal fade succes-modal">
        <div class="modal-dialog modal-bottom">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-icon-title">
                        <i class="icon ion-ios-checkmark-circle"></i>
                        <h5>Sukses!</h5>
                        <p class="text-small">Surat berhasil dibuat, silahkan ke kantor desa untuk mengambil surat</p>
                    </div>
                    <div class="button-default">
                        <button class="button" data-dismiss="modal" aria-label="Close">Konfirmasi</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- end pages wrapper -->

@endsection

@if (session('success'))
<script type="text/javascript">
    window.onload = function () {
        OpenBootstrapPopup();
    };
    function OpenBootstrapPopup() {
        $("#succesModal").modal('show');
    }
</script>
@endif

@include('components.mobile-navbar')