@extends('layouts.main')

@section('title', 'Landing Page')
@section('header', 'Landing Page')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Landing Page</li>
@endsection

@section('content')

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">Slider</h3>
    </div>
         <div class="row">
            <div class="col-md-10"></div>
            <div class="col-md-2">
                <label class="form-control-label">&nbsp;</label>
                <button  class="form-control form-control-sm btn-default btn-create" data-toggle="modal" data-target="#createDataSilder">
                    <i class="fa fa-plus"></i>&nbsp;&nbsp; Create
                </button>
            </div>
        </div>
    <div class="card card-primary">
        <div class="card-body">
            <div class="dataTableSlider" id="dataTableSlider">
                <label class="el-waiting-message">Loading your data. It may take some time..</label>
            </div>
        </div>
    </div>
</div>

@if($update)
<div class="modal fade" tabindex="-1" id="detailDataSlider" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-update-data-slider" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Slider</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="form-group">
                        <label class="form-control-label mt-2">Gambar</label>  <small class="text-danger">*</small>
                    </div>
                    <div class="form-group">
                        <img src="/images/app/upload.png" width="40%" id="slider_gambar_detail_view" onclick="document.getElementById('slider_gambar_detail').click()" class="pointer">
                        <input type="file" id="slider_gambar_detail" name="slider_gambar_detail" class="d-none" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Judul</label> <small class="text-danger">*</small>
                        <input type="text" name="judul" class="form-control form-control-sm" required autofocus placeholder="Judul">
                        <input name="id" hidden>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Keterangan</label> <small class="text-danger">*</small>
                        <textarea name="keterangan" class="form-control form-control-sm" required autofocus placeholder="Keterangan"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="detailFooterSlider"></div>
            </form>
        </div>
    </div>
</div>
@endif

@if($create)
<div class="modal fade" tabindex="-1" id="createDataSilder" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-data-slider" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Slider</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="form-group">
                        <label class="form-control-label mt-2">Gambar</label>  <small class="text-danger">*</small>
                    </div>
                    <div class="form-group">
                        <img src="/images/app/upload.png" width="40%" id="slider_gambar_view" onclick="document.getElementById('slider_gambar').click()" class="pointer">
                        <input type="file" id="slider_gambar" name="slider_gambar" class="d-none" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Judul</label> <small class="text-danger">*</small>
                        <input type="text" name="judul" class="form-control form-control-sm" required autofocus placeholder="Judul">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Keterangan</label> <small class="text-danger">*</small>
                        <textarea name="keterangan" class="form-control form-control-sm" required autofocus placeholder="Keterangan"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-success btn-sm">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endif


<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">Content Lain</h3>
    </div>
    <div class="row">
        <div class="col-md-10"></div>
        <div class="col-md-2">
            <label class="form-control-label">&nbsp;</label>
            <button  class="form-control form-control-sm btn-default btn-create" data-toggle="modal" data-target="#createData">
                <i class="fa fa-plus"></i>&nbsp;&nbsp; Create
            </button>
        </div>
    </div>
    <div class="card card-primary">
        <div class="card-body">
            <div class="dataTableRow" id="dataTableRow">
                <label class="el-waiting-message">Loading your data. It my take some time</label>
            </div>
        </div>
    </div>
</div>
@if($update)
<div class="modal fade" tabindex="-1" id="detailData" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-update-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Dokumen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="form-group">
                        <label for="form-control-label">Judul</label> <small class="text-danger">*</small>
                        <input type="text" class="form-control" name="judul" placeholder="ex: Brosur PPDB" required>
                        <input name="id" hidden>
                    </div>
                    <div class="form-group">
                        <label for="form-control-label">Deskripsi</label> <small class="text-danger">*</small>
                        <textarea name="deskripsi" id="deskripsi" cols="10" rows="5" class="form-control" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="form-control-label">Posisi</label> <small class="text-danger">*</small>
                        <input type="number" class="form-control" name="posisi" placeholder="ex: 1" required>
                    </div>
                    <div class="form-group">
                        <label for="form-control-label">Posisi</label> <small class="text-danger">* (jpeg, jpg, png)</small>
                    </div>
                    <div class="form-group">
                        <input type="file" id="gambar_detail" class="form-control" name="gambar_detail">
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="detailFooter"></div>
            </form>
        </div>
    </div>
</div>
@endif

@if($create)
<div class="modal fade" tabindex="-1" id="createData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-data" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Landing Page</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-2">
                        <div class="form-group">
                            <label for="form-control-label">Judul</label> <small class="text-danger">*</small>
                            <input type="text" class="form-control" name="judul" placeholder="ex: Brosur PPDB" required>
                        </div>
                        <div class="form-group">
                            <label for="form-control-label">Deskripsi</label> <small class="text-danger">*</small>
                            <textarea name="deskripsi" id="deskripsi" cols="10" rows="5" class="form-control" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="form-control-label">Posisi</label> <small class="text-danger">*</small>
                            <input type="number" class="form-control" name="posisi" placeholder="ex: 1" required>
                        </div>
                        <div class="form-group">
                            <label for="form-control-label">Gambar</label> <small class="text-danger">* (jpeg, jpg, png)</small>
                            <input type="file" id="gambar" class="form-control" name="gambar">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                    <button type="submit" class="btn btn-success btn-sm">Submit</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endif

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">Pertanyaan yang sering muncul</h3>
    </div>
    <div class="row">
        <div class="col-md-10"></div>
        <div class="col-md-2">
            <label class="form-control-label">&nbsp;</label>
            <button  class="form-control form-control-sm btn-default btn-create" data-toggle="modal" data-target="#createDataPertanyaan">
                <i class="fa fa-plus"></i>&nbsp;&nbsp; Create
            </button>
        </div>
    </div>
    <div class="card card-primary">
        <div class="card-body">
            <div class="dataTablePertanyaan" id="dataTablePertanyaan">
                <label class="el-waiting-message">Loading your data. It may take some time..</label>
            </div>
        </div>
    </div>
</div>


@if($create)
<div class="modal fade" tabindex="-1" id="createDataPertanyaan" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-data-pertanyaan" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Pertanyaan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-2">
                        <div class="form-group">
                            <label for="form-control-label">Pertanyaan</label> <small class="text-danger">*</small>
                            <input type="text" class="form-control" name="pertanyaan" placeholder="ex: Apakah belajar itu baik ?" required>
                        </div>
                        <div class="form-group">
                            <label for="form-control-label">Jawaban</label> <small class="text-danger">*</small>
                            <textarea name="jawaban" id="jawaban" cols="10" rows="5" placeholder="Iya sangat Baik" class="form-control" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="form-control-label">Posisi</label> <small class="text-danger">*</small>
                            <input type="number" class="form-control" name="posisi" placeholder="ex: 1" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                    <button type="submit" class="btn btn-success btn-sm">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@if($update)
<div class="modal fade" tabindex="-1" id="detailDataPertanyaan" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-update-data-pertanyaan" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Pertanyaan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="form-group">
                        <label for="form-control-label">Pertanyaan</label> <small class="text-danger">*</small>
                        <input type="text" class="form-control" name="pertanyaan" placeholder="ex: Apakah belajar itu baik ?" required>
                        <input name="id" hidden>
                    </div>

                    <div class="form-group">
                        <label for="form-control-label">Jawaban</label> <small class="text-danger">*</small>
                        <textarea name="jawaban" id="jawaban" cols="10" rows="5" placeholder="Iya sangat Baik" class="form-control" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="form-control-label">Posisi</label> <small class="text-danger">*</small>
                        <input type="number" class="form-control" name="posisi" placeholder="ex: 1" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="detailFooterPertanyaan"></div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection

@push('custom-scripts')
<script>
    $(document).on('change', '#slider_gambar', function(e){
        var target = $('#slider_gambar_view'),
            src = $('#slider_gambar');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#slider_gambar_detail', function(e){
        var target = $('#slider_gambar_detail_view'),
            src = $('#slider_gambar_detail');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    var param = {
        filter: "",
        status_aktif: "ALL"
    }
    $(document).ready(function(e) {
        loadThis(param),
        loadSlider(param),
        loadPertanyaan(param)
    })

    function loadPertanyaan(params) {
        url = "/web_api/pertanyaan/getData";
        th = '<th width="auto">Pertanyaan</th>' +
             '<th>Jawaban</th>' +
             '<th>Posisi</th>' +
             '<th width="5%">STATUS</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "pertanyaan"},
                    { "data": "jawaban"},
                    { "data": "posisi"},
                    { "data": "status", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 3,
                    "data": "status",
                    "render" : function (data, type, row) {
                        var btn_bg = 'bg-green';
                        if(row.status === "NONAKTIF") btn_bg = 'bg-danger';
                        return '<a href="#" class="btn btn-sm '+btn_bg+' text-white btn-view-only">'+row.status+'</a>';
                    }
                },
                {
                    "targets" : 4,
                    "data": "id",
                    "render" : function (data, type, row) {
                        var status_text = "NONAKTIFKAN",
                            status_color = "text-danger";
                        if(row.status === "NONAKTIF"){
                            status_text = "AKTIFKAN";
                            status_color = "text-success";
                        }
                        var btn = '';
                        if({{$update}}){
                            btn = '<div class="btn-group">' +
                                        '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                            'Action ' +
                                        '</button>' +
                                        '<div class="dropdown-menu" role="menu" style="">' +
                                            '<a href="#" class="dropdown-item btn-detail-pertanyaan" data-id="'+row.id+'"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>' +
                                            '<a href="#" class="dropdown-item btn-status-aktif-pertanyaan" data-id="'+row.id+'"><i class="fa fa-power-off mr-2 '+status_color+'"></i> '+ status_text +'</a>' +
                                        '</div>' +
                                       '</div>';
                        }
                        return btn;
                    }
                },
            ];   
        
        order = [[0, 'desc']];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTablePertanyaan');
    }


    function loadSlider(params){
        url = "/web_api/slider/getData";
        th = '<th width="15%">GAMBAR</th>' +
             '<th>JUDUL</th>' +
             '<th>KETERANGAN</th>' +
             '<th width="5%">STATUS</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "foto", 'className':'text-center'},
                    { "data": "judul"},
                    { "data": "keterangan"},
                    { "data": "status_aktif", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 0,
                    "data": "foto",
                    "render" : function (data, type, row) {
                        return '<a href="/images/slider/'+row.foto+'" target="new"><img src="/images/slider/'+row.foto+'" width="50%"></a>';
                    }
                },
                {
                    "targets" : 3,
                    "data": "status_aktif",
                    "render" : function (data, type, row) {
                        var btn_bg = 'bg-green';
                        if(row.status_aktif === "NONAKTIF") btn_bg = 'bg-danger';
                        return '<a href="#" class="btn btn-sm '+btn_bg+' text-white btn-view-only">'+row.status_aktif+'</a>';
                    }
                },
                {
                    "targets" : 4,
                    "data": "id",
                    "render" : function (data, type, row) {
                        var status_text = "NONAKTIFKAN",
                            status_color = "text-danger";
                        if(row.status_aktif === "NONAKTIF"){
                            status_text = "AKTIFKAN";
                            status_color = "text-success";
                        }
                        var btn = '';
                        if({{$update}}){
                            btn = '<div class="btn-group">' +
                                        '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                            'Action ' +
                                        '</button>' +
                                        '<div class="dropdown-menu" role="menu" style="">' +
                                            '<a href="#" class="dropdown-item btn-detail-slider" data-id="'+row.id+'"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>' +
                                            '<a href="#" class="dropdown-item btn-status-aktif-slider" data-id="'+row.id+'"><i class="fa fa-power-off mr-2 '+status_color+'"></i> '+ status_text +'</a>' +
                                        '</div>' +
                                       '</div>';
                        }
                        return btn;
                    }
                },
            ];   
        
        order = [[0, 'desc']];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableSlider');
    }
    
    function loadThis(params) {
        url="/web_api/custom-landing-page/getData";
        th ='<th width=30%>JUDUL</th>' +
            '<th width=50%>DESKRIPSI</th>'+
            '<th>POSISI</th>'+
            '<th>GAMBAR</th>'+
            '<th>STATUS</th>'+
            '<th>ACTION</th>';        
        columns = [
            {"data": "judul", 'className':'text-center'},
            {"data": "deskripsi"},
            {"data": "kode_posisi"},
            {"data": "gambar"},
            {"data": "status"},
            {"data": "id", 'className': 'text-center'},
        ];

        col_def = [
            {
                "targets" : 3,
                "data" : "gambar",
                "render" : function (data, type, row) {
                        if(row.gambar == null) return '-'
                        return '<a href="/file/landing/'+row.gambar+'" target="new"><img src="/file/landing/'+row.gambar+'" width="80px"></a>';
                    }
            },
            {
                "targets" : 4,
                "data" : "status",
                "render" : function (data, type, row) {
                        var btn_bg = 'bg-green';
                        if(row.status === "NONAKTIF") btn_bg = 'bg-danger';
                        return '<a href="#" class="btn btn-sm '+btn_bg+' text-white btn-view-only">'+row.status+'</a>';
                    }
            },
            {
                "targets" : 5,
                "data": "id",
                "render" : function (data, type, row) {
                    var status_text = "NONAKTIFKAN",
                        status_color = "text-danger";
                    if(row.status == "NONAKTIF") {
                        status_text = "AKTIFKAN";
                        status_color = "text-success";
                    }
                    var btn = '';

                    if({{$update}}) {
                        btn = '<div class="btn-group">' +
                                        '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                            'Action ' +
                                        '</button>' +
                                        '<div class="dropdown-menu" role="menu" style="">' +
                                            '<a href="#" class="dropdown-item btn-detail" data-id="'+row.id+'"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>' +
                                            '<a href="#" class="dropdown-item btn-status-aktif" data-id="'+row.id+'"><i class="fa fa-power-off mr-2 '+status_color+'"></i> '+ status_text +'</a>' +
                                        '</div>' +
                                       '</div>';
                    }
                    return btn;
                }
            }
        ];

        order = [[0, 'desc']];
        sDom = '';
        buttons = [];

        loadTable(url, params, th, col_def, columns, order, sDom, buttons);
    }
</script>

@if ($create)
<script>
    $(document).ready(function(e) {
        $(document).on('submit', '.form-create-data', function(e){
            e.preventDefault();
            var ini = $(this), input_token = $('input[name=_token]'),
                url = '/web_api/custom-landing-page/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                judul: ini.find('input[name=judul]').val(),
                deskripsi: ini.find('textarea[name=deskripsi]').val(),
                posisi: ini.find('input[name=posisi]').val(),
                
            };

            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);

            function postData(post_data) {
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createData').modal('hide');
                        $('#gambar').val('');
                        ini.find('input[name=judul]').val('');
                        ini.find('input[name=posisi]').val('');
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }

            var el_image = $('#gambar'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.gambar = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 50){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran File tidak boleh lebih dari 5 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
        })
    })


    $(document).ready(function(e){
        $(document).on('submit', '.form-create-data-slider', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/slider/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                judul: ini.find('input[name=judul]').val(),
                keterangan: ini.find('textarea[name=keterangan]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createDataSilder').modal('hide');
                        $('#slider_gambar').val('');
                        $('#slider_gambar_view').attr('src', '/images/app/upload.png');
                        ini.find('input[name=judul]').val('');
                        ini.find('textarea[name=keterangan]').val('');
                        loadSlider(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            var el_image = $('#slider_gambar'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.foto = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 10){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran Foto tidak boleh lebih dari 10 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
            
        });
    });


    $(document).ready(function(e) {
        $(document).on('submit', '.form-create-data-pertanyaan', function(e){
            e.preventDefault();
            var ini = $(this), input_token = $('input[name=_token]'),
                url = '/web_api/pertanyaan/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                pertanyaan: ini.find('input[name=pertanyaan]').val(),
                jawaban: ini.find('textarea[name=jawaban]').val(),
                posisi: ini.find('input[name=posisi]').val(),    
            };
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);

            function postData(post_data) {
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createDataPertanyaan').modal('hide');
                        ini.find('input[name=pertanyaan]').val('');
                        ini.find('textarea[name=jawaban]').val('');
                        ini.find('posisi[name=posisi]').val('');
                        loadPertanyaan(param);
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }

            var el_image = $('#gambar'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.gambar = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 50){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran File tidak boleh lebih dari 5 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
        })
    })
</script>
@endif

@if($update)
<script>
    $(document).ready(function(e){
        $(document).on('click', '.btn-detail', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/custom-landing-page/getData',
                type: "get",
                data: {
                    status_aktif: "ALL",
                    id: id,
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-update-data');
                    form.find('input[name=id]').val(data.id);
                    form.find('input[name=judul]').val(data.judul);
                    form.find('textarea[name=deskripsi]').val(data.deskripsi);
                    form.find('input[name=posisi]').val(data.kode_posisi);
                    
                    var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                 '<button type="submit" class="btn btn-warning btn-sm">Update</button>';
                    $('#detailFooter').html(footer)
                    $('#detailData').modal('show');
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });
        $(document).on('click', '.btn-detail-slider', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/slider/getData',
                type: "get",
                data: {
                    status_aktif: "ALL",
                    id: id,
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-update-data-slider');
                    form.find('input[name=id]').val(data.id);
                    form.find('input[name=judul]').val(data.judul);
                    form.find('textarea[name=keterangan]').val(data.keterangan);
                    var img = form.find('#slider_gambar_detail_view');
                    img.attr('src', '/images/slider/'+data.foto);
                    
                    var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                 '<button type="submit" class="btn btn-warning btn-sm">Update</button>';
                    $('#detailFooterSlider').html(footer)
                    $('#detailDataSlider').modal('show');
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });

        $(document).on('submit', '.form-update-data-slider', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id]').val(),
                url = '/web_api/slider/update/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                judul: ini.find('input[name=judul]').val(),
                keterangan: ini.find('textarea[name=keterangan]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#detailDataSlider').modal('hide');
                        $('#slider_gambar_detail').val('')
                        loadSlider(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            var el_image = $('#slider_gambar_detail'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.foto = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 10){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran Foto tidak boleh lebih dari 10 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
            
        });
        $(document).on('click', '.btn-status-aktif', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/custom-landing-page/status_aktif/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    loadThis(param)
                    successAlert(message);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
        $(document).on('click', '.btn-status-aktif-slider', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/slider/status_aktif/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    loadSlider(param)
                    successAlert(message);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });

        $(document).on('click', '.btn-status-aktif-pertanyaan', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/pertanyaan/status_aktif/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    loadPertanyaan(param)
                    successAlert(message);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
        $(document).on('submit', '.form-update-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id]').val(),
                url = '/web_api/custom-landing-page/update/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                judul: ini.find('input[name=judul]').val(),
                deskripsi: ini.find('textarea[name=deskripsi]').val(),
                posisi: ini.find('input[name=posisi]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#detailData').modal('hide');
                        $('#gambar_detail').val('')
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            var el_image = $('#gambar_detail'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.gambar = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 10){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran file tidak boleh lebih dari 5 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
        });

        $(document).on('click', '.btn-detail-pertanyaan', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/pertanyaan/getData',
                type: "get",
                data: {
                    status_aktif: "ALL",
                    id: id,
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-update-data-pertanyaan');
                    form.find('input[name=id]').val(data.id);
                    form.find('input[name=pertanyaan]').val(data.pertanyaan);
                    form.find('input[name=posisi]').val(data.posisi);
                    form.find('textarea[name=jawaban]').val(data.jawaban);
                   
                    
                    var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                 '<button type="submit" class="btn btn-warning btn-sm">Update</button>';
                    $('#detailFooterPertanyaan').html(footer)
                    $('#detailDataPertanyaan').modal('show');
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });

        $(document).on('submit', '.form-update-data-pertanyaan', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id]').val(),
                url = '/web_api/pertanyaan/update/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                pertanyaan: ini.find('input[name=pertanyaan]').val(),
                jawaban: ini.find('textarea[name=jawaban]').val(),
                posisi: ini.find('input[name=posisi]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#detailDataPertanyaan').modal('hide');
                        $('#pertanyaan').val('')
                        $('#jawaban').val('')
                        $('#posisi').val('')
                        loadPertanyaan(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            var el_image = $('#slider_gambar_detail'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.foto = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 10){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran Foto tidak boleh lebih dari 10 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
            
        });


    });


</script>
@endif
@endpush