@extends('layouts.administrator.master')

@section('title')
    Beranda
@endsection

@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">
                        Beranda
                    </h3>
                    <div class="nk-block-des">
                        <p>Kamu mempunyai akses untuk mengelola halaman beranda</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">
                <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="#tabHome" aria-selected="true"
                                    role="tab">Hero</a></li>
                            <li><a data-bs-toggle="tab" href="#tabHomeSlider" aria-selected="false" role="tab"
                                    class="" tabindex="-1">Slider</a></li>
                            <li><a data-bs-toggle="tab" href="#tabHomeCount" aria-selected="false" role="tab"
                                    class="" tabindex="-1">Data Perhitungan</a></li>
                            <li><a data-bs-toggle="tab" href="#tabHomeBanner" aria-selected="false" role="tab"
                                    class="" tabindex="-1">Banner</a></li>
                            <li><a data-bs-toggle="tab" href="#tabHomeTestimonial" aria-selected="false" role="tab"
                                    class="" tabindex="-1">Testimoni</a></li>
                        </ul>
                    </div>
                    <div class="col-md-8">
                        <div class="tab-content">

                            {{-- Home --}}

                            <div class="tab-pane active show" id="tabHome" role="tabpanel">
                                <form action="{{ route('admin.services.landingPage.home') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group">
                                        <label class="form-label" for="customFileLabel">Latar belakang gambar <span
                                                class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                512kb)</span></label>
                                        <div class="form-control-wrap text-center">
                                            @if ($heroBg->value)
                                                <img id="logoOutput"
                                                    src="{{ asset('uploads/landing-page/home/images/' . $heroBg->value) }}"
                                                    alt="" width="1920" height="400">
                                            @else
                                                <img id="logoOutput" 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('logoOutput').src = window.URL.createObjectURL(this.files[0])"
                                                    name="heroBg">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control form-control-outlined"
                                                name="heroTitle" value="{{ $heroTitle->value }}">
                                            <label class="form-label-outlined" for="outlined-default">Judul</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="card card-bordered">
                                            <textarea name="heroDesc" class="form-control" placeholder="Deskripsi">{{ $heroDesc->value }}</textarea>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <div class=" text-center border border-2 ">
                                        <h4 class="p-2">Sejarah Kami</h4>
                                    </div>

                                    <br>
                                    <br>
                                    <div class="form-group">
                                        <label class="form-label mt-10" for="customFileLabel">Gambar Tentang Kami <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="logoOutput2"
                                                    src="{{ asset('uploads/landing-page/home/images/' . $aboutImage->value) }}"
                                                    alt="" width="400" style="object-fit: cover" height="400">
                                            @else
                                                <img id="logoOutput2" src="{{ asset('') }}landing/img/noimage.png"
                                                    alt="" width="400" style="object-fit: cover"
                                                    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('logoOutput2').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 Tentang
                                                Kami</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="card card-bordered">
                                            <textarea name="aboutDesc" class="form-control" placeholder="Deskripsi Tentang Kami">{{ $aboutDesc->value }}</textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control form-control-outlined"
                                                name="aboutVideo" value="{{ $aboutVideo->value }}">
                                            <label class="form-label-outlined" for="outlined-default">Tautan Video</label>
                                        </div>
                                    </div>

                                    <div class="text-end">
                                        <button class="btn btn-primary" type="submit">Simpan</button>
                                    </div>
                                </form>
                            </div>

                            {{-- Home Slider --}}

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

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

                            </div>

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

                                    function funcBtnHomeSlider() {
                                        $('#titleSlider').html('Buat Penggeser Gambar');
                                        $("#btnCreateSlider").show();
                                        $("#btnUpdateSlider").hide();

                                        $('#customFileHomeSlider').val('');
                                        var image = "{{ asset('') }}landing/img/noimage.png";
                                        $("#logoOutputHomeSlider").attr('src', image);
                                    }
                                </script>
                            @endpush

                            {{-- Home Count --}}

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

                                <table class="datatable nowrap table" id="datatableHomeCount">
                                    <thead>
                                        <tr>
                                            <th class="nk-tb-col"><span class="sub-text">Nama</span></th>
                                            <th class="nk-tb-col"><span class="sub-text">Jumlah</span></th>
                                            <th>#</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>

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

                                    function funcBtnHomeCount() {
                                        $('#titleCount').html('Buat Data Hitung');
                                        $("#btnCreateCount").show();
                                        $("#btnUpdateCount").hide();
                                        $("[name=name]").val("");
                                        $('.form-group input[name="name"]').closest('.form-group').removeClass('focused');
                                        $("[name=amount]").val("");
                                        $('.form-group input[name="amount"]').closest('.form-group').removeClass('focused');
                                    }
                                </script>
                            @endpush

                            {{-- Home Banner --}}

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


                                <table class="datatable nowrap table" id="datatableHomeBanner">
                                    <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('#datatableHomeBanner', {
                                        processing: true,
                                        serverSide: true,
                                        initComplete: function(settings, json) {
                                            $('#datatableHomeBanner_filter input').css('display', 'none');
                                        },
                                        ajax: {
                                            url: '{{ route('admin.services.landingPage.homeBanner.listBanner') }}',
                                            beforeSend: function() {
                                                loadSpin(true, '#datatableHomeBanner');
                                            },
                                            complete: function() {
                                                loadSpin(false, '#datatableHomeBanner');
                                            },
                                            type: 'POST',
                                            headers: {
                                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                            data: {}
                                        },
                                        columns: [{
                                                data: 'image'
                                            },
                                            {
                                                data: 'title'
                                            },
                                            {
                                                data: 'description'
                                            },
                                            {
                                                data: 'action',
                                                className: 'text-center'
                                            },
                                        ],
                                        responsive: {
                                            details: true
                                        },
                                    });

                                    function funcBtnHomeBanner() {
                                        $('#titleH5Banner').html('Buat Banner');
                                        $("#btnCreateBanner").show();
                                        $("#btnUpdateBanner").hide();


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

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

                            {{-- Home Testimonial --}}

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

                                <table class="datatable nowrap table" id="datatableHomeTestimonial">
                                    <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>#</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

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

                                    function funcBtnHomeTestimonial() {
                                        $('#titleH5Testimonial').html('Buat Testimoni');
                                        $("#btnCreateTestimonial").show();
                                        $("#btnUpdateTestimonial").hide();


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

                                        $("#titleTestimonial").val('');
                                        $('.form-group #titleTestimonial').closest('.form-group').removeClass('focused');
                                        $("#descriptionTestimonial").val('');
                                        $('.form-group #descriptionTestimonial').closest('.form-group').removeClass('focused');
                                        $("#positionTestimonial").val('');
                                        $('.form-group #positionTestimonial').closest('.form-group').removeClass('focused');
                                        $("#dateTestimonial").val('');
                                        $('.form-group #dateTestimonial').closest('.form-group').removeClass('focused');

                                    }
                                </script>
                            @endpush

                        </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="titleSlider">Buat Penggeser Gambar</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-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="logoOutputHomeSlider" src="{{ asset('') }}landing/img/noimage.png"
                                            alt="" height="400" style="object-fit:cover" width="300">
                                        <div class="form-file pt-2">
                                            <input type="file" accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                id="customFileHomeSlider"
                                                onchange="document.getElementById('logoOutputHomeSlider').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </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="btnCreateSlider">
                                            <button onclick="functionCreateSlider()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateSlider"></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 functionCreateSlider() {
                $('#create-slider').modal('toggle');
                var formData = new FormData($('#form-create-slider')[0]);

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

            function getDataSlider(id) {
                $("#btnCreateSlider").hide();
                $("#btnUpdateSlider").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.homeSlider.getSlider') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-slider").modal('show');
                        $('#titleSlider').html('Perbarui Penggeser Gambar');

                        var image = "{{ asset('uploads/landing-page/home/slider') }}" + "/" + r[0].image;
                        $('#customFileHomeSlider').val('');
                        $("#logoOutputHomeSlider").attr('src', image);
                        $("#btnUpdateSlider").html('<button onclick="functionUpdateSlider(' + 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 functionUpdateSlider(id) {
                $('#create-slider').modal('toggle');
                var formData = new FormData($('#form-create-slider')[0]);

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

            function deletedDataSlider(id) {
                $.ajax({
                    url: '/admin/landing-page/home/delete-home-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"
                        });
                        $("#datatableHomeSlider").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Create Count --}}
    <div class="modal fade" role="dialog" id="create-count">
        <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="titleCount">Buat Data Hitung</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-count">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" name="name"
                                        class="form-control form-control-lg form-control-outlined" id="outlined">
                                    <label class="form-label-outlined" for="outlined">Nama</label>
                                </div>
                                <div class="form-group">
                                    <input type="number" name="amount"
                                        class="form-control form-control-lg form-control-outlined" id="outlined">
                                    <label class="form-label-outlined" for="outlined">Jumlah</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="btnCreateCount">
                                            <button onclick="functionCreateCount()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateCount"></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 functionCreateCount() {
                $('#create-count').modal('toggle');
                var formData = new FormData($('#form-create-count')[0]);

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

            function getDataCount(id) {
                $("#btnCreateCount").hide();
                $("#btnUpdateCount").show();

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

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

                        $("[name=amount]").val(r[0].amount);
                        $('.form-group input[name="amount"]').closest('.form-group').addClass('focused');

                        $("#spanCountUbah").html(r[0].name);
                        $("#btnUpdateCount").html('<button onclick="functionUpdateCount(' + 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 functionUpdateCount(id) {
                $('#create-count').modal('toggle');
                var formData = new FormData($('#form-create-count')[0]);

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

            function deletedDataCount(id) {
                $.ajax({
                    url: '/admin/landing-page/home/delete-home-count/' + 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"
                        });
                        $("#datatableHomeCount").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Modal Banner --}}
    <div class="modal fade" role="dialog" id="create-banner">
        <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="titleH5Banner">Buat Banner</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-banner" 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="logoOutputHomeBanner" 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="customFileHomeBanner"
                                                onchange="document.getElementById('logoOutputHomeBanner').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="titleBanner" 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="descriptionBanner" 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="btnCreateBanner">
                                            <button onclick="functionCreateBanner()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateBanner"></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 functionCreateBanner() {
                $('#create-banner').modal('toggle');
                var formData = new FormData($('#form-create-banner')[0]);

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

            function getDataBanner(id) {
                $("#btnCreateBanner").hide();
                $("#btnUpdateBanner").show();

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

                        var image = "{{ asset('uploads/landing-page/home/banner') }}" + "/" + r[0].image;
                        $('#customFileHomeBanner').val('');
                        $("#logoOutputHomeBanner").attr('src', image);
                        $("#titleBanner").val(r[0].title);
                        $('.form-group #titleBanner').closest('.form-group').addClass('focused');
                        $("#descriptionBanner").val(r[0].description);
                        $('.form-group #descriptionBanner').closest('.form-group').addClass('focused');

                        $("#btnUpdateBanner").html('<button onclick="functionUpdateBanner(' + 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 functionUpdateBanner(id) {
                $('#create-banner').modal('toggle');
                var formData = new FormData($('#form-create-banner')[0]);

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

            function deletedDataBanner(id) {
                $.ajax({
                    url: '/admin/landing-page/home/delete-home-banner/' + 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"
                        });
                        $("#datatableHomeBanner").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush

    {{-- Create Testimonial --}}
    <div class="modal fade" role="dialog" id="create-testimonial">
        <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="titleH5Testimonial">Buat Testimoni</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-testimonial" 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="logoOutputHomeTestimonial"
                                            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="customFileHomeTestimonial"
                                                onchange="document.getElementById('logoOutputHomeTestimonial').src = window.URL.createObjectURL(this.files[0])"
                                                name="image">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input id="titleTestimonial" 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="descriptionTestimonial" 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="positionTestimonial" type="text" name="position"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Jabatan</label>
                                </div>
                                <div class="form-group">
                                    <input id="dateTestimonial" 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="btnCreateTestimonial">
                                            <button onclick="functionCreateTestimonial()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateTestimonial"></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 functionCreateTestimonial() {
                $('#create-testimonial').modal('toggle');
                var formData = new FormData($('#form-create-testimonial')[0]);

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

            function getDataTestimonial(id) {
                $("#btnCreateTestimonial").hide();
                $("#btnUpdateTestimonial").show();

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

                        var image = "{{ asset('uploads/landing-page/home/testimonial') }}" + "/" + r[0].image;
                        $('#customFileHomeTestimonial').val('');
                        $("#logoOutputHomeTestimonial").attr('src', image);
                        $("#titleTestimonial").val(r[0].title);
                        $('.form-group #titleTestimonial').closest('.form-group').addClass('focused');
                        $("#descriptionTestimonial").val(r[0].description);
                        $('.form-group #descriptionTestimonial').closest('.form-group').addClass('focused');
                        $("#positionTestimonial").val(r[0].position);
                        $('.form-group #positionTestimonial').closest('.form-group').addClass('focused');
                        $("#dateTestimonial").val(r[0].date);
                        $('.form-group #dateTestimonial').closest('.form-group').addClass('focused');

                        $("#btnUpdateTestimonial").html('<button onclick="functionUpdateTestimonial(' + 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 functionUpdateTestimonial(id) {
                $('#create-testimonial').modal('toggle');
                var formData = new FormData($('#form-create-testimonial')[0]);

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

            function deletedDataTestimonial(id) {
                $.ajax({
                    url: '/admin/landing-page/home/delete-home-testimonial/' + 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"
                        });
                        $("#datatableHomeTestimonial").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush
@endsection