@extends('layouts.layout')

@section('title', $title_site)

@section('body_class', 'nav-md')

@section('css')
<link rel="stylesheet" href="{{ asset('/css/dashboard.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<style type="text/css">
.centered-title {
    text-align: center;
}

#image_reward {
    width: 200px;
}

.label-with-margin {
    margin-bottom: 20px;
}

.baner-active-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}

.baner-label {
    margin-right: 100px;
}

.form-row button {
    border-radius: 12px;
}

#image-preview-baner1 {
    width: 100px;
    height: 100px;
}

#image-preview-baner2 {
    width: 100px;
    height: 100px;
}

#image-preview-baner3 {
    width: 100px;
    height: 100px;
}
#image-preview-social-media {
    width: 100px;
    height: 100px;
}

</style>
@yield('head')
@endsection

@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            @include("pages.lakuhoki.inc.inc_title", ['title_page' => $title_page])

            {{-- {{ dd($data) }} --}}
            <div class="row">
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <div>
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#intro" aria-controls="intro" role="tab"
                                            data-toggle="tab"></i> Introduction <span class="badge" style="background: #f44336;"></span></a></li>
                                    <li role="presentation"><a href="#no2" aria-controls="no2" role="tab" data-toggle="tab"></i> Deposit <span
                                            class="badge" style="background: #f44336;"></span></a></li>
                                    <li role="presentation"><a href="#no3" aria-controls="no3" role="tab" data-toggle="tab"> Social Media
                                            <span class="badge" style="background: #f44336;"></span></a></li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <!-- Tab 1: Introduction -->
                                    <div role="tabpanel introduction" class="tab-pane active" id="intro">
                                        <form method="POST" action="/lakuhoki/configuration/kv_upload" enctype="multipart/form-data">
                                            {{ csrf_field() }}

                                            <div class="row" style="margin-top: 20px ">

                                              <div class="col-12 col-md-6 col-lg-6">
                                                <p>Message</p>
                                                <textarea rows="10" name="message" id="introduction"
                                                style="width: 762px; height: 254px;">
                                                @if(isset($data['kv_idsm']->data->kv_introduction))
                                                {{ $data['kv_idsm']->data->kv_introduction->description }}
                                                @endif</textarea>
                                              </div>

                                              <div class="col-lg-6">

                                                    <div class="row" style="display: flex ; align-items: center ;">

                                                      <div class="col-lg-6">

                                                        <div class="row">
                                                            <div class="row" style="justify-content: space-between ; display: flex ;">
                                                                    <span class="col-lg-6">Banner 1</span>
                                                              <input  class="col-lg-4" type="checkbox" name="" id="">
                                                            </div>

                                                            <div class="row " style="margin-top: 10px ; justify-content: space-between ; display: flex ;">
                                                                <input class="col-lg-10" style="border: 1px solid black;  padding: 10px 5px ;"  type="file">
                                                            </div>

                                                        </div>

                                                      </div>

                                                      <div class="col-lg-6">
                                                        <img  id="image-preview-baner2" src="/images/image_placeholder.png">
                                                      </div>
                                                                                             

                                                    </div>

                                                    <div class="row" style="margin-top: 50px ; display: flex ; align-items: center ;">

                                                        <div class="col-lg-6">
  
                                                          <div class="row">
                                                              <div class="row" style="justify-content: space-between ; display: flex ;">
                                                                      <span class="col-lg-6">Banner 1</span>
                                                                <input  class="col-lg-4" type="checkbox" name="" id="">
                                                              </div>
                                                              <div class="row " style="margin-top: 10px ; justify-content: space-between ; display: flex ;">
                                                                    <input class="col-lg-10" style="border: 1px solid black;  padding: 10px 5px ;"  type="file">
                                                                </div>
                                                            </div>
  
                                                        </div>
  
                                                        <div class="col-lg-6">
                                                          <img  id="image-preview-baner2" src="/images/image_placeholder.png">
                                                        </div>
                                                                                               
  
                                                    </div>

                                                    <div class="row" style="margin-top: 50px ; display: flex ; align-items: center ;">

                                                        <div class="col-lg-6">
  
                                                          <div class="row">
                                                              <div class="row" style="justify-content: space-between ; display: flex ;">
                                                                      <span class="col-lg-6">Banner 3</span>
                                                                <input  class="col-lg-4" type="checkbox" name="" id="">
                                                              </div>
                                                              <div class="row " style="margin-top: 10px ; justify-content: space-between ; display: flex ;">
                                                                    <input class="col-lg-10" style="border: 1px solid black;  padding: 10px 5px ;"  type="file">
                                                                </div>
                                                            </div>
  
                                                        </div>
  
                                                        <div class="col-lg-6">
                                                          <img  id="image-preview-baner2" src="/images/image_placeholder.png">
                                                        </div>
                                                                                               
  
                                                    </div>

                                                    {{-- slide 3 --}}

                                                    <div class="col-lg-12" style="margin-top: 50px ;">

                                                        <div class="">
  
                                                              <div class="row">
                                                                      <span class="col-lg-6">Banner 3</span>
                                                              </div>

                                                              <div class="row">
                                                                    <input class="col-lg-10" style="border: 1px solid black;  padding: 10px 5px ;"  type="file">
                                                                </div>
                                                        </div>
  
                                                        <div style="margin-top: 12px">
                                                          <img id="image-preview-baner2" src="/images/image_placeholder.png">
                                                        </div>
                                                                                               
  
                                                    </div>

                                                    

                                                </div>
                                            

                                            </div>


                                            {{-- <div class="form-row">
                                                <div class="form-group col-md-6" style="margin-top: 10px">
                                                    <p>Message</p>
                                                    <p><textarea rows="10" name="message" id="introduction"
                                                            style="width: 762px; height: 254px;">
                                                            @if(isset($data['kv_idsm']->data->kv_introduction))
                                                            {{ $data['kv_idsm']->data->kv_introduction->description }}
                                                            @endif</textarea>
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="form-row">

                                                <div class="form-group col-lg-2" style="margin-top: 30px">
                                                    <label class="control-label baner-label">
                                                        <span class="form-checklabel">Baner 1</span>
                                                    </label>
                                                    <label>
                                                        <input class="form-checklabel-10" type="checkbox" name="image_active1" value="1">
                                                        Active
                                                    </label>
                                                    <div>
                                                        <input style="width: 85%" type="file" class="form-control" name="image_1"
                                                            accept="image/jpeg,image/png">
                                                    </div>
                                               </div>


                                                <div class="form-group col-md-3" style="margin-top: 10px">
                                                    <div class="col-xs-12 col-sm-5">
                                                        @if(isset($data['kv_idsm']->data->kv_introduction->images[0]))
                                                            @if($data['kv_idsm']->data->kv_introduction->images[0]->image)
                                                                <img width="100px" id="image-preview-baner1" src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/lakuhoki/kv/' . $data['kv_idsm']->data->kv_introduction->images[0]->image }}">
                                                            @else
                                                                <img width="100px" id="image-preview-baner1" src="/images/image_placeholder.png">
                                                            @endif
                                                        @else
                                                            <img width="100px" id="image-preview-baner1" src="/images/image_placeholder.png">
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-row">

                                                    <div class="form-group col-md-2">
                                                        <label class="control-label baner-label">
                                                            <span class="form-checklabel">Baner 2</span>
                                                        </label>
                                                        <label>
                                                            <input class="form-checklabel-10" type="checkbox" name="image_active2" value="1">
                                                            Active
                                                        </label>
                                                        <div>
                                                            <input style="width: 85%" type="file" class="form-control" name="image_2"
                                                                accept="image/jpeg,image/png">
                                                        </div>
                                                    </div>

                                                    <div class="form-group col-md-3">
                                                        <div class="col-xs-12 col-sm-5">
                                                            @if(isset($data['kv_idsm']->data->kv_introduction->images[1]))
                                                                @if($data['kv_idsm']->data->kv_introduction->images[1]->image)
                                                                <img width="100px" id="image-preview-baner2" src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/lakuhoki/kv/' . $data['kv_idsm']->data->kv_introduction->images[1]->image }}">
                                                                @else
                                                                <img width="100px" id="image-preview-baner2" src="/images/image_placeholder.png">
                                                                @endif
                                                            @else
                                                            <img width="100px" id="image-preview-baner2" src="/images/image_placeholder.png">
                                                            @endif
                                                        </div>
                                                    </div>

                                            </div>

                                            <div class="form-row">
                                                
                                                <div class="form-group col-md-2">
                                                    <label class="control-label baner-label">
                                                        <span class="form-checklabel">Baner 3</span>
                                                    </label>
                                                    <label>
                                                        <input class="form-checklabel-10" type="checkbox" name="image_active3" value="1">
                                                        Active
                                                    </label>
                                                    <div>
                                                        <input style="width: 85%" type="file" class="form-control" name="image_3"
                                                            accept="image/jpeg,image/png">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <div class="col-xs-12 col-sm-5">
                                                        @if(isset($data['kv_idsm']->data->kv_introduction->images[2]))
                                                            @if($data['kv_idsm']->data->kv_introduction->images[2]->image)
                                                            <img width="100px" id="image-preview-baner3" src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/lakuhoki/kv/' . $data['kv_idsm']->data->kv_introduction->images[2]->image }}">
                                                            @else
                                                            <img width="100px" id="image-preview-baner3" src="/images/image_placeholder.png">
                                                            @endif
                                                        @else
                                                        <img width="100px" id="image-preview-baner3" src="/images/image_placeholder.png">
                                                        @endif
                                                    </div>
                                                </div>

                                            </div> --}}

                                            <div class="form-row">
                                                <div class="form-group col-md-12">
                                                    <button type="button" class="btn btn-warning btn-cancel"
                                                        style="margin-top: 50px">Cancel</button>
                                                    <button type="submit" class="btn btn-primary" style="margin-top: 50px">Save</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                    <!-- Tab 2: Deposit -->
                                    <div role="tabpanel" class="tab-pane" id="no2">
                                        <div style="margin-top: 10px">
                                            <form method="POST" action="/lakuhoki/configuration/submit_deposit" id="myForm"
                                                enctype="form-data">
                                                {{ csrf_field() }}
                                                <p>Message</p>
                                                <p>
                                                    <textarea rows="10" name="message" id="deposit">
                                                        @if(isset($data['kv_idsm']->data->kv_deposit))
                                                            {{ $data['kv_idsm']->data->kv_deposit->description }}
                                                        @endif
                                                    </textarea>
                                                </p>
                                                <div class="form-row">
                                                    <button type="button" class="btn btn-warning btn-cancel">Cancel</button>
                                                    <button type="button" class="btn btn-primary" onclick="saveDataAndStayOnTab()" style="margin-left: 10px;">Save</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- Tab 3: Social Media -->
                                    <div role="tabpanel" class="tab-pane" id="no3">
                                        <form method="POST" action="/lakuhoki/configuration/social_media" enctype="multipart/form-data">
                                            {{ csrf_field() }}
                                            <div class="form-row">
                                                <div class="form-group col-md-6" style="margin-top: 10px">
                                                    <p>Header Message</p>
                                                    <p><textarea rows="10" name="header_message" id="header" style="width: 100%; height: 166px;">
                                                        @if(isset($data['kv_idsm']->data->kv_social_media))
                                                            {{ $data['kv_idsm']->data->kv_social_media->header }}
                                                        @endif
                                                    </textarea></p>
                                                </div>
                                                <div class="form-group col-md-2" style="margin-top: 15px">
                                                    <label class="control-label baner-label">
                                                        <span class="form-checklabel">Key Visual</span>
                                                    </label>
                                                    <div>
                                                        <input style="width: 85%" type="file" class="form-control" name="image" accept="image/jpeg,image/png">
                                                    </div>
                                                    <div class="form-group col-md-3" style="margin-top: 10px">
                                                        <div class="col-xs-12 col-sm-5">
                                                            <img width="100px" id="image-preview-social-media" src="/images/image_placeholder.png"> 
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-8" style="margin-top: 10px">
                                                    <p>Body Message</p>
                                                    <p><textarea rows="10" name="body_message" id="body" style="width: 772px; height: 168px;">
                                                        @if(isset($data['kv_idsm']->data->kv_social_media))
                                                            {{ $data['kv_idsm']->data->kv_social_media->body }}
                                                        @endif
                                                    </textarea></p>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-12">
                                                    <button type="button" class="btn btn-warning btn-cancel" style="margin-top: 50px">Cancel</button>
                                                    <button type="submit" class="btn btn-primary" style="margin-top: 50px">Save</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('pages.lakuhoki.probability.kv_history')
        </div>
    </div>
</div>

<script>
// tabel 1  introduction introduction
$(document).ready(function() {
    $('#introduction').summernote({
        height: "300px",
        fontnames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript', 'fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['codeview', ['codeview']],
            ['fullscreen', ['fullscreen']],
        ],
        lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0', '5.0', '6.0', '7.0', '8.0'],
        placeholder: 'Write here...'
    });
});

// show preview image 1 - 3 
$(document).ready(function () {
    $('input[name="image_1"]').change(function () {
        var file = this.files[0];
        var imageUrl = URL.createObjectURL(file);
        $('#image-preview-baner1').attr('src', imageUrl);
    });
});

$(document).ready(function () {
    $('input[name="image_2"]').change(function () {
        var file = this.files[0];
        var imageUrl = URL.createObjectURL(file);
        $('#image-preview-baner2').attr('src', imageUrl);
    });

});

$(document).ready(function () {
    $('input[name="image_3"]').change(function () {
        var file = this.files[0];
        var imageUrl = URL.createObjectURL(file)
        $('#image-preview-baner3').attr('src', imageUrl);
    });

});

$(document).ready(function () {
    $('input[name="image"]').change(function () {
        var file = this.files[0];
        var imageUrl = URL.createObjectURL(file)
        $('#image-preview-social-media').attr('src', imageUrl);
    });

});

// tabel 2 deposit
function switchToTab(tabId) {
            $('.tab-pane').removeClass('active');
            $('#' + tabId).addClass('active');
            window.location.hash = tabId;
        }

        function saveDataAndStayOnTab() {
            event.preventDefault();
            $.ajax({
                url: '/lakuhoki/configuration/submit_deposit',
                method: 'POST',
                data: $('#myForm').serialize(),
            })
            .done(function(response) {
                if (response.success) {
                    Swal.fire({
                        position: 'top-end',
                        icon: 'success',
                        title: 'Your work has been saved',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Terjadi kesalahan. Data tidak dapat disimpan.'
                    });
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR, textStatus, errorThrown);
                    Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Terjadi kesalahan saat mengirim permintaan.'
                });
            });
        }

        $(document).ready(function () {
            $('#deposit').summernote({
                height: "300px",
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['codeview', ['codeview']],
                    ['fullscreen', ['fullscreen']],
                ],
                lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0', '5.0', '6.0', '7.0', '8.0'],
                placeholder: 'Write here...'
            });
            var urlHash = window.location.hash;
            if (urlHash) {
                switchToTab(urlHash.substring(1));
            }
        });

// tabel 3 social media header message
$(document).ready(function() {
    $('#header').summernote({
        height: "150px",
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['codeview', ['codeview']],
            ['fullscreen', ['fullscreen']],
        ],
        lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0', '5.0', '6.0', '7.0', '8.0'],
        placeholder: 'Write here...'
    });
});

// tabel 3 social media body message
$(document).ready(function() {
    $('#body').summernote({
        height: "150px",
        width: "780px",
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['codeview', ['codeview']],
            ['fullscreen', ['fullscreen']],
        ],
        lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0', '5.0', '6.0', '7.0', '8.0'],
        placeholder: 'Write here...'
    });
});

// Tombol Cancel
$('.btn-cancel').click(function () {
        var tabId = $(this).closest('.tab-pane').attr('id');
        var textAreaId = tabId === 'intro' ? 'introduction' : tabId === 'no2' ? 'deposit' : 'body';
        $('#' + textAreaId).summernote('reset');
        if (tabId === 'intro') {
            $('#image-preview-baner1').attr('src', '/images/image_placeholder.png');
            $('#image-preview-baner2').attr('src', '/images/image_placeholder.png');
            $('#image-preview-baner3').attr('src', '/images/image_placeholder.png');
            $('#image-preview-social-media').attr('src', '/images/image_placeholder.png');
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection