@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Ubah Pengaturan Agreement
                    </h2>
                    <div class="text-muted mt-1">Ubah pengaturan agreement di sistem</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.agreements.index') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">

            <form class="card" action="{{ route('admin.agreements.update', ['agreement' => $agreement->id]) }}"
                method="post">
                @csrf
                @method('PUT')

                <div class="card-header">
                    <h3 class="card-title">Informasi Pengaturan Agreement</h3>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="col-md-4 col-xl-4">

                            <div class="mb-3">
                                <div class="form-label required">Nama</div>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                    name="name" placeholder="Masukkan nama agreement" required
                                    value="{{ $agreement->name }}">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>

                        <div class="col-md-4 col-xl-4">

                            <div class="mb-3">
                                <div class="form-label required">Kategori</div>
                                <select class="form-select" name="category" required>
                                    <option value="lisensi" {{ $agreement->category == 'lisensi' ? 'selected' : '' }}>
                                        Lisensi</option>
                                    <option value="distribusi" {{ $agreement->category == 'distribusi' ? 'selected' : '' }}>
                                        Distribusi</option>
                                    <option value="penggunaan" {{ $agreement->category == 'penggunaan' ? 'selected' : '' }}>
                                        Penggunaan</option>
                                    <option value="umum" {{ $agreement->category == 'umum' ? 'selected' : '' }}>Umum
                                    </option>
                                    <option value="lainnya" {{ $agreement->category == 'lainnya' ? 'selected' : '' }}>
                                        Lainnya</option>
                                </select>

                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>

                        <div class="col-md-2 col-xl-2">

                            <div class="d-flex align-items-center" style="">

                                <div class="mb-3">
                                    <div class="form-label">&nbsp;</div>

                                    <!-- Kirim nilai default 0 jika checkbox tidak dicentang -->
                                    <input type="hidden" name="is_active" value="0">

                                    <label class="form-check pt-2">
                                        <input class="form-check-input border-danger" type="checkbox" name="is_active"
                                            value="1" {{ $agreement->is_active ? 'checked' : '' }}>
                                        <span class="form-check-label">Aktif</span>
                                    </label>
                                </div>

                            </div>


                        </div>
                        <div class="col-md-2 col-xl-2">

                            <div class="my-3 w-100 d-flex justify-content-end">
                                <div>
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#contentModal">
                                        <span class="me-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
                                            </svg>
                                        </span>
                                        Konten</button>
                                </div>
                            </div>

                        </div>



                    </div>

                    <div class="row">
                        <div class="col">



                            <div class="table-responsive mb-3">

                                @php
                                    use Illuminate\Support\Str;
                                @endphp

                                <table id="contentTable" class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Urutan</th>
                                            <th scope="col">Tipe</th>
                                            <th scope="col">Konten</th>
                                            <th scope="col">Wajib</th>
                                            <th scope="col">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="agreementBody" data-lastno="{{ $lastno }}">

                                        @foreach ($agreement->agreementItems as $item)
                                            <tr id="row-agreement-{{ $item->id }}" data-row="{{ $item->id }}">
                                                <td data-value="{{ $item->sort_order }}" scope="row">
                                                    {{ $item->sort_order }}
                                                    <input type="hidden" class="row-sort-order-{{ $item->id }}"
                                                        name="row_sort_order[]" value="{{ $item->sort_order }}" />
                                                </td>
                                                <td>
                                                    {{ $item->type }}
                                                    <input type="hidden" class="row-type-{{ $item->id }}"
                                                        name="row_type[]" value="{{ $item->type }}" />
                                                </td>
                                                <td style="width:60%">
                                                    <div>
                                                        {!! limitHtml($item->content, 200) !!}
                                                    </div>
                                                    <textarea class="row-content-{{ $item->id }} d-none" name="row_content[]">{{ $item->content }}</textarea>
                                                </td>
                                                <td>
                                                    @php
                                                        $is_required = $item->is_required == 1 ? 'yes' : 'no';
                                                    @endphp
                                                    @if ($item->is_required == 1)
                                                        <div class="text-success">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor"
                                                                class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                                                                <path
                                                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                                            </svg>
                                                        </div>
                                                    @endif
                                                    <input type="hidden" class="row-is-required-{{ $item->id }}"
                                                        name="row_is_required[]" value="{{ $is_required }}">
                                                </td>

                                                <td>
                                                    <div class="btn-list flex-nowrap">
                                                        <a href="#" class="btn btn-sm btn-outline-primary"
                                                            data-row="{{ $item->id }}"
                                                            onclick="editContent($(this))">
                                                            <i class="ti ti-edit"></i>
                                                        </a>
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            data-row="{{ $item->id }}"
                                                            onclick="confirmDelete($(this))">
                                                            <i class="ti ti-trash"></i>
                                                        </button>
                                                    </div>
                                                </td>

                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>


                            </div>


                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <div class="d-flex justify-content-end">

                                <button type="submit" class="btn btn-primary btn-lg" value="simpan">
                                    <span class="me-2 mb-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-floppy" viewBox="0 0 16 16">
                                            <path d="M11 2H9v3h2z" />
                                            <path
                                                d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z" />
                                        </svg>
                                    </span>
                                    Simpan
                                </button>

                            </div>

                        </div>
                    </div>


                </div>

            </form>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" data-mode="add" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-3" id="contentModalLabel">Konten Agreement</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="container">
                        <div class="row">
                            <div class="col">

                                <div class="mb-3">
                                    <label class="form-label">Urutan</label>
                                    <input type="number" class="form-control" id="sort_order" name="sort_order"
                                        placeholder="urutan konten">
                                </div>

                            </div>

                            <div class="col">

                                <div class="mb-3">
                                    <label class="form-label">Tipe</label>
                                    <select class="form-select" id="type" name="type"
                                        aria-label="Default select example">
                                        <option value="" selected>--pilih tipe agreement--</option>
                                        <option value="checklist">Checklist</option>
                                        <option value="text">Text</option>
                                    </select>
                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">

                                    <div class="mb-3 content-wrapper">
                                        <label for="agreementContent" class="form-label">Isi Agreement</label>
                                        <textarea id="agreementContent" name="agreementContent" class="form-control"></textarea>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="is_required"
                                            checked>
                                        <label class="form-check-label" for="is_required">
                                            Wajib diisi
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btnContentSave" data-row=""
                        onclick="saveAgreementContent($(this))">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <style>
        .note-editor .note-editable.is-invalid {
            border: 1px solid #dc3545 !important;
            border-radius: 0.375rem;
            /* matches Bootstrap's default */
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
    <script src="{{ asset('js/custom.js') }}"></script>

    <script>
        $(document).ready(function() {


            $('#agreementContent').summernote({
                height: 200,
                placeholder: 'Tulis isi agreement di sini...'
            });

            $('#agreementContent').summernote('code', '');


            const modalElement = document.getElementById('contentModal');

            modalElement.addEventListener('shown.bs.modal', event => {
                let rowCount = parseInt($('.agreementBody').attr('data-lastno'));

                let dataMode = $('#contentModal').attr('data-mode');
                if (dataMode != 'edit') {

                    $('#sort_order').val(rowCount + 1);
                    $('#agreementContent').summernote('code', '');
                    $('.btnContentSave').attr('data-row', '');
                }
                setTimeout(() => {
                    $('#sort_order').focus();
                }, 500);
            });

            modalElement.addEventListener('hide.bs.modal', event => {
                $('#contentModal').attr('data-mode', 'add');
                $('.btnContentSave').attr('data-row', '');
            });


        });

        document.addEventListener('DOMContentLoaded', function() {


            window.hideModal = function() {



                let modalContent = bootstrap.Modal.getInstance(document.getElementById('contentModal'));
                modalContent.hide();
            }


            window.generateUniqueCode = function(length = 6) {
                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
                let result = '';
                for (let i = 0; i < length; i++) {
                    result += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return result;
            }


            window.saveAgreementContent = function(e) {

                let sort_order = $('#sort_order').val();
                $('.agreementBody').attr('data-lastno', sort_order);
                let type = $('#type').val();
                let content = $('#agreementContent').summernote('code');
                let isChecked = $('#is_required').is(':checked');
                let is_required = 'no';
                let is_required_icon = ``;
                if (isChecked) {
                    is_required = 'yes';
                    is_required_icon = `
                        <div class="text-success">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-check-circle-fill"
                                viewBox="0 0 16 16">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </svg>
                        </div>
                        `;
                }

                let dataMode = $('#contentModal').attr('data-mode');
                let dataRow = e.attr('data-row');
                let rowCount = generateUniqueCode();

                if (dataMode == 'edit') {
                    rowCount = dataRow;
                }

                if (sort_order == '') {
                    $('#sort_order').addClass('is-invalid');
                    return;
                } else {
                    $('#sort_order').removeClass('is-invalid');
                }

                if (type == '') {
                    $('#type').addClass('is-invalid');
                    return;
                } else {
                    $('#type').removeClass('is-invalid');
                }


                if (content == '') {
                    $('.content-wrapper').find('.note-editor .note-editable').addClass('is-invalid');
                    return;
                } else {
                    $('.content-wrapper').find('.note-editor .note-editable').removeClass('is-invalid');

                }

                var htmlContent = `

                    <tr id="row-agreement-${rowCount}" data-row="${rowCount}">
                        <td data-value="${sort_order}" scope="row">
                            ${sort_order}
                            <input type="hidden" class="row-sort-order-${rowCount}" name="row_sort_order[]" value="${sort_order}" />
                        </td>
                        <td>
                            ${type}
                            <input type="hidden" class="row-type-${rowCount}" name="row_type[]" value="${type}" />
                        </td>
                        <td style="width:60%">
                            <div>
                                ${limitStringHTML(content,200)}
                            </div>
                            <textarea class="row-content-${rowCount} d-none" name="row_content[]">${content}</textarea>
                        </td>
                        <td>
                            ${is_required_icon}
                            <input type="hidden" class="row-is-required-${rowCount}" name="row_is_required[]" value="${is_required}" >
                        </td>

                        <td>
                            <div class="btn-list flex-nowrap">
                                <a href="#" class="btn btn-sm btn-outline-primary" data-row="${rowCount}" onclick="editContent($(this))" >
                                    <i class="ti ti-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                    data-row="${rowCount}" onclick="confirmDelete($(this))">
                                    <i class="ti ti-trash"></i>
                                </button>
                            </div>
                        </td>

                    </tr>


                    `;




                if (dataMode == 'edit') {
                    $('.agreementBody').find('tr[data-row="' + dataRow + '"]').replaceWith(htmlContent);
                } else {
                    $('.agreementBody').append(htmlContent);
                }

                hideModal();
            }

            window.editContent = function(e) {
                let dataRow = e.attr('data-row');
                $('.btnContentSave').attr('data-row', dataRow);
                $('#contentModal').attr('data-mode', 'edit');

                // Coba ambil instance modal
                let modalEl = document.getElementById('contentModal');
                let modalContent = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
                modalContent.show();

                let sort_order = $('.row-sort-order-' + dataRow).val();
                let type = $('.row-type-' + dataRow).val();
                let content = $('.row-content-' + dataRow).val();
                let is_required = $('.row-is-required-' + dataRow).val();

                $('#sort_order').val(sort_order);
                $('#type').val(type);
                $('#agreementContent').summernote('code', content);

                $('#is_required').prop('checked', is_required !== 'no');
            };

            window.confirmDelete = function(e) {
                let dataRow = e.attr('data-row');

                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data ini akan dihapus dari list",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#row-agreement-' + dataRow).remove();
                    }
                });

            }


        });
    </script>
@endsection
@push('styles')
@endpush
@push('script')
@endpush