@extends('layouts.app')

@section('title', 'Edit Konten')

@push('addon-style')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@endpush

@section('breadcrumb')
    <ul class="breadcrumb">
        <li>
            <p>DASHBOARD</p>
        </li>
        <li><a href="#" class="active">Tambah Konten</a> </li>
    </ul>
@endsection


@section('title-section', 'Tambah Konten')

@section('content')
    <div class="row">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="grid simple form-grid">
                <div class="grid-title no-border">
                </div>
                <div class="grid-body no-border">
                    <form action="{{ route('edit-konten.store') }}" method="POST" autocomplete="off" class="validate"
                        id="form-content" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <div class="form-group mb-4">
                                    <label class="form-label">Pilih Layout Tampilan</label>
                                    <div class="gap-2 ">
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="layout"
                                                value="Layout 1" />
                                            <label for="yes" class="mt-2">Layout 1</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="layout"
                                                value="Layout 2" />
                                            <label for="no">Layout 2</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="layout"
                                                value="Layout 3" />
                                            <label for="no">Layout 3</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row form-row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Layanan</label>
                                            <div class="input-with-icon right">
                                                <i class=""></i>
                                                <select name="layanan" class="select2 form-control"
                                                    data-init-plugin="select2">
                                                    <option value="">
                                                        Pilih Layanan
                                                    </option>
                                                    @foreach ($layanan as $data)
                                                        <option value="{{ $data->id }}">
                                                            {{ $data->nama_layanan }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Deskripsi Layanan</label>
                                    <div class="form-floating">
                                        <textarea class="form-control" name="desc_layanan" id="metadesc"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Metadesc</label>
                                    <div class="form-floating">
                                        <textarea class="form-control" name="metadesc" id="metadesc"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="form-group">
                                        <span class="text-danger">*File harus berformat: JPEG/JPG/PNG</span> <br>
                                        <span class="text-danger">*File size max 3MB</span> <br>
                                        <label for="" class="form-label">Background Header</label>
                                        <input class="form-control" id="bg-header" placeholder="Password Admin"
                                            name="bg_header" type="file">
                                    </div>
                                </div>
                                {{-- Form input layout 1 --}}
                                <div id="layout-1" class="d-none">
                                    <div class="form-group">
                                        <span class="text-danger">*File harus berformat: JPEG/JPG/PNG</span> <br>
                                        <span class="text-danger">*File size max 3MB</span> <br>
                                        <label for="" class="form-label">Gambar Konten</label>
                                        <input class="form-control" disabled id="bg-header" placeholder="Password Admin"
                                            name="gambar_konten" type="file">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">Konten</label>
                                        <div class="form-floating">
                                            <textarea id="text-editor" name="konten"></textarea>
                                        </div>
                                    </div>
                                    <div class="paket-layout-1 add-paket-layout-1">
                                        <div class="form-group">
                                            <label class="form-label">Nama Paket</label>
                                            <input class="form-control" id="role" placeholder="Nama Paket"
                                                name="nama_paket[]" disabled type="text">
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="form-label">Icon</label>
                                                    <select name="icon[]" disabled
                                                        class="select2 form-control icon-paket" data-init-plugin="select2"
                                                        onchange="showIcon(this)">
                                                        <option value="">
                                                            Pilih Icon
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <i class="preview-icon"></i>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Benefit</label>
                                            <br>
                                            <span class="text-danger">*Pisahkan menggunakan titik koma (;) tanpa spasi.
                                                Contoh:
                                                tes 1;tes 2;tes 3</span>
                                            <br>
                                            <span class="text-danger">*Benefit dapat dikosongkan</span>
                                            <input class="form-control" disabled id="role"
                                                placeholder="Benefit Paket" name="benefit_paket[]" type="text">
                                        </div>
                                        <button type="button" class="btn btn-primary" id="add-paket-layout-1"> Add more
                                            Paket</button>
                                    </div>
                                </div>
                                {{-- End input layout 1 --}}

                                {{-- Form input layout 2 --}}
                                <div id="layout-2" class="d-none">
                                    <div class="paket-layout-2 add-paket-layout-2">
                                        <div class="form-group">
                                            <label class="form-label">Nama Paket</label>
                                            <input class="form-control" disabled id="role" placeholder="Nama Paket"
                                                name="nama_paket[]" type="text">
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="form-label">Icon</label>
                                                    <select name="icon[]" disabled
                                                        class="select2 form-control icon-paket" data-init-plugin="select2"
                                                        onchange="showIcon(this)">
                                                        <option value="">
                                                            Pilih Icon
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <i class="preview-icon"></i>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Benefit</label>
                                            <br>
                                            <span class="text-danger">*Pisahkan menggunakan titik koma (;) tanpa spasi.
                                                Contoh:
                                                tes 1;tes 2;tes 3</span>
                                            <br>
                                            <span class="text-danger">*Benefit dapat dikosongkan</span>
                                            <input disabled class="form-control" id="role"
                                                placeholder="Benefit Paket" name="benefit_paket[]" type="text">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Harga Paket</label>
                                            <input disabled class="form-control" id="role" placeholder="Harga Paket"
                                                name="harga_paket[]" type="number">
                                        </div>
                                        <button type="button" class="btn btn-primary" id="add-paket-layout-2"> Add more
                                            Paket</button>
                                    </div>
                                </div>
                                {{-- End Form input layout 2 --}}

                                {{-- Form input layout 3 --}}
                                <div id="layout-3" class="d-none">
                                    <div class="paket-layout-3 add-paket-layout-3">
                                        <div class="form-group">
                                            <label class="form-label">Nama Paket</label>
                                            <input disabled class="form-control" id="role" placeholder="Nama Paket"
                                                name="nama_paket[]" type="text">
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="form-label">Icon</label>
                                                    <select name="icon[]" disabled
                                                        class="select2 form-control icon-paket" data-init-plugin="select2"
                                                        onchange="showIcon(this)">
                                                        <option value="">
                                                            Pilih Icon
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <i class="preview-icon"></i>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Harga Paket</label>
                                            <input disabled class="form-control" id="role" placeholder="Harga Paket"
                                                name="harga_paket[]" type="number">
                                        </div>
                                        <button type="button" class="btn btn-primary" id="add-paket-layout-3"> Add more
                                            Paket</button>
                                    </div>
                                </div>
                                {{-- End form input layout 3 --}}
                                <div class="form-group mt-4">
                                    <label class="form-label">Kontak</label>
                                    <select class="form-control" name="kontak">
                                        <option value="" selected>Pilih Kontak</option>
                                        @foreach ($kontak as $row)
                                            <option value="{{ $row->id }}">{{ $row->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mt-4">
                                    <div class="form-group">
                                        <span class="text-danger">*File harus berformat: PDF/DOCX</span> <br>
                                        <label for="" class="form-label">File Persyaratan</label>
                                        <input class="form-control" id="bg-header" placeholder="Password Admin"
                                            name="file_persyaratan" type="file">
                                    </div>
                                </div>
                                {{-- FAQ --}}
                                <div class="form-group mt-4">
                                    <div class="faq add-faq">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label">Pertanyaan</label>
                                                    <input class="form-control" id="role" placeholder="Pertanyaan"
                                                        name="pertanyaan[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label">Jawaban</label>
                                                    <input class="form-control" id="role" placeholder="Jawaban"
                                                        name="jawaban[]" type="text">
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary" id="add-faq"> Add more
                                            FAQ</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <img class="img-fluid" id="layout-img" alt="" id="layout-img">
                            </div>
                        </div>
                        <div class="form-actions">
                            <div class="pull-left">
                                <button class="btn btn-success btn-cons" type="submit"><i
                                        class="icon-ok"></i>Simpan</button>
                                <button type="reset" class="btn btn-warning btn-cons">Reset</button>
                                <a href="{{ route('edit-konten.index') }}" class="btn btn-danger btn-cons">Kembali</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Untuk paket layout 1 --}}
    <div class="d-none new-paket-layout-1">
        <div class="paket-layout-1 mt-4">
            <div class="form-group">
                <label class="form-label">Nama Paket</label>
                <input class="form-control nama-paket-layout-1" id="role" disabled placeholder="Nama Paket"
                    name="nama_paket[]" type="text">
            </div>
            <div class="icon-paket-layout-1">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="form-label">Icon</label>
                            <select class="select2 form-control icon-paket form-icon-paket-layout-1" disabled
                                name="icon[]" onchange="showIcon(this)">
                                <option value="" selected>Pilih Icon</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                        <i class="preview-icon"></i>
                    </div>
                </div>
            </div>
            <div class="form-benefit add-form-benefit">
                <div class="form-group">
                    <label class="form-label">Benefit</label>
                    <input class="form-control benefit-layout-1" id="role" disabled placeholder="Benefit Paket"
                        name="benefit_paket[]" type="text">
                </div>
            </div>
            <button type="button" class="btn btn-danger" id="remove-paket-layout-1"> Hapus
                Paket</button>
        </div>
    </div>

    {{-- Untuk paket layout 2 --}}
    <div class="d-none new-paket-layout-2">
        <div class="paket-layout-2 mt-4">
            <div class="form-group">
                <label class="form-label">Nama Paket</label>
                <input class="form-control nama-paket-layout-2" disabled id="role" disabled placeholder="Nama Paket"
                    name="nama_paket[]" type="text">
            </div>
            <div class="icon-paket-layout-2">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="form-label">Icon</label>
                            <select class="select2 form-control icon-paket form-icon-paket-layout-2" disabled
                                name="icon[]" onchange="showIcon(this)">
                                <option value="" selected>Pilih Icon</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                        <i class="preview-icon"></i>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Benefit</label>
                <br>
                <span class="text-danger">*Pisahkan menggunakan titik koma (;) tanpa spasi. Contoh:
                    tes 1;tes 2;tes 3</span>
                <br>
                <span class="text-danger">*Benefit dapat dikosongkan</span>
                <input class="form-control benefit-paket-layout-2" disabled id="role" placeholder="Benefit Paket"
                    name="benefit_paket[]" type="text">
            </div>
            <div class="form-group">
                <label class="form-label">Harga Paket</label>
                <input class="form-control harga-paket-layout-2" disabled id="role" placeholder="Harga Paket"
                    name="harga_paket[]" type="number">
            </div>
            <button type="button" class="btn btn-danger" id="remove-paket-layout-2"> Hapus
                Paket</button>
        </div>
    </div>

    {{-- Untuk paket layout 3 --}}
    <div class="d-none new-paket-layout-3 ">
        <div class="paket-layout-3 mt-4">
            <div class="form-group">
                <label class="form-label">Nama Paket</label>
                <input class="form-control nama-paket-layout-3" disabled id="role" disabled placeholder="Nama Paket"
                    name="nama_paket[]" type="text">
            </div>
            <div class="icon-paket-layout-3">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="form-label">Icon</label>
                            <select class="select2 form-control icon-paket form-icon-paket-layout-3" disabled
                                name="icon[]" onchange="showIcon(this)">
                                <option value="" selected>Pilih Icon</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                        <i class="preview-icon"></i>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Harga Paket</label>
                <input class="form-control harga-paket-layout-3" disabled id="role" disabled
                    placeholder="Harga Paket" name="harga_paket[]" type="number">
            </div>
            <button type="button" class="btn btn-danger" id="remove-paket-layout-3"> Hapus
                Paket</button>
        </div>
    </div>

    {{-- FAQ --}}
    <div class="d-none new-faq">
        <div class="faq mt-4">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="form-label">Pertanyaan</label>
                        <input class="form-control" id="role" placeholder="Pertanyaan" name="pertanyaan[]"
                            type="text">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label class="form-label">Jawaban</label>
                        <input class="form-control" id="role" placeholder="Jawaban" name="jawaban[]"
                            type="text">
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-danger" id="remove-faq">Hapus FAQ</button>
        </div>
    </div>
@endsection

@push('addon-script')
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    <script>
        // Menampilkan form input sesuai dengan layout yang dipilih
        $('#form-content input').on('change', function() {
            var valueLayout = $('input[type=radio]:checked', '#form-content').val();
            switch (valueLayout) {
                case 'Layout 1':
                    $('#layout-img').attr('src', '{{ asset('assets/img/layout/layout-1.png') }}');
                    $("#layout-1").removeClass('d-none');
                    $("#layout-2").addClass('d-none');
                    $("#layout-3").addClass('d-none');

                    $("#layout-1").find('input').each(function() {
                        $(this).removeAttr('disabled');
                    });
                    $("#layout-1").find('select').each(function() {
                        $(this).removeAttr('disabled');
                    });
                    $("#layout-1").find('textarea').each(function() {
                        $(this).removeAttr('disabled');
                    });
                    $("#text-editor").summernote("enable");
                    $("#test-editor").removeAttr('disabled');

                    $("#layout-2").find('input').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-2").find('select').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });

                    $("#layout-3").find('input').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-3").find('select').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });

                    break;
                case 'Layout 2':
                    $('#layout-img').attr('src', '{{ asset('assets/img/layout/layout-2.png') }}');
                    $("#layout-1").addClass('d-none');
                    $("#layout-2").removeClass('d-none');
                    $("#layout-3").addClass('d-none');

                    $("#layout-1").find('input').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-1").find('select').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-1").find('textarea').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });

                    $("#layout-2").find('input').each(function() {
                        $(this).removeAttr('disabled');
                    });
                    $("#layout-2").find('select').each(function() {
                        $(this).removeAttr('disabled');
                    });

                    $("#layout-3").find('input').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-3").find('select').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });

                    break;
                case 'Layout 3':
                    $('#layout-img').attr('src', '{{ asset('assets/img/layout/layout-3.png') }}');
                    $("#layout-1").addClass('d-none');
                    $("#layout-2").addClass('d-none');
                    $("#layout-3").removeClass('d-none');

                    $("#layout-1").find('input').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-1").find('select').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-1").find('textarea').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });

                    $("#layout-2").find('input').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });
                    $("#layout-2").find('select').each(function() {
                        $(this).attr('disabled', 'disabled');
                    });

                    $("#layout-3").find('input').each(function() {
                        $(this).removeAttr('disabled');
                    });
                    $("#layout-3").find('select').each(function() {
                        $(this).removeAttr('disabled');
                    });
                    break;
                default:
                    console.log('Error')
                    break;
            }
        });
        // Membuat pilihan icon dan menampilkan yang dipilih
        $.getJSON("/assets/icon.json", function(data) {
            $.each(data, function(index, value) {
                $('select.icon-paket').each(function() {
                    $(this).append('<option value="' + value + '">' + value + '</option>');
                });
            });
        })

        function showIcon(e) {
            var icon = $(e).val();
            var parent = $(e).parent().parent().parent();
            parent.children('.col-6').children('.preview-icon').attr("class", "preview-icon").addClass('fa ' + icon +
                ' fs-2 mt-4');
        }

        $("#icon-paket").on('change', function() {
            var icon = $(this).val();
            $('#preview-icon').attr('class', 'fa ' + icon + ' fs-2' + ' mt-4');
        });

        // Add paket layout 1
        $("#add-paket-layout-1").click(function() {

            $('.nama-paket-layout-1').removeAttr('disabled');
            $('.form-icon-paket-layout-1').removeAttr('disabled');
            $('.benefit-layout-1').removeAttr('disabled');

            setTimeout(function() {
                if (!$('select.form-icon-paket-layout-1').first().data('select2')) {
                    $('select.form-icon-paket-layout-1').first().select2();
                    $.getJSON("/assets/icon.json", function(data) {
                        $.each(data, function(index, value) {
                            $('select.form-icon-paket-layout-1').first().append(
                                '<option value="' +
                                value + '">' +
                                value + '</option>');
                        });
                    })
                }
            }, 0);

            var html = $(".new-paket-layout-1").html();
            $(".add-paket-layout-1").after(html);

        });

        // saat tombol remove dklik control group akan dihapus
        $("body").on("click", "#remove-paket-layout-1", function() {
            $(this).parents(".paket-layout-1").remove();
        });
        // Akhir paket layout 1

        // Add paket layout 2
        $("#add-paket-layout-2").click(function() {
            $('.nama-paket-layout-2').removeAttr('disabled');
            $('.form-icon-paket-layout-2').removeAttr('disabled');
            $('.benefit-paket-layout-2').removeAttr('disabled');
            $('.harga-paket-layout-2').removeAttr('disabled');

            setTimeout(function() {
                if (!$('select.form-icon-paket-layout-2').first().data('select2')) {
                    $('select.form-icon-paket-layout-2').first().select2();
                    $.getJSON("/assets/icon.json", function(data) {
                        $.each(data, function(index, value) {
                            $('select.form-icon-paket-layout-2').first().append(
                                '<option value="' +
                                value + '">' +
                                value + '</option>');
                        });
                    })
                }
            }, 0);

            var html = $(".new-paket-layout-2").html();
            $(".add-paket-layout-2").after(html);
        });

        // saat tombol remove dklik control group akan dihapus
        $("body").on("click", "#remove-paket-layout-2", function() {
            $(this).parents(".paket-layout-2").remove();
        });
        // Akhir paket layout 2

        // Add paket layout 3
        $("#add-paket-layout-3").click(function() {
            $(".nama-paket-layout-3").removeAttr('disabled');
            $(".form-icon-paket-layout-3").removeAttr('disabled');
            $(".harga-paket-layout-3").removeAttr('disabled');

            setTimeout(function() {
                if (!$('select.form-icon-paket-layout-3').first().data('select2')) {
                    $('select.form-icon-paket-layout-3').first().select2();
                    $.getJSON("/assets/icon.json", function(data) {
                        $.each(data, function(index, value) {
                            $('select.form-icon-paket-layout-3').first().append(
                                '<option value="' +
                                value + '">' +
                                value + '</option>');
                        });
                    })
                }
            }, 0);

            var html = $(".new-paket-layout-3").html();
            $(".add-paket-layout-3").after(html);
        });

        // saat tombol remove dklik control group akan dihapus
        $("body").on("click", "#remove-paket-layout-3", function() {
            $(this).parents(".paket-layout-3").remove();
        });
        // Akhir paket layout 3

        $("#add-faq").click(function() {
            var html = $(".new-faq").html();
            $(".add-faq").after(html);
        });

        $("body").on("click", "#remove-faq", function() {
            $(this).parents(".faq").remove();
        });
    </script>
@endpush