@extends('admin.layouts.layout')

@section('head')
 <link rel="stylesheet" href="{{asset('richtexteditor/rte_theme_default.css')}}" />
 {{-- <link rel="stylesheet" href="{{asset('style.css')}}">
 <link rel="stylesheet" href="{{asset('./ckeditor5/ckeditor5.css')}}">
 <style>
    .ck-editor__editable {
    max-height: 300px; /* Set desired height */
}
 </style> --}}
@endsection

@section('content')

<div class="page-container">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed gap-2">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 class="header-title">Builder Details</h4>
                        </div>
                        <div class="col-lg-6">
                            <h4 class="header-title">Site Details</h4>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                            <div class="mb-3 col-lg-6 d-flex">
                                <p style="margin-right: 50px;"> <label for="full_name" class="form-label">Full Name :</label> {{$builder->Builder->full_name}}</p>
                                <p style="margin-right: 50px;"> <label for="email" class="form-label">Email :</label> {{$builder->Builder->email}}</p>
                                <p style="margin-right: 50px;"> <label for="mobile_no" class="form-label">Mobile :</label> {{$builder->Builder->mobile_no}}</p>
                            </div>
                            <div class="mb-3 col-lg-6">
                                <p style="margin-right: 50px;"> <label for="full_name" class="form-label">Site Name :</label> {{$builder->site->site_name}}</p>
                            </div>
                    </div>
                    <div class="row">
                        <div class="card-header border-bottom border-dashed justify-content-between d-flex flex-wrap align-items-center gap-2">
                            <h4 class="header-title">Update Document</h4>
                            <a href="javascript:void(0);" class="btn btn-danger backToDocumentList">Back</a>
                        </div>

                        <div class="card-body">
                            <form action="{{ route('builders.documents.update', $Document->id  ?? '') }}" method="POST">
                                @csrf
                                @method('PUT')
                                {{-- @if($error->) --}}
                                <div class="row">
                                    <div class="mb-3 col-lg-4">
                                        <label for="name" class="form-label">Document Type</label>
                                        <select class="form-control" name="nature_id" id="nature_id">
                                            <option value="">Select Document Type</option>
                                            @foreach ($NatureOfDocuments as $NatureOfDocument)
                                                <option value="{{ $NatureOfDocument->id }}"
                                                    {{ isset($Document) && $Document->nature_id == $NatureOfDocument->id ? 'selected' : '' }}>
                                                    {{ $NatureOfDocument->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <input type="hidden" name="builder_id" value="{{$builder->Builder->id}}">
                                    <input type="hidden" name="site_id" value="{{$builder->site->id}}">
                                    <div class="mb-3 col-lg-4" id="bankDropdown" style="display: none;">
                                        <label for="bank_id" class="form-label">Bank</label>
                                        <select class="form-control" name="bank_id" id="bank_id">
                                            <option value="">Select Bank</option>
                                            @foreach ($Banks as $Bank)
                                                <option value="{{ $Bank->id }}" {{ isset($Document) && $Document->bank_id == $Bank->id ? 'selected' : '' }}>
                                                    {{ $Bank->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <h6 class="fs-15 mt-1">Type</h6>
                                        <div class="mt-2">
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="type_gujarati" name="type" value="2"
                                                    class="form-check-input" {{ old('type', $Document->type ?? '') == '2' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="type_gujarati">Gujarati</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="type_english" name="type" value="1"
                                                    class="form-check-input" {{ old('type', $Document->type ?? '') == '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="type_english">English</label>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <h6 class="fs-15 mt-1">Characteristics</h6>
                                        @include('admin.builders.characteristics')
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <h6 class="fs-15 mt-1">Document Footer</h6>

                                        <textarea style="height: 300px; width: 100%;" name="footer" id="footer_editor">{!! $Document->footer !!}</textarea>
                                    </div>
                                    <!--<div class="mb-3 col-lg-12">-->
                                    <!--    <div class="d-flex mb-3 justify-content-between">-->
                                    <!--        <label class="form-label">Document</label>-->
                                    <!--        <button type="button" class="btn btn-sm btn-primary addPage">+ Add Page</button>-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                    <div class="mb-3 col-lg-12">
                                        <div class="d-flex mb-3 justify-content-between">
                                            <label class="form-label">Document</label>
                                        </div>
                                        <textarea id="full-featured" name="doc_desc" class="form-control">
                                            {!! $Document->doc_desc !!}
                                        </textarea>
                                    </div>

                                    <div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </form>
                            {{-- <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th style="width: 75%">Description</th>
                                        <th width="10%">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="page-wrapper">
                                    @foreach ($Document->descriptions as $key => $desc)
                                        <tr class="editor-box" data-id="{{ $desc->id }}">
                                            <td class="page-label">Page {{ $key + 1 }}</td>
                                            <td  style="justify-items: center;">
                                                <textarea style="height: 14in; width: 8.5in;" class="editor" name="doc_desc[]" id="inp_editor{{ $key + 1 }}">{{ $desc->doc_desc }}</textarea>
                                                <input type="hidden" name="id[]" value="{{ $desc->id }}">
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm deletePage" data-page="{{ $key + 1 }}" data-id="{{ $desc->id }}">- Remove</button>
                                                <button type="button" class="btn btn-warning btn-sm savePage" data-id="{{ $desc->id }}" data-index="{{ $key + 1 }}">Save</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table> --}}
                        </div>
                    </div>
                    <div class="row backbtn">
                        <div class="mt-3 col-lg-3">
                            <a href="{{route('builders.index')}}" class="btn btn-danger">Back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div> <!-- container -->

@endsection

@section('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

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

        // Trim leading spaces
        $('.whitespace-trim').on('input', function () {
            var value = $(this).val();
            if (value && value.charAt(0) === ' ') {
                $(this).val(value.trimStart());
            }
        });

        // Custom method for letters only
        $.validator.addMethod("lettersonly", function (value, element) {
            return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
        }, "Please enter only alphabetic characters and spaces.");

        // Form validation rules
        $('#siteForm').validate({
            errorElement: 'span',
            errorClass: 'text-danger',

            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            },

            rules: {
                site_name: { required: true, lettersonly: true},
            },

            messages: {
                site_name: {
                    required: "Please enter Site name",
                    lettersonly: "Only alphabets and spaces allowed",
                },
            }
        });

        new RichTextEditor("#footer_editor", { editorResizeMode: "height" });
    });


</script>

<script type="text/javascript" src="{{asset('richtexteditor/rte.js')}}"></script>
<script type="text/javascript" src='{{asset('richtexteditor/plugins/all_plugins.js')}}'></script>

<script>
//     document.addEventListener("DOMContentLoaded", function () {
//     function initEditors() {
//         document.querySelectorAll(".editor").forEach((editor, index) => {
//             if (!editor.classList.contains("rte-initialized")) {
//                 new RichTextEditor(editor, {
//                     editorResizeMode: "height"
//                 });
//                 editor.classList.add("rte-initialized");
//             }
//         });
//     }

//     initEditors(); // Initialize existing editors

//     document.querySelector(".addPage").addEventListener("click", function () {
//         let pageCount = document.querySelectorAll(".editor-box").length + 1;

//         let newPage = document.createElement("tr");
//         newPage.className = "editor-box";
//         newPage.innerHTML = `
//             <td class="page-label">Page ${pageCount}</td>
//             <td  style="justify-items: center;">
//                 <textarea style="height: 14in; width: 8.5in;" class="editor" name="doc_desc[]" id="inp_editor${pageCount}"></textarea>
//                 <input type="hidden" name="id[]" value="">
//             </td>
//             <td>
//                 <button type="button" class="btn btn-danger btn-sm removePage">- Remove</button>
//             </td>
//         `;

//         document.querySelector(".page-wrapper").appendChild(newPage);
//         initEditors(); // Initialize newly added editor
//     });

//     document.querySelector(".page-wrapper").addEventListener("click", function (e) {
//         if (e.target.classList.contains("removePage")) {
//             e.target.closest(".editor-box").remove();
//         }
//     });
// });

    $(document).ready(function () {
        $(".copyButton").click(function () {
            let textToCopy = $(this).data("value");

            navigator.clipboard.writeText(textToCopy).then(() => {
                // alert("Copied: " + textToCopy);
            }).catch(err => {
                console.error("Error copying text: ", err);
            });
        });
    });

    $(document).ready(function () {
        function toggleLanguageSection() {
            var selectedType = $("input[name='type']:checked").val();
            $("#Gujarati").toggle(selectedType === "2");
            $("#English").toggle(selectedType === "1");
        }

        // Initial check on page load
        toggleLanguageSection();

        // Change event to switch sections based on selection
        $("input[name='type']").on("change", toggleLanguageSection);
    });

    // $(document).ready(function() {
    //     $('.deletePage').on('click', function() {

    //             var pageId = $(this).data('id');

    //             $.ajax({
    //                 url: '/admin/delete-description',
    //                 method: 'DELETE',
    //                 data: {
    //                     id: pageId,
    //                     _token: '{{ csrf_token() }}'
    //                 },
    //                 success: function(response) {
    //                     if (response.success) {
    //                         $(this).closest('tr').remove();
    //                     } else {
    //                         Swal.fire({
    //                             title: "Are You Sure?",
    //                             text: "You Want Delete This Page?",
    //                             icon: "warning",
    //                             customClass: { confirmButton: "btn btn-danger btn-sm deletePage" },
    //                             buttonsStyling: false,
    //                             showCloseButton: true,
    //                         }).then(() => {
    //                             location.reload(); // Reload after alert
    //                         });
    //                     }
    //                 },
    //                 error: function() {
    //                     alert('An error occurred. Please try again.');
    //                 }
    //             });

    //     });
    // });

    // $(document).on('click', '.savePage', function () {
    //     let id = $(this).data('id');
    //     let index = $(this).data('index');
    //     let textarea = $('#inp_editor' + index);
    //     let doc_desc = textarea.val();

    //     $.ajax({
    //         url: '/admin/update-doc-desc',
    //         method: 'POST',
    //         data: {
    //             _token: $('meta[name="csrf-token"]').attr('content'),
    //             id: id,
    //             doc_desc: doc_desc
    //         },
    //         success: function (response) {
    //             // Assuming response has a 'message' key
    //             toastr.success(response.message || "Description updated successfully!");
    //         },
    //         error: function () {
    //             toastr.error("Error updating the description.");
    //         }
    //     });
    // });

</script>

<script src="https://cdn.tiny.cloud/1/18rkqdcoikd8ai8nifnzc9l390e4v84wup0g6ckqpdezcfmt/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/18rkqdcoikd8ai8nifnzc9l390e4v84wup0g6ckqpdezcfmt/tinymce/7/plugins.min.js" referrerpolicy="origin"></script>


<!-- Place the following <script> and <textarea> tags your HTML's <body> -->
    <script>
        tinymce.init({
          content_style: "body { max-width: 640px; margin: 0 auto; }",
          selector: 'textarea#full-featured',
          plugins: 'image code importword exportword exportpdf ai preview powerpaste casechange importcss searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown',
          toolbar: "undo redo | image code | importword exportword exportpdf | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight  outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
          tinycomments_mode: 'embedded',
          tinycomments_author: 'Author name',
          images_upload_url: '/admin/upload-image',
          autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            typography_rules: [
                'common/punctuation/quote',
                'en-US/dash/main',
                'common/nbsp/afterParagraphMark',
                'common/nbsp/afterSectionMark',
                'common/nbsp/afterShortWord',
                'common/nbsp/beforeShortLastNumber',
                'common/nbsp/beforeShortLastWord',
                'common/nbsp/dpi',
                'common/punctuation/apostrophe',
                'common/space/delBeforePunctuation',
                'common/space/afterComma',
                'common/space/afterColon',
                'common/space/afterExclamationMark',
                'common/space/afterQuestionMark',
                'common/space/afterSemicolon',
                'common/space/beforeBracket',
                'common/space/bracket',
                'common/space/delBeforeDot',
                'common/space/squareBracket',
                'common/number/mathSigns',
                'common/number/times',
                'common/number/fraction',
                'common/symbols/arrow',
                'common/symbols/cf',
                'common/symbols/copy',
                'common/punctuation/delDoublePunctuation',
                'common/punctuation/hellip'
            ],
            typography_ignore: [ 'code' ],

          ai_request: (request, respondWith) => respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
          images_upload_handler: function (blobInfo, success, failure) {
    let formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    fetch('/admin/upload-image', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        success(result.path); // This should be like /storage/uploads/filename.png
    })
    .catch(() => {
        failure('Image upload failed');
    });
}

        });


      </script>
    <script>
        $(document).ready(function () {
            function toggleBankDropdown() {
                if ($('#nature_id').val() == '1') {
                    $('#bankDropdown').show(); // or .fadeIn() for smooth effect
                } else {
                    $('#bankDropdown').hide(); // or .fadeOut()
                }
            }

            // Trigger on page load (for edit forms)
            toggleBankDropdown();

            // Trigger on change of nature_id
            $('#nature_id').change(function () {
                toggleBankDropdown();
            });
        });
    </script>


@endsection