@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">
                        Tambahkan Pengaturan Agreement
                    </h2>
                    <div class="text-muted mt-1">Buat pengaturan agreement baru 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.store') }}" method="post"enctype="multipart/form-data">
                @csrf

                <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="{{ old('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" checked>Lisensi</option>
                                    <option value="distribusi">Distribusi</option>
                                    <option value="penggunaan">Penggunaan</option>
                                    <option value="umum">Umum</option>
                                    <option value="lainnya">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>
                                    <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" 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="0">

                                    </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', '');
                }
                $('#sort_order').focus();
            });

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


        });

        function hideModal() {

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


        function saveAgreementContent(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="confirmDeleteRow($(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();
        }
    </script>

    <script>
        function editContent(e) {

            let dataRow = e.attr('data-row');
            $('.btnContentSave').attr('data-row', dataRow);
            $('#contentModal').attr('data-mode', 'edit');
            let modalContent = bootstrap.Modal.getInstance(document.getElementById('contentModal'));
            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();
            console.log(content);

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

            if (is_required == 'no') {
                $('#is_required').prop('checked', false);
            } else {
                $('#is_required').prop('checked', true);
            }

        }

        function confirmDeleteRow(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