@extends('layouts.panel.app', ['title' => 'Data Dokumentasi'])

@section('content')
<section class="section">
    <div class="section-title">
        <h3>Dokumentasi</h3>
    </div>
    <p class="section-lead">
        Petunjuk penggunaan aplikasi Content Management System (CMS)
    </p>
    <div class="row">
        <div class="col-md-12">
            <!-- Intro -->
            <div class="card">
                <div class="card-header">
                    <h4>Pendahuluan</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse">
                    <div class="card-body">
                        Content Management System (CMS) adalah aplikasi atau software yang membantu penggunanya untuk mengatur, membuat, dan mengubah konten di website. Pengguna tidak harus ahli dalam bidang teknis dan membuat kodenya dari awal, karena sistem yang akan membantu pengguna mengelola websitenya.
                    </div>
                    <div class="card-footer">
                        Yuk kita mulai sekarang :)
                    </div>
                </div>
            </div>

            <!-- Create -->
            <div class="card">
                <div class="card-header">
                    <h4>Menambah Konten</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse1" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse1">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <a href="#" class="btn btn-success">Tambah</a>
                                &nbsp;
                                Tekan tombol tambah ini berfungsi untuk menambah konten baru
                            </div>
                            <div class="col-12">
                                <p>
                            </div>
                            <div class="col-12">
                                <form action="#" method="" enctype="multipart/form-data" class="needs-validation" novalidate="">
                                    @csrf
                                    <div class="form-group">
                                        <label class="font-weight-bold">JUDUL</label>
                                        <input type="text" class="form-control" name="title" value="" placeholder="Masukkan judul" required="">
                                        <!-- error message untuk name -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan judul kolom
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">POSISI</label>
                                        <select class="form-control select2" name="position" value="" placeholder="Pilih posisi" required="">
                                            <option value="">Pilih Posisi</option>
                                            <option value="test">KETUA</option>
                                        </select><!-- error message untuk route -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Pilih posisi
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">GAMBAR</label>
                                        <div class="md-2">
                                            <img id="imgPreview" src="{{asset('assets/images/default-slider.png')}}" alt="Gambar" style="width: 272px; height: 153px" />
                                        </div>
                                        <div class="md-2">
                                            <p>
                                        </div>
                                        <input type="file" class="form-control" id="images" name="images" value="" placeholder="Masukkan gambar" required="">
                                        <!-- error message untuk image -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan gambar
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" style="width:100px" class="btn btn-primary btn-action" data-toggle="tooltip" title="Simpan"><i class="fas fa-save"></i></button>
                                        &nbsp;
                                        Tekan tombol simpan ini berfungsi untuk mengirim data konten ke server
                                    </div>
                                    <div class="form-group">
                                        <button type="reset" onclick="myReset()" class="btn btn-warning btn-action" data-toggle="tooltip" title="Batal"><i class="fas fa-redo-alt"></i></button>
                                        &nbsp;
                                        Tekan tombol batal ini berfungsi untuk mereset data konten pada kolom
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Edit -->
            <div class="card">
                <div class="card-header">
                    <h4>Merubah Konten</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse2" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse2">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <a href="#" class="btn btn-primary btn-action" data-toggle="tooltip" title="Ubah"><i class="fas fa-pencil-alt"></i></a>
                                &nbsp;
                                Tekan tombol ubah ini berfungsi untuk merubah konten yang sudah ada
                            </div>
                            <div class="col-12">
                                <p>
                            </div>
                            <div class="col-12">
                                <form action="#" method="" enctype="multipart/form-data" class="needs-validation" novalidate="">
                                    @csrf
                                    <div class="form-group">
                                        <label class="font-weight-bold">JUDUL</label>
                                        <input type="text" class="form-control" name="title" value="Seminar Ilmiah #Part1" placeholder="Masukkan judul" required="">
                                        <!-- error message untuk name -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan judul kolom
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">POSISI</label>
                                        <select class="form-control select2" name="position" value="KETUA" placeholder="Pilih posisi" required="">
                                            <option value="">Pilih Posisi</option>
                                            <option value="KETUA">KETUA</option>
                                        </select><!-- error message untuk route -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Pilih posisi
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">GAMBAR</label>
                                        <div class="md-2">
                                            <img id="imgPreview" src="{{asset('assets/images/default-slider.png')}}" alt="Gambar" style="width: 272px; height: 153px" />
                                        </div>
                                        <div class="md-2">
                                            <p>
                                        </div>
                                        <input type="file" class="form-control" id="images" name="images" value="{{asset('assets/images/default-slider.png')}}" placeholder="Masukkan gambar" required="">
                                        <!-- error message untuk image -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan gambar
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" style="width:100px" class="btn btn-primary btn-action" data-toggle="tooltip" title="Simpan"><i class="fas fa-save"></i></button>
                                        &nbsp;
                                        Tekan tombol simpan ini berfungsi untuk mengirim data konten ke server
                                    </div>
                                    <div class="form-group">
                                        <button type="reset" onclick="myReset()" class="btn btn-warning btn-action" data-toggle="tooltip" title="Batal"><i class="fas fa-redo-alt"></i></button>
                                        &nbsp;
                                        Tekan tombol batal ini berfungsi untuk mereset data konten pada kolom
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Delete -->
            <div class="card">
                <div class="card-header">
                    <h4>Menghapus Konten</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse3" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <form onsubmit="return confirm('Apakah Anda yakin ? \nTindakan ini tidak bisa dibatalkan. Apakah Anda ingin melanjutkan ?');" action="#" method="">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-dark" data-toggle="tooltip" title="Hapus"><i class="fas fa-trash"></i></button>
                                    &nbsp;
                                    Tekan tombol hapus ini berfungsi untuk menghapus konten yang sudah ada
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Editor -->
            <div class="card">
                <div class="card-header">
                    <h4>Jenis Editor Konten</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse4" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="font-weight-bold">DESKRIPSI</label>
                                    <textarea class="summernote-simple form-control" form="fmteam" name="description" rows="5" placeholder="Masukkan deskripsi" required=""></textarea>
                                    <!-- error message untuk desc -->
                                    <div class="invalid-feedback alert alert-danger mt-2">
                                        Masukan deskripsi
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="font-weight-bold">DESKRIPSI</label>
                                    <textarea class="summernote form-control" form="fmteam" name="description" rows="5" placeholder="Masukkan deskripsi" required=""></textarea>
                                    <!-- error message untuk desc -->
                                    <div class="invalid-feedback alert alert-danger mt-2">
                                        Masukan deskripsi
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Alert -->
            <div class="card">
                <div class="card-header">
                    <h4>Pesan Informasi</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse5" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse5">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <div class="alert alert-success alert-dismissible" role="alert">
                                        <button type="button" class="close" data-dismiss="alert">
                                            <i class="fa fa-times"></i>
                                        </button>
                                        <strong>Berhasil !</strong> Data berhasil disimpan !
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="alert alert-danger alert-dismissible" role="alert">
                                        <button type="button" class="close" data-dismiss="alert">
                                            <i class="fa fa-times"></i>
                                        </button>
                                        <strong>Gagal !</strong>
                                        <ul>
                                            <li>Data gagal disimpan !</li>
                                            <li>Kolom judul minimal 5 karakter !</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Menu -->
            <div class="card">
                <div class="card-header">
                    <h4>Setup Menu</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse6" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse6">
                    <div class="card-body">
                        <div class="gallery gallery-fw" data-item-height="100">
                            <div class="gallery-item" data-image="{{asset('assets/images/doc-menu.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-menu.png')}}" title="Image 1" style="height: 100px; background-image: url(assets/images/doc-menu.png);"></div>
                        </div>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active menu-header" aria-current="page">PENGATURAN</li>
                            </ol>
                        </nav>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item menu-header"><a href="#"> PENGATURAN</a></li>
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-wrench"></i> Setup</a></li>
                                <li class="breadcrumb-item active" aria-current="page"> Menu Website</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Label -->
            <div class="card">
                <div class="card-header">
                    <h4>Setup Label</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse7" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse7">
                    <div class="card-body">
                        <div class="gallery gallery-fw" data-item-height="300">
                            <div class="gallery-item" data-image="{{asset('assets/images/doc-label.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-label.png')}}" title="Image 1" style="height: 300px; background-image: url(assets/images/doc-label.png);"></div>
                        </div>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active menu-header" aria-current="page">PENGATURAN</li>
                            </ol>
                        </nav>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item menu-header"><a href="#"> PENGATURAN</a></li>
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-wrench"></i> Setup</a></li>
                                <li class="breadcrumb-item active" aria-current="page"> Label Section</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Master Data -->
            <div class="card">
                <div class="card-header">
                    <h4>Master Data</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse8" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse8">
                    <div class="card-body">
                        <div class="col">
                            <div class="form-group">
                                <label class="font-weight-bold">KATEGORI</label>
                                <select class="form-control select2" name="category" value="" placeholder="Pilih kategori" required="">
                                    <option value="">Pilih Kategori</option>
                                    <option value="test1">Ilmiah</option>
                                    <option value="test2">Baksos</option>
                                    <option value="test3">Seminar</option>
                                </select><!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih kategori
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-server"></i> Data</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Kategori Kegiatan</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="form-group">
                                <label class="font-weight-bold">POSISI</label>
                                <select class="form-control select2" name="position" value="" placeholder="Pilih posisi" required="">
                                    <option value="">Pilih Posisi</option>
                                    <option value="test1">KETUA</option>
                                    <option value="test2">KETUA UMUM</option>
                                    <option value="test3">WAKIL</option>
                                </select><!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih posisi
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-server"></i> Data</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Posisi Struktur</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

            <!-- Master Menu -->
            <div class="card">
                <div class="card-header">
                    <h4>Master Menu</h4>
                    <div class="card-header-action">
                        <a data-collapse="#mycard-collapse9" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
                    </div>
                </div>
                <div class="collapse" id="mycard-collapse9">
                    <div class="card-body">
                        <div class="col">
                            <div class="section-title">
                                <h3>Beranda</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="300">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-slider.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-slider.png')}}" title="Image 1" style="height: 300px; background-image: url(assets/images/doc-slider.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Beranda</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Sejarah IDI</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="400">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-history.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-history.png')}}" title="Image 1" style="height: 400px; background-image: url(assets/images/doc-history.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Sejarah IDI</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Muktamar IDI</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="300">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-muktamar.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-muktamar.png')}}" title="Image 1" style="height: 300px; background-image: url(assets/images/doc-muktamar.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Muktamar IDI</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Tentang Kami</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="200">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-about.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-about.png')}}" title="Image 1" style="height: 200px; background-image: url(assets/images/doc-about.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Tentang Kami</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Struktur Organisasi</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="350">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-team.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-team.png')}}" title="Image 1" style="height: 350px; background-image: url(assets/images/doc-team.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Struktur Organisasi</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Berita</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="500">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-event.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-event.png')}}" title="Image 1" style="height: 500px; background-image: url(assets/images/doc-event.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Berita</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Kegiatan</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="500">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-news.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-news.png')}}" title="Image 1" style="height: 500px; background-image: url(assets/images/doc-news.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Kegiatan</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Galeri</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="500">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-gallery.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-gallery.png')}}" title="Image 1" style="height: 500px; background-image: url(assets/images/doc-gallery.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Galeri</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="col">
                            <div class="section-title">
                                <h3>Prosedur</h3>
                            </div>
                            <div class="form-group">
                                <div class="gallery gallery-fw" data-item-height="250">
                                    <div class="gallery-item" data-image="{{asset('assets/images/doc-procedure.png')}}" data-title="Image 1" href="{{asset('assets/images/doc-procedure.png')}}" title="Image 1" style="height: 250px; background-image: url(assets/images/doc-procedure.png);"></div>
                                </div>
                            </div>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active menu-header" aria-current="page">MASTER</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item menu-header"><a href="#"> MASTER</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-columns"></i> Menu</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Prosedur</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="card-footer">
                        Selamat mencoba :)
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>
@endsection