@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">Ubah Konten</a> </li>
    </ul>
@endsection


@section('title-section', 'Ubah 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.update', $konten->id) }}" method="POST" autocomplete="off"
                        class="validate" id="form-content" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <div class="row form-row">
                                    <div class="col-md-6">
                                        <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->id == $konten->layanan_id ? 'selected' : '' }}>
                                                            {{ $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">{{ $konten->desc_layanan }}</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">{{ $konten->metadesc }}</textarea>
                                    </div>
                                </div>
                                <img src="{{ url('/') . Storage::url($konten->bg_header) }}" alt=""
                                    class="img-fluid" style="width: 150px">
                                <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" name="bg_header" type="file">
                                    </div>
                                </div>
                                @foreach ($paket as $key => $value)
                                    @if ($key + 1 == 1)
                                        <div class="paket-layout-3 add-paket-layout-3">
                                            <div class="form-group">
                                                <label class="form-label">Nama Paket</label>
                                                <input class="form-control" id="role" placeholder="Nama Paket"
                                                    name="nama_paket[]" value="{{ $value->nama_paket }}" type="text">
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <label class="form-label">Icon</label>
                                                        <select class="form-control icon-paket" name="icon[]"
                                                            onchange="showIcon(this)" data-icon="{{ $value->icon }}">
                                                            <option value="" selected>Pilih Icon</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <i class="preview-icon fa {{ $value->icon }} fs-2 mt-4"></i>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Harga Paket</label>
                                                <input class="form-control" id="role" placeholder="Harga Paket"
                                                    name="harga_paket[]" value="{{ $value->harga }}" type="number">
                                            </div>
                                            <button type="button" class="btn btn-primary" id="add-paket-layout-3"> Add more
                                                Paket</button>
                                        </div>
                                    @else
                                        <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" id="role"
                                                    placeholder="Nama Paket" name="nama_paket[]"
                                                    value="{{ $value->nama_paket }}" type="text">
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <label class="form-label">Icon</label>
                                                        <select class="form-control icon-paket" name="icon[]"
                                                            onchange="showIcon(this)" data-icon="{{ $value->icon }}">
                                                            <option value="" selected>Pilih Icon</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <i class="preview-icon fa {{ $value->icon }} fs-2 mt-4"></i>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Harga Paket</label>
                                                <input class="form-control harga-paket-layout-3" id="role"
                                                    placeholder="Harga Paket" name="harga_paket[]"
                                                    value="{{ $value->harga }}" type="number">
                                            </div>
                                            <button type="button" class="btn btn-danger" id="remove-paket-layout-3">
                                                Hapus
                                                Paket</button>
                                        </div>
                                    @endif
                                @endforeach
                                <div class="form-group mt-4">
                                    <label class="form-label">Kontak</label>
                                    <div class="form-group mt-4">
                                        <label class="form-label">Kontak</label>
                                        <select class="form-control" name="kontak">
                                            <option value="">Pilih Kontak</option>
                                            @foreach ($kontak as $data)
                                                <option value="{{ $data->id }}"
                                                    {{ $data->id == $konten->kontak_id ? 'selected' : '' }}>
                                                    {{ $data->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group mt-4">
                                    File Persyaratan saat ini. <a
                                        href="{{ url('/') . Storage::url($konten->file_syarat) }}">Klik Disini</a>
                                    <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>
                                @foreach ($faq as $key => $dataFAQ)
                                    @if ($key + 1 == 1)
                                        <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" value="{{ $dataFAQ->pertanyaan }}">
                                                        </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"
                                                                value="{{ $dataFAQ->jawaban }}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-primary" id="add-faq"> Add more
                                                    FAQ</button>
                                            </div>
                                        </div>
                                    @else
                                        <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" value="{{ $dataFAQ->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"
                                                            value="{{ $dataFAQ->jawaban }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger" id="remove-faq">Hapus
                                                FAQ</button>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="col-lg-6 col-12">
                                <img class="img-fluid" src="{{ asset('assets/img/layout/layout-3.png') }}"
                                    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 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>

    <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>
        $("#text-editor").summernote('disabled');

        $.getJSON("/assets/icon.json", function(data) {
            $.each(data, function(index, value) {
                $('[name="icon[]"]').each(function() {
                    let currentIcon = $(this).attr('data-icon');
                    if (currentIcon === value) {
                        $(this).append('<option value="' + value + '" selected>' + value +
                            '</option>');
                        $(this).change();
                    } else {
                        $(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');
        }

        // 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