@extends('layouts.layout')
@section('title', 'Website Resmi Pemerintah Desa '. $desa->nama_desa .' - Panduan')
<link rel="stylesheet" href="{{ asset("css/style.css") }}">
@section('content')
<section>
    <div class="row my-5 mx-4">
        <div class="col-12 col-lg-7 order-2 order-lg-1" style="display: grid; align-content: center; align-items: center;">
            <h1 class="text-white" style="
                font-size: 52px; font-weight: 700;
            ">Panduan Surat</h1>
            <h4 class="text-white" style="
                font-size: 20px; font-weight: 400;
                margin-top: -10px;
            ">Tata cara menggunakan aplikasi surat klipaa</h4>
        </div>
        <div class="col-12 col-lg-5 order-1 order-lg-2 mt--3">
            <img src="{{ asset('img/kelola-surat_img.svg') }}" class="hero-img" alt="" style="
                max-width: 680px; max-height: 500px;
                background-position: center; background-size: cover;
            ">
        </div>
    </div>
</section>


{{-- untuk admin desa --}}
@if (Auth::user()->level == 2 || Auth::user()->level == 3)
    <section class="py-4">
        <h1 class="text-white pb-3" style="font-weight: 700; font-size: 35px;">Cara membuat Template Surat</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Kelola Surat'</li>
                    <li >- Tekan Card 'Buat Surat'</li>
                    <li >- Isi Input yang sudah disediakan</li>
                    <li >- Setelah selesai, tekan button 'Simpan'</li>
                    <li >- Surat akan muncul di halaman 'Beranda', 'Layanan Surat' dan 'Kelola Surat'</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/buat-temp-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>

    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara mengedit Template Surat</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Kelola Surat'</li>
                    <li >- Scroll kebawah hingga sampai pada bagian 'Layanan Surat'</li>
                    <li >- Pilih Suratnya dan tekan tombol 'edit'</li>
                    <li >- Edit isian surat</li>
                    <li >- setelah selesai tekan 'Simpan' dan tekan 'Kembali'</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/edit-temp-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>

    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara menyetujui Surat User</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Kelola Surat'</li>
                    <li >- Scroll kebawah hingga sampai pada bagian 'Layanan Surat'</li>
                    <li >- Pilih dan tekan Suratnya</li>
                    <li >- Pada Bagian tabel, tekan button dengan icon <i class="fas fa-thumbs-up mx-1 d-inline"></i>untuk menyetujui surat</li>
                    <li >- setelah selesai silahkan lihat di halaman 'Info Surat Saya' untuk melihat status surat</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/setuju-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>

    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara menambahkan Nomor Surat</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Kelola Surat'</li>
                    <li >- Scroll kebawah hingga sampai pada bagian 'Layanan Surat'</li>
                    <li >- Pilih dan tekan Suratnya</li>
                    <li >- Pada Bagian tabel, tekan button dengan icon <i class="fas fa-edit font-weight-400 mx-1 d-inline" style="font-size: 20px;"></i>untuk mengedit surat</li>
                    <li >- Pada bagian atas ada Input form 'Nomor Surat'</li>
                    <li >- Setelah selesai, tekan button 'Simpan'</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/nomer-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>

    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara menambahkan dan merubah Tanda Tangan</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Kelola Surat'</li>
                    <li >- Tekan Card 'Tanda Tangan Kepala Desa'</li>
                    <li >- Pada Bagian Card, tekan button 'Choose File' lalu pilih photo tanda tangan kepala desa</li>
                    <li >- setelah itu tekan button 'Simpan'</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/ttd.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>
@endif

{{-- untuk user biasa --}}
@if (Auth::user()->level == 1)
    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara membuat Surat</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Beranda' dan lihat pada bagian 'Layanan Surat', tekan surat yang ingin dibuat</li>
                    <li >- Untuk melihat layanan surat yang lebih lengkap silahkan tekan button 'Layanan Lainnya' atau ke halaman 'Layanan Surat'</li>
                    <li >- Isi Input yang sudah disediakan</li>
                    <li >- Setelah selesai, Tekan Button 'Simpan'</li>
                    <li >- Surat yang akan di cetak akan muncul di halaman 'Info Surat Saya'</li>
                    <li >- Namun sebelum bisa dicetak, silahkan tunggu persetujuan dari admin desa</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/buat-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>

    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara mengedit surat</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >- Masuk ke halaman 'Info Surat Saya'</li>
                    <li >- Pada bagian tabel tekan 'Edit'</li>
                    <li >- Isi Input yang sudah disediakan</li>
                    <li >- Setelah selesai, tekan button 'Simpan'</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/edit-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>

    <section class="py-4">
        <h1 class="text-white pb-3 py-4" style="font-weight: 700; font-size: 35px;">Cara mencetak Surat</h1>
        <div class="row">
            <div class="col-lg-5">
                <ul class="text-white" style="font-size: 20px; font-weight: 400; list-style: none; padding-left: 1rem; text-indent: -1rem;">
                    <li >Syarat untuk bisa mencetak surat dengan menunggu persetujuan dari admin desa</li>
                    <li >- Masuk ke halaman 'Info Surat Saya'</li>
                    <li >- Pada bagian tabel tekan 'Cetak'</li>
                    <li >- Muncul halaman baru, tunggu 5-30 detik</li>
                    <li >- Setelah muncul, tekan tombol print atau dengan menggunakan kombinasi key dengan menekan "Ctrl+P"</li>
                    <li >- Lalu tekan button 'Simpan'/'Save'</li>
                </ul>
            </div>
            <div class="col-lg-7">
                <video controls muted loop style="width: 100%;">
                    <source src="{{ asset('img/Panduan/cetak-surat.mp4') }}" type="video/mp4">
                </video>
            </div>
        </div>
    </section>
@endif
@endsection