@extends('layouts.administrator.master')

@section('title')
    Tentang Kami
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            var tab = '{{ session('tab') }}';
            $('#tab' + tab).tab('show');
            var side = '{{ session('side') }}';
            $('#side' + side).tab('show');
        });
    </script>
@endpush

@section('content')
    <div class="nk-block-head">
        <div class="nk-block-head-content">
            <div class="nk-block-between-md g-4">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">
                        Tentang Kami
                    </h3>
                    <div class="nk-block-des">
                        <p>Kamu mempunyai akses untuk mengelola halaman tentang kami</p>
                    </div>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('admin.landingPage') }}" class="btn btn-primary btn-sm"><em
                            class="icon ni ni-arrow-left"></em>
                        Kembali</a>
                </div>
            </div>
        </div>
    </div><!-- .nk-block-head -->
    <div class="nk-block">
        <div class="card card-preview">
            <div class="card-inner">
                <ul class="nav nav-tabs mt-n3" role="tablist">
                    <li class="nav-item" role="presentation"><a id="tab1" class="nav-link active" data-bs-toggle="tab"
                            href="#profilOrganisasi" aria-selected="true" role="tab"></em><span>Profil
                                Organisasi</span></a>
                    </li>
                    <li class="nav-item" role="presentation"><a id="tab2" class="nav-link" data-bs-toggle="tab"
                            href="#history" aria-selected="false" tabindex="-1" role="tab"><span>Sejarah
                                Organisasi</span></a></li>
                    <li class="nav-item" role="presentation"><a id="tab3" class="nav-link" data-bs-toggle="tab"
                            href="#vision" aria-selected="false" tabindex="-1" role="tab"><span>Visi
                                Misi dan Tata Nilai</span></a></li>
                    <li class="nav-item" role="presentation"><a id="tab4" class="nav-link" data-bs-toggle="tab"
                            href="#management" aria-selected="false" tabindex="-1"
                            role="tab"><span>Manajemen</span></a></li>
                    <li class="nav-item" role="presentation"><a id="tab5" class="nav-link" data-bs-toggle="tab"
                            href="#map" aria-selected="false" tabindex="-1" role="tab"><span>Peta
                                Persebaran</span></a></li>
                    <li class="nav-item" role="presentation"><a id="tab6" class="nav-link" data-bs-toggle="tab"
                            href="#legal" aria-selected="false" tabindex="-1" role="tab"><span>Legalitas dan
                                Organisasi</span></a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="profilOrganisasi" role="tabpanel">
                        <div class="row g-gs">
                            <div class="col-md-4">
                                <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                                    <li><a class="active" data-bs-toggle="tab" href="#tabAbout" aria-selected="true"
                                            role="tab">Profil Organisasi</a></li>
                                    <li><a data-bs-toggle="tab" href="#tabAboutSlider" aria-selected="false" role="tab"
                                            class="" tabindex="-1">Slider</a></li>
                                    <li><a data-bs-toggle="tab" href="#tabAboutImpact" aria-selected="false" role="tab"
                                            class="" tabindex="-1">Dampak</a></li>

                                </ul>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabAbout" role="tabpanel">
                                        <form action="{{ route('admin.services.landingPage.about') }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Gambar <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutImage->value)
                                                        <img id="logoOutput"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutImage->value) }}"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit: cover">
                                                    @else
                                                        <img id="logoOutput"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit: cover">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutput').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutImage">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutTitle" value="{{ $aboutTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutDesc" placeholder="Deskripsi">{{ $aboutDesc->value }}</textarea>
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Deskripsi</label>
                                                </div>
                                            </div>

                                            <br>
                                            <br>
                                            <div class=" text-center border border-2 ">
                                                <h4 class="p-2">Tujuan Organisasi</h4>
                                            </div>

                                            <br>
                                            <br>
                                            <div class="form-group">
                                                <label class="form-label mt-10" for="customFileLabel">Gambar Tujuan
                                                    Organisasi
                                                    <span class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutPurposeImage->value)
                                                        <img id="logoOutput2"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutPurposeImage->value) }}"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit: cover">
                                                    @else
                                                        <img id="logoOutput2"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit: cover">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutput2').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutPurposeImage">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutPurposeTitle" value="{{ $aboutPurposeTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="card card-bordered">
                                                    <textarea name="aboutPurposeDesc" class="form-control" placeholder="Deskripsi">{{ $aboutPurposeDesc->value }}</textarea>
                                                </div>
                                            </div>

                                            <br>
                                            <br>
                                            <div class=" text-center border border-2 ">
                                                <h4 class="p-2">Dampak</h4>
                                            </div>

                                            <br>
                                            <br>
                                            <div class="form-group">
                                                <label class="form-label mt-10" for="customFileLabel">Gambar Dampak
                                                    Pertapindo
                                                    <span class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutImpactImage->value)
                                                        <img id="logoOutput3"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutImpactImage->value) }}"
                                                            alt="" width="300" height="300">
                                                    @else
                                                        <img id="logoOutput3"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="300" height="300">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutput3').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutImpactImage">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutImpactTitle" value="{{ $aboutImpactTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabAboutSlider" role="tabpanel">
                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutSlider()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-slider"
                                                class="btn btn-primary">Buat slider</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutSlider">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Deskripsi</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutSlider', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutSlider_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutSlider.listAboutSlider') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutSlider');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutSlider');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'image'
                                                    },
                                                    {
                                                        data: 'title'
                                                    },
                                                    {
                                                        data: 'short_description'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutSlider() {
                                                $('#titleAboutSlider').html('Buat slider');
                                                $("#btnCreateAboutSlider").show();
                                                $("#btnUpdateAboutSlider").hide();

                                                var image = "{{ asset('') }}landing/img/noimage.png";
                                                $("#logoOutputAboutSlider").attr('src', image);
                                                $("#customFileAboutSlider").val("");

                                                $("#sliderTitle").val('');
                                                $('.form-group #sliderTitle').closest('.form-group').removeClass('focused');

                                                $("#sliderdescription").val('');
                                                $('.form-group #sliderdescription').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush


                                    <div class="tab-pane" id="tabAboutImpact" role="tabpanel">
                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutImpact()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-impact"
                                                class="btn btn-primary">Buat Baru</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutImpact">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutImpact', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutImpact_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutImpact.listAboutImpact') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutImpact');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutImpact');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'title'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutImpact() {
                                                $('#titleAboutImpact').html('Buat Data');
                                                $("#btnCreateAboutImpact").show();
                                                $("#btnUpdateAboutImpact").hide();
                                                $("#aboutImpactTitle").val("");
                                                $('.form-group #aboutImpactTitle').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="history" role="tabpanel">
                        <div class="row g-gs">
                            <div class="col-md-4">
                                <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                                    <li><a class="active" data-bs-toggle="tab" href="#tabAboutHistory"
                                            aria-selected="true" role="tab">Sejarah Organisasi</a></li>
                                    <li><a data-bs-toggle="tab" href="#tabAboutHistoryData" aria-selected="false"
                                            role="tab" class="" tabindex="-1">Data Sejarah</a></li>

                                </ul>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabAboutHistory" role="tabpanel">
                                        <form action="{{ route('admin.services.landingPage.about.history') }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Gambar <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutHistoryImage->value)
                                                        <img id="logoOutputAboutHistory"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutHistoryImage->value) }}"
                                                            alt="" width="1920" height="400">
                                                    @else
                                                        <img id="logoOutputAboutHistory"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="1920" height="400">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputAboutHistory').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutHistoryImage">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutHistoryTitle" value="{{ $aboutHistoryTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutHistoryDesc" placeholder="Deskripsi">{{ $aboutHistoryDesc->value }}</textarea>
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Deskripsi</label>
                                                </div>
                                            </div>


                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabAboutHistoryData" role="tabpanel">

                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutHistoryData()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-history"
                                                class="btn btn-primary">Buat Sejarah</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutHistoryData">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Deskripsi</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Tanggal</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutHistoryData', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutHistoryData_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutHistoryData.listAboutHistoryData') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutHistoryData');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutHistoryData');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'image'
                                                    },
                                                    {
                                                        data: 'title'
                                                    },
                                                    {
                                                        data: 'description'
                                                    },
                                                    {
                                                        data: 'date'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutHistoryData() {
                                                $('#titleAboutHistoryData').html('Buat History Data');
                                                $("#btnCreateAboutHistoryData").show();
                                                $("#btnUpdateAboutHistoryData").hide();

                                                var image = "{{ asset('') }}landing/img/noimage.png";
                                                $("#logoOutputAboutHistoryData").attr('src', image);
                                                $("#customFileAboutHistoryData").val("");

                                                $("#aboutHistoryDataTitle").val("");
                                                $('.form-group #aboutHistoryDataTitle').closest('.form-group').removeClass('focused');

                                                $("#aboutHistoryDataDescription").val("");
                                                $('.form-group #aboutHistoryDataDescription').closest('.form-group').removeClass('focused');

                                                $("#aboutHistoryDataDate").val("");
                                                $('.form-group #aboutHistoryDataDate').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="vision" role="tabpanel">
                        <div class="row g-gs">
                            <div class="col-md-4">
                                <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                                    <li><a id="side1" class="active" data-bs-toggle="tab" href="#tabAboutVision"
                                            aria-selected="true" role="tab">Visi Misi dan Tata Nilai</a></li>
                                    <li><a id="side2" class="" data-bs-toggle="tab" href="#tabAboutVisionData"
                                            aria-selected="true" role="tab">Data Visi & Misi</a></li>
                                    <li><a id="side3" class="" data-bs-toggle="tab" href="#tabAboutValue"
                                            aria-selected="true" role="tab">Data Tata Nilai</a></li>
                                    <li><a id="side4" class="" data-bs-toggle="tab"
                                            href="#tabAboutMasterValue" aria-selected="true" role="tab">Master Tata
                                            Nilai</a></li>
                                </ul>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabAboutVision" role="tabpanel">
                                        <form action="{{ route('admin.services.landingPage.about.vision') }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Gambar <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutVisionImage->value)
                                                        <img id="logoOutputAboutVision"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutVisionImage->value) }}"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit:cover">
                                                    @else
                                                        <img id="logoOutputAboutVision"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit:cover">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputAboutVision').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutVisionImage">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutVisionTitle" value="{{ $aboutVisionTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutVisionDesc" placeholder="Deskripsi">{{ $aboutVisionDesc->value }}</textarea>
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Deskripsi</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Banner <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutVisionImageHero->value)
                                                        <img id="logoOutputAboutVision2"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutVisionImageHero->value) }}"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit: cover">
                                                    @else
                                                        <img id="logoOutputAboutVision2"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="1920" height="400"
                                                            style="object-fit: cover">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputAboutVision2').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutVisionImageHero">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabAboutVisionData" role="tabpanel">
                                        <div class="pb-3">
                                            <h4>Data Visi</h4>
                                        </div>
                                        <form action="{{ route('admin.services.landingPage.about.visionMission') }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutVisTitle" value="{{ $aboutVisTitle->value }}">
                                                    <label class="form-label-outlined" for="outlined-default">Judul
                                                        Visi</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutVisDesc" placeholder="Deskripsi">{{ $aboutVisDesc->value }}</textarea>
                                                    <label class="form-label-outlined" for="outlined-default">Deskripsi
                                                        Visi</label>
                                                </div>
                                            </div>
                                            <div class="pb-3">
                                                <h4>Data Misi</h4>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutMisTitle" value="{{ $aboutMisTitle->value }}">
                                                    <label class="form-label-outlined" for="outlined-default">Judul
                                                        Misi</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutMisDesc" placeholder="Deskripsi">{{ $aboutMisDesc->value }}</textarea>
                                                    <label class="form-label-outlined" for="outlined-default">Deskripsi
                                                        Misi</label>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabAboutValue" role="tabpanel">
                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutValue()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-about-value"
                                                class="btn btn-primary">Buat Tata
                                                Nilai</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutValue">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Deskripsi</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="tabAboutMasterValue" role="tabpanel">
                                        <div class="pb-3">
                                            <h4>Master Tata Nilai</h4>
                                        </div>
                                        <form action="{{ route('admin.services.landingPage.about.value') }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutValueTitle" value="{{ $aboutValueTitle->value }}">
                                                    <label class="form-label-outlined" for="outlined-default">Judul
                                                        Tata Nilai</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutValueDesc" placeholder="Deskripsi">{{ $aboutValueDesc->value }}</textarea>
                                                    <label class="form-label-outlined" for="outlined-default">Deskripsi
                                                        Tata Nilai</label>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>

                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutValue', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutValue_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutValue.listAboutValue') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutValue');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutValue');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'title'
                                                    },
                                                    {
                                                        data: 'description'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutValue() {
                                                $('#titleAboutValue').html('Buat Value Data');
                                                $("#btnCreateAboutValue").show();
                                                $("#btnUpdateAboutValue").hide();
                                                $("#aboutValueTitle").val('');
                                                $('.form-group #aboutValueTitle').closest('.form-group').removeClass('focused');
                                                $("#aboutValueDescription").val('');
                                                $('.form-group #aboutValueDescription').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="management" role="tabpanel">
                        <div class="row g-gs">
                            <div class="col-md-4">
                                <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                                    <li><a class="active" data-bs-toggle="tab" href="#tabAboutManagement"
                                            aria-selected="true" role="tab">Management</a></li>
                                    <li><a data-bs-toggle="tab" href="#tabLeader" aria-selected="false" role="tab"
                                            class="" tabindex="-1">Pimpinan Organisasi</a></li>
                                </ul>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabAboutManagement" role="tabpanel">
                                        <form action="{{ route('admin.services.landingPage.about.management') }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Gambar <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutManagementImage->value)
                                                        <img id="logoOutputaboutManagement"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutManagementImage->value) }}"
                                                            alt="" width="400" height="300"
                                                            style="object-fit: cover">
                                                    @else
                                                        <img id="logoOutputaboutManagement"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="400" height="300"
                                                            style="object-fit: cover">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputaboutManagement').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutManagementImage">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutManagementTitle"
                                                        value="{{ $aboutManagementTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutManagementDesc"
                                                        placeholder="Deskripsi">{{ $aboutManagementDesc->value }}</textarea>
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Deskripsi</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Struktur Organisasi <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutManagementStructure->value)
                                                        <img id="logoOutputStructure"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutManagementStructure->value) }}"
                                                            alt="" width="400" height="300"
                                                            style="object-fit: cover">
                                                    @else
                                                        <img id="logoOutputStructure"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="400" height="300"
                                                            style="object-fit: cover">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputStructure').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutManagementStructure">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabLeader" role="tabpanel">
                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutManagementTeam()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-management"
                                                class="btn btn-primary">Buat Tim</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutManagementTeam">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Nama</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Jabatan</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Kategori</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutManagementTeam', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutManagementTeam_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutManagementTeam.listAboutManagementTeam') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutManagementTeam');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutManagementTeam');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'image'
                                                    },
                                                    {
                                                        data: 'name'
                                                    },
                                                    {
                                                        data: 'position'
                                                    },
                                                    {
                                                        data: 'category'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutManagementTeam() {
                                                $('#titleAboutManagementTeam').html('Buat Management Team');
                                                $("#btnCreateAboutManagementTeam").show();
                                                $("#btnUpdateAboutManagementTeam").hide();

                                                var image = "{{ asset('') }}landing/img/noimage.png";
                                                $("#logoOutputAboutManagementTeam").attr('src', image);
                                                $('#customFileAboutManagementTeam').val('');

                                                $("#aboutManagementTeamName").val('');
                                                $('.form-group #aboutManagementTeamName').closest('.form-group').removeClass('focused');

                                                $("#aboutManagementTeamPosition").val('');
                                                $('.form-group #aboutManagementTeamPosition').closest('.form-group').removeClass('focused');

                                                $("#aboutManagementTeamCategory").val('');
                                                $('.form-group #aboutManagementTeamCategory').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="map" role="tabpanel">
                        <div class="row g-gs">
                            <div class="col-md-4">
                                <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                                    <li><a class="active" data-bs-toggle="tab" href="#tabMap-" aria-selected="true"
                                            role="tab">Peta Persebaran</a></li>
                                    <li><a data-bs-toggle="tab" href="#tabMap-data" aria-selected="true"
                                            role="tab">Data Peta</a></li>
                                </ul>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabMap-" role="tabpanel">
                                        <form action="{{ route('admin.services.landingPage.about.map') }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Gambar <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutMapImage->value)
                                                        <img id="logoOutputAboutMap"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutMapImage->value) }}"
                                                            alt="" width="300" height="300">
                                                    @else
                                                        <img id="logoOutputAboutMap"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="300" height="300">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputAboutMap').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutMapImage">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutMapTitle" value="{{ $aboutMapTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutMapDesc" placeholder="Deskripsi">{{ $aboutMapDesc->value }}</textarea>
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Deskripsi</label>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabMap-data" role="tabpanel">

                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutMapData()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-map"
                                                class="btn btn-primary">Buat Peta</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutMapData">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutMapData', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutMapData_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutMapData.listAboutMapData') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutMapData');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutMapData');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'image'
                                                    },
                                                    {
                                                        data: 'title'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutMapData() {
                                                $('#titleAboutMapData').html('Buat Peta');
                                                $("#btnCreateAboutMapData").show();
                                                $("#btnUpdateAboutMapData").hide();

                                                var image = "{{ asset('') }}landing/img/noimage.png";
                                                $("#logoOutputAboutMapData").attr('src', image);
                                                $("#customFileAboutMapData").val("");

                                                $("#aboutMapDataTitle").val("");
                                                $('.form-group #aboutMapDataTitle').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="legal" role="tabpanel">
                        <div class="row g-gs">
                            <div class="col-md-4">
                                <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                                    <li><a class="active" data-bs-toggle="tab" href="#tabLegal-" aria-selected="true"
                                            role="tab">Legalitas dan Organisasi</a></li>
                                    <li><a data-bs-toggle="tab" href="#tabLegal-data" aria-selected="true"
                                            role="tab">Data Legalitas</a></li>
                                </ul>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabLegal-" role="tabpanel">
                                        <form action="{{ route('admin.services.landingPage.about.legal') }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label class="form-label" for="customFileLabel">Gambar <span
                                                        class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                        512kb)</span></label>
                                                <div class="form-control-wrap text-center">
                                                    @if ($aboutLegalImage->value)
                                                        <img id="logoOutputAboutLegal"
                                                            src="{{ asset('uploads/landing-page/about/images/' . $aboutLegalImage->value) }}"
                                                            alt="" width="300" height="300">
                                                    @else
                                                        <img id="logoOutputAboutLegal"
                                                            src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" width="300" height="300">
                                                    @endif
                                                    <div class="form-file pt-2">
                                                        <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('logoOutputAboutLegal').src = window.URL.createObjectURL(this.files[0])"
                                                            name="aboutLegalImage">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control form-control-outlined"
                                                        name="aboutLegalTitle" value="{{ $aboutLegalTitle->value }}">
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Judul</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <textarea type="text" class="form-control form-control-outlined" name="aboutLegalDesc" placeholder="Deskripsi">{{ $aboutLegalDesc->value }}</textarea>
                                                    <label class="form-label-outlined"
                                                        for="outlined-default">Deskripsi</label>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Simpan</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="tabLegal-data" role="tabpanel">
                                        {{-- <div class="text-end pb-3">
                                            <a href="javascript:void(0)" data-bs-toggle="modal"
                                                data-bs-target="#create-legal" class="btn btn-primary">Buat Legalitas</a>
                                        </div>
                                        <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
                                            <thead>
                                                <tr class="nk-tb-item nk-tb-head">
                                                    <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Deskripsi</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Url</span></th>
                                                    <th class="nk-tb-col nk-tb-col-tools text-end">
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($aboutLegalData as $key => $value)
                                                    <tr class="nk-tb-item">
                                                        <td class="nk-tb-col">
                                                            <div class="user-card">
                                                                <div class="user-info">
                                                                    <img src="{{ asset('uploads/landing-page/about/legal/' . $value->image) }}"
                                                                        width="50" height="50" alt="">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="nk-tb-col">
                                                            <div class="user-card">
                                                                <div class="user-info">
                                                                    <p>{{ $value->title }}</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="nk-tb-col">
                                                            <div class="user-card">
                                                                <div class="user-info">
                                                                    <p>{{ Str::substr($value->description, 0, 20) . '...' }}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="nk-tb-col">
                                                            <div class="user-card">
                                                                <div class="user-info">
                                                                    <span class="badge bg-primary"> <a
                                                                            href="{{ $value->url }}"
                                                                            class="text-white">Lihat</a></span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="nk-tb-col nk-tb-col-tools">
                                                            <ul class="nk-tb-actions gx-1">
                                                                <li class="nk-tb-action-hidden">
                                                                    <a href="javascript:void(0)" data-bs-toggle="modal"
                                                                        data-bs-target="#update-legal{{ $value->id }}"
                                                                        class="btn btn-trigger btn-icon"
                                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                                        title="Perbarui">
                                                                        <em class="icon ni ni-edit-fill"></em>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <div class="drodown">
                                                                        <a href="#"
                                                                            class="dropdown-toggle btn btn-icon btn-trigger"
                                                                            data-bs-toggle="dropdown"><em
                                                                                class="icon ni ni-more-h"></em></a>
                                                                        <div class="dropdown-menu dropdown-menu-end">
                                                                            <ul class="link-list-opt no-bdr">
                                                                                <li><a
                                                                                        href="{{ route('admin.services.landingPage.aboutLegalData.delete', ['id' => $value->id]) }}"><em
                                                                                            class="icon ni ni-na"></em><span>Hapus</span></a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                    </tr><!-- .nk-tb-item  -->
                                                @endforeach
                                            </tbody>
                                        </table> --}}
                                        <div class="text-end pb-3">
                                            <a onclick="funcBtnAboutLegalData()" href="javascript:void(0)"
                                                data-bs-toggle="modal" data-bs-target="#create-legal"
                                                class="btn btn-primary">Buat Legalitas</a>
                                        </div>

                                        <table class="datatable nowrap table" id="datatableAboutLegalData">
                                            <thead>
                                                <tr>
                                                    <th class="nk-tb-col"><span class="sub-text">Gambar</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Deskripsi</span></th>
                                                    <th class="nk-tb-col"><span class="sub-text">Url</span></th>
                                                    <th>#</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>


                                    @push('script')
                                        <script>
                                            NioApp.DataTable('#datatableAboutLegalData', {
                                                processing: true,
                                                serverSide: true,
                                                initComplete: function(settings, json) {
                                                    $('#datatableAboutLegalData_filter input').css('display', 'none');
                                                },
                                                ajax: {
                                                    url: '{{ route('admin.services.landingPage.aboutLegalData.listAboutLegalData') }}',
                                                    beforeSend: function() {
                                                        loadSpin(true, '#datatableAboutLegalData');
                                                    },
                                                    complete: function() {
                                                        loadSpin(false, '#datatableAboutLegalData');
                                                    },
                                                    type: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                    },
                                                    data: {}
                                                },
                                                columns: [{
                                                        data: 'image'
                                                    },
                                                    {
                                                        data: 'title'
                                                    },
                                                    {
                                                        data: 'description'
                                                    },
                                                    {
                                                        data: 'url'
                                                    },
                                                    {
                                                        data: 'action',
                                                        className: 'text-center'
                                                    },
                                                ],
                                                responsive: {
                                                    details: true
                                                },
                                            });

                                            function funcBtnAboutLegalData() {
                                                $('#titleAboutLegalData').html('Buat Legal Data');
                                                $("#btnCreateAboutLegalData").show();
                                                $("#btnUpdateAboutLegalData").hide();

                                                var image = "{{ asset('') }}landing/img/noimage.png";
                                                $("#logoOutputAboutLegalData").attr('src', image);
                                                $("#customFileAboutLegalData").val("");

                                                $("#aboutLegalDataTitle").val("");
                                                $('.form-group #aboutLegalDataTitle').closest('.form-group').removeClass('focused');

                                                $("#aboutLegalDataDescription").val("");
                                                $('.form-group #aboutLegalDataDescription').closest('.form-group').removeClass('focused');

                                                $("#aboutLegalDataUrl").val("");
                                                $('.form-group #aboutLegalDataUrl').closest('.form-group').removeClass('focused');
                                            }
                                        </script>
                                    @endpush

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div><!-- .nk-block -->

    {{-- Create slider --}}
    <div class="modal fade" role="dialog" id="create-slider">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutSlider">Buat slider</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-slider" enctype="multipart/form-data">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="customFileLabel">Gambar <span
                                            class="text-danger">(Format
                                            png.jpg dan Max
                                            512KB)</span></label>
                                    <div class="form-control-wrap text-center">
                                        <img id="logoOutputAboutSlider" src="{{ asset('') }}landing/img/noimage.png"
                                            alt="" height="400" width="1920" style="object-fit: cover">
                                        <div class="form-file pt-2">
                                            <input type="file" accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                id="customFileAboutSlider"
                                                onchange="document.getElementById('logoOutputAboutSlider').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="sliderTitle" type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Judul</label>
                                </div>
                                <div class="form-group">
                                    <textarea id="sliderdescription" name="description" class="form-control form-control-lg form-control-outlined"
                                        id="outlined" required></textarea>
                                    <label class="form-label-outlined" for="outlined">Deskripsi</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutSlider">
                                            <button onclick="functionCreateAboutSlider()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutSlider"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutSlider() {
                $('#create-slider').modal('toggle');
                var formData = new FormData($('#form-create-about-slider')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutSlider.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutSlider").DataTable().ajax.reload();
                        $('#logoOutputAboutSlider').attr('src', '{{ asset('') }}landing/img/noimage.png');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutSlider(id) {
                $("#btnCreateAboutSlider").hide();
                $("#btnUpdateAboutSlider").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutSlider.getAboutSlider') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-slider").modal('show');
                        $('#titleAboutSlider').html('Perbarui slider <span class="text-primary">' + r[0].title +
                            '</span>');

                        var image = "{{ asset('uploads/landing-page/about/slider') }}" + "/" + r[0].image;
                        $("#customFileAboutSlider").val("");
                        $("#logoOutputAboutSlider").attr('src', image);

                        $("#sliderTitle").val(r[0].title);
                        $('.form-group #sliderTitle').closest('.form-group').addClass('focused');

                        $("#sliderdescription").val(r[0].description);
                        $('.form-group #sliderdescription').closest('.form-group').addClass('focused');

                        $("#btnUpdateAboutSlider").html('<button onclick="functionUpdateAboutSlider(' + r[0].id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutSlider(id) {
                $('#create-slider').modal('toggle');
                var formData = new FormData($('#form-create-about-slider')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-slider/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutSlider").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutSlider(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-slider/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutSlider").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Create impact --}}
    <div class="modal fade" role="dialog" id="create-impact">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutImpact">Buat Data</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-impact">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea id="aboutImpactTitle" type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"></textarea>
                                    <label class="form-label-outlined" for="outlined">Nama</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutImpact">
                                            <button onclick="functionCreateAboutImpact()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutImpact"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutImpact() {
                $('#create-impact').modal('toggle');
                var formData = new FormData($('#form-create-about-impact')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutImpact.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutImpact").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutImpact(id) {
                $("#btnCreateAboutImpact").hide();
                $("#btnUpdateAboutImpact").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutImpact.getAboutImpact') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-impact").modal('show');
                        $('#titleAboutImpact').html('Perbarui data : ' + r[0].title);

                        $("#aboutImpactTitle").val(r[0].title);
                        $('.form-group #aboutImpactTitle').closest('.form-group').addClass('focused');

                        $("#btnUpdateAboutImpact").html('<button onclick="functionUpdateAboutImpact(' + r[0].id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutImpact(id) {
                $('#create-impact').modal('toggle');
                var formData = new FormData($('#form-create-about-impact')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-impact/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutImpact").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutImpact(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-impact/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutImpact").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Create History --}}
    <div class="modal fade" role="dialog" id="create-history">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutHistoryData">Buat Sejarah</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-history-data" enctype="multipart/form-data">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="customFileLabel">Gambar <span
                                            class="text-danger">(Format
                                            png.jpg dan Max
                                            512KB)</span></label>
                                    <div class="form-control-wrap text-center">
                                        <img id="logoOutputAboutHistoryData"
                                            src="{{ asset('') }}landing/img/noimage.png" alt=""
                                            height="300" width="300">
                                        <div class="form-file pt-2">
                                            <input type="file" accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                id="customFileAboutHistoryData"
                                                onchange="document.getElementById('logoOutputAboutHistoryData').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="aboutHistoryDataTitle" type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Judul</label>
                                </div>
                                <div class="form-group">
                                    <textarea id="aboutHistoryDataDescription" name="description"
                                        class="form-control form-control-lg form-control-outlined" id="outlined" required></textarea>
                                    <label class="form-label-outlined" for="outlined">Deskripsi</label>
                                </div>
                                <div class="form-group">
                                    <input id="aboutHistoryDataDate" type="date" name="date"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Tanggal</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutHistoryData">
                                            <button onclick="functionCreateAboutHistoryData()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutHistoryData"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutHistoryData() {
                $('#create-history').modal('toggle');
                var formData = new FormData($('#form-create-about-history-data')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutHistoryData.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutHistoryData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutHistoryData(id) {
                $("#btnCreateAboutHistoryData").hide();
                $("#btnUpdateAboutHistoryData").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutHistoryData.getAboutHistoryData') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-history").modal('show');

                        $('#titleAboutHistoryData').html('Perbarui data <span class="text-primary">' + r[0].title +
                            '</span>');

                        var image = "{{ asset('uploads/landing-page/about/history') }}" + "/" + r[0].image;
                        $("#customFileAboutHistoryData").val("");
                        $("#logoOutputAboutHistoryData").attr('src', image);

                        $("#aboutHistoryDataTitle").val(r[0].title);
                        $('.form-group #aboutHistoryDataTitle').closest('.form-group').addClass('focused');

                        $("#aboutHistoryDataDescription").val(r[0].description);
                        $('.form-group #aboutHistoryDataDescription').closest('.form-group').addClass('focused');

                        $("#aboutHistoryDataDate").val(r[0].date);
                        $('.form-group #aboutHistoryDataDate').closest('.form-group').addClass('focused');


                        $("#btnUpdateAboutHistoryData").html('<button onclick="functionUpdateAboutHistoryData(' + r[
                                0].id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutHistoryData(id) {
                $('#create-history').modal('toggle');
                var formData = new FormData($('#form-create-about-history-data')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-history-data/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutHistoryData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutHistoryData(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-history-data/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutHistoryData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Create About Value --}}
    <div class="modal fade" role="dialog" id="create-about-value">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutValue">Buat Data</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-value" enctype="multipart/form-data">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input id="aboutValueTitle" type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Judul</label>
                                </div>
                                <div class="form-group">
                                    <textarea id="aboutValueDescription" name="description" class="form-control form-control-lg form-control-outlined"
                                        id="outlined" required></textarea>
                                    <label class="form-label-outlined" for="outlined">Deskripsi</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutValue">
                                            <button onclick="functionCreateAboutValue()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutValue"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutValue() {
                $('#create-about-value').modal('toggle');
                var formData = new FormData($('#form-create-about-value')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutValue.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutValue").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutValue(id) {
                $("#btnCreateAboutValue").hide();
                $("#btnUpdateAboutValue").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutValue.getAboutValue') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-about-value").modal('show');

                        $('#titleAboutValue').html('Perbarui data <span class="text-primary">' + r[0].title +
                            '</span>');

                        $("#aboutValueTitle").val(r[0].title);
                        $('.form-group #aboutValueTitle').closest('.form-group').addClass('focused');

                        $("#aboutValueDescription").val(r[0].description);
                        $('.form-group #aboutValueDescription').closest('.form-group').addClass('focused');

                        $("#btnUpdateAboutValue").html('<button onclick="functionUpdateAboutValue(' + r[0].id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutValue(id) {
                $('#create-about-value').modal('toggle');
                var formData = new FormData($('#form-create-about-value')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-value/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutValue").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutValue(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-value/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutValue").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush


    {{-- Create Management Team --}}
    <div class="modal fade" role="dialog" id="create-management">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutManagementTeam">Buat Data</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-management-team" enctype="multipart/form-data">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="customFileLabel">Gambar <span
                                            class="text-danger">(Format
                                            png.jpg dan Max
                                            512KB)</span></label>
                                    <div class="form-control-wrap text-center">
                                        <img id="logoOutputAboutManagementTeam"
                                            src="{{ asset('') }}landing/img/noimage.png" alt=""
                                            height="300" width="300">
                                        <div class="form-file pt-2">
                                            <input type="file"
                                                accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                id="customFileAboutManagementTeam"
                                                onchange="document.getElementById('logoOutputAboutManagementTeam').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="aboutManagementTeamName" type="text" name="name"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Nama</label>
                                </div>
                                <div class="form-group">
                                    <input id="aboutManagementTeamPosition" type="text" name="position"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Position</label>
                                </div>
                                <div class="form-group">
                                    <select id="aboutManagementTeamCategory" name="category_position"
                                        class="form-control form-control-lg form-control-outlined" id="">
                                        <option value="">Pilih Kategori</option>
                                        <option value="1">Pimpinan</option>
                                        <option value="2">Staff</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutManagementTeam">
                                            <button onclick="functionCreateAboutManagementTeam()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutManagementTeam"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutManagementTeam() {
                $('#create-management').modal('toggle');
                var formData = new FormData($('#form-create-about-management-team')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutManagementTeam.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutManagementTeam").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutManagementTeam(id) {
                $("#btnCreateAboutManagementTeam").hide();
                $("#btnUpdateAboutManagementTeam").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutManagementTeam.getAboutManagementTeam') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-management").modal('show');

                        $('#titleAboutManagementTeam').html('Perbarui data <span class="text-primary">' + r[0]
                            .title + '</span>');

                        var image = "{{ asset('uploads/landing-page/about/management') }}" + "/" + r[0].image;
                        $('#customFileAboutManagementTeam').val('');
                        $("#logoOutputAboutManagementTeam").attr('src', image);

                        $("#aboutManagementTeamName").val(r[0].name);
                        $('.form-group #aboutManagementTeamName').closest('.form-group').addClass('focused');

                        $("#aboutManagementTeamPosition").val(r[0].position);
                        $('.form-group #aboutManagementTeamPosition').closest('.form-group').addClass('focused');

                        $("#aboutManagementTeamCategory").val(r[0].category_position);
                        $('.form-group #aboutManagementTeamCategory').closest('.form-group').addClass('focused');


                        $("#btnUpdateAboutManagementTeam").html(
                            '<button onclick="functionUpdateAboutManagementTeam(' + r[0].id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutManagementTeam(id) {
                $('#create-management').modal('toggle');
                var formData = new FormData($('#form-create-about-management-team')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-management-team/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutManagementTeam").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutManagementTeam(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-management-team/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutManagementTeam").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Create Map --}}
    <div class="modal fade" role="dialog" id="create-map">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutMapData">Buat Peta</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-map-data" enctype="multipart/form-data">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="customFileLabel">Gambar <span
                                            class="text-danger">(Format
                                            png.jpg dan Max
                                            512KB)</span></label>
                                    <div class="form-control-wrap text-center">
                                        <img id="logoOutputAboutMapData"
                                            src="{{ asset('') }}landing/img/noimage.png" alt=""
                                            height="400" width="1920" style="object-fit: cover">
                                        <div class="form-file pt-2">
                                            <input type="file"
                                                accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                id="customFileAboutMapData"
                                                onchange="document.getElementById('logoOutputAboutMapData').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="aboutMapDataTitle" type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Judul</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutMapData">
                                            <button onclick="functionCreateAboutMapData()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutMapData"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutMapData() {
                $('#create-map').modal('toggle');
                var formData = new FormData($('#form-create-about-map-data')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutMapData.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutMapData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutMapData(id) {
                $("#btnCreateAboutMapData").hide();
                $("#btnUpdateAboutMapData").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutMapData.getAboutMapData') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-map").modal('show');

                        $('#titleAboutMapData').html('Perbarui data <span class="text-primary">' + r[0].title +
                            '</span>');

                        var image = "{{ asset('uploads/landing-page/about/map') }}" + "/" + r[0].image;
                        $("#logoOutputAboutMapData").attr('src', image);

                        $("#aboutMapDataTitle").val(r[0].title);
                        $('.form-group #aboutMapDataTitle').closest('.form-group').addClass('focused');

                        $("#btnUpdateAboutMapData").html('<button onclick="functionUpdateAboutMapData(' + r[0].id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutMapData(id) {
                $('#create-map').modal('toggle');
                var formData = new FormData($('#form-create-about-map-data')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-map-data/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutMapData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutMapData(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-map-data/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutMapData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush


    {{-- Create legal --}}
    <div class="modal fade" role="dialog" id="create-legal">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleAboutLegalData">Buat Legalitas</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-about-legal-data" enctype="multipart/form-data">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="customFileLabel">Gambar <span
                                            class="text-danger">(Format
                                            png.jpg dan Max
                                            512KB)</span></label>
                                    <div class="form-control-wrap text-center">
                                        <img id="logoOutputAboutLegalData"
                                            src="{{ asset('') }}landing/img/noimage.png" alt=""
                                            height="300" width="300">
                                        <div class="form-file pt-2">
                                            <input type="file"
                                                accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                id="customFileAboutLegal"
                                                onchange="document.getElementById('logoOutputAboutLegalData').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="aboutLegalDataTitle" type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Judul</label>
                                </div>
                                <div class="form-group">
                                    <textarea id="aboutLegalDataDescription" name="description"
                                        class="form-control form-control-lg form-control-outlined" id="outlined" cols="30" rows="10"
                                        required></textarea>
                                    <label class="form-label-outlined" for="outlined">Deskripsi</label>
                                </div>
                                <div class="form-group">
                                    <input id="aboutLegalDataUrl" type="text" name="url"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Url</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateAboutLegalData">
                                            <button onclick="functionCreateAboutLegalData()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateAboutLegalData"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    @push('script')
        <script>
            function functionCreateAboutLegalData() {
                $('#create-legal').modal('toggle');
                var formData = new FormData($('#form-create-about-legal-data')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutLegalData.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutLegalData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataAboutLegalData(id) {
                $("#btnCreateAboutLegalData").hide();
                $("#btnUpdateAboutLegalData").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.aboutLegalData.getAboutLegalData') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-legal").modal('show');

                        $('#titleAboutLegalData').html('Perbarui data <span class="text-primary">' + r[0].title +
                            '</span>');

                        var image = "{{ asset('uploads/landing-page/about/legal') }}" + "/" + r[0].image;
                        $("#logoOutputAboutLegalData").attr('src', image);


                        $("#aboutLegalDataTitle").val(r[0].title);
                        $('.form-group #aboutLegalDataTitle').closest('.form-group').addClass('focused');

                        $("#aboutLegalDataDescription").val(r[0].description);
                        $('.form-group #aboutLegalDataDescription').closest('.form-group').addClass('focused');

                        $("#aboutLegalDataUrl").val(r[0].url);
                        $('.form-group #aboutLegalDataUrl').closest('.form-group').addClass('focused');

                        $("#btnUpdateAboutLegalData").html('<button onclick="functionUpdateAboutLegalData(' + r[0]
                            .id +
                            ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateAboutLegalData(id) {
                $('#create-legal').modal('toggle');
                var formData = new FormData($('#form-create-about-legal-data')[0]);

                $.ajax({
                    url: '/admin/landing-page/about/update-about-legal-data/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutLegalData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataAboutLegalData(id) {
                $.ajax({
                    url: '/admin/landing-page/about/delete-about-legal-data/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableAboutLegalData").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush
@endsection