@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>
.mce-content-body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 640px;
    margin: 0 auto;
}
 </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_name}}</p>
                            </div>
                    </div>
                    <div class="row documentList">
                        <div class="card-header border-bottom border-dashed justify-content-between d-flex flex-wrap align-items-center gap-2">
                            <h4 class="header-title">Documents List</h4>
                            <button class="btn btn-primary addDocument">+ Add Document</button>
                        </div>

                        <table id="basic-datatable" class="table table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Document Name</th>
                                    <th>Bank Name</th>
                                    <th>Type</th>
                                    <th style="text-align: end;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($Documents as $Document)

                                    <tr>
                                        <td>{{ $Document->natureOfDocument->name ?? 'N/A' }}</td>
                                        <td>{{ $Document->banks->name ?? 'N/A' }}</td>
                                        <td>{{ $Document->type == 1 ? 'English' : ($Document->type == 2 ? 'Gujarati' : 'N/A') }}</td>
                                        <td>
                                            <div class="hstack gap-1 justify-content-end">
                                                <a href="{{ route('builders.documents.show',  $Document->id) }}" target="_blank"
                                                    class="btn btn-soft-primary btn-icon btn-sm rounded-circle" title="View Document">
                                                    <i class="ti ti-eye fs-16"></i>
                                                </a>
                                                <a href="{{ route('builders.documents.document_edit',  $Document->id) }}"
                                                    class="btn btn-soft-success btn-icon btn-sm rounded-circle">
                                                    <i class="ti ti-edit fs-16"></i>
                                            </a>
                                                <form action="{{ route('builders.documents.destroy', $Document->id) }}" method="POST"
                                                    onsubmit="return confirm('Are you sure you want to delete this Document?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-soft-danger btn-icon btn-sm rounded-circle" title="Delete Document">
                                                        <i class="ti ti-trash fs-16"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row newDocument" style="display: none;">
                        <div class="card-header border-bottom border-dashed justify-content-between d-flex flex-wrap align-items-center gap-2">
                            <h4 class="header-title">Add Document</h4>
                            <a href="javascript:void(0);" class="btn btn-danger backToDocumentList">Back</a>
                        </div>

                        <div class="card-body">
                            <form action="{{ route('builders.documents.store') }}" method="POST" id="documentForm">
                                @csrf
                                <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 }}">
                                                    {{ $NatureOfDocument->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <input type="hidden" name="builder_id" value="{{$builder->Builder->id}}">
                                    <input type="hidden" name="site_id" value="{{$builder->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 }}">
                                                    {{ $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" name="type" value="2"
                                                    class="form-check-input">
                                                <label class="form-check-label" for="type">Gujarati</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="type" name="type" value="1"
                                                    class="form-check-input">
                                                <label class="form-check-label" for="type">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%;" class="editor" name="footer" id="footer_editor"></textarea>
                                    </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">
                                        </textarea>
                                    </div>

                                    <div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </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 type="text/javascript" src="{{asset('richtexteditor/rte.js')}}"></script>
<script type="text/javascript" src='{{asset('richtexteditor/plugins/all_plugins.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",
                },
            }
        });
    });

    $(document).ready(function () {
        $(".document").click(function () {
            $(".documentList").show();
            $(".backbtn").show();
        });

        $(".addDocument").click(function () {
            $(".documentList").hide();
            $(".newDocument").show();
            $(".updateDocument").hide();
            $(".backbtn").hide();
        });

        $(".editDocument").click(function () {
            let docId = $(this).data("doc-id"); // Get document ID from data attribute
            $(".documentList").hide();
            $(".newDocument").hide();
            $(".updateDocument").hide(); // Hide all first
            $(".updateDocument_" + docId).show(); // Show specific document update section
            $(".backbtn").hide();
        });

        $(".backToDocumentList").click(function () {
            $(".documentList").show();
            $(".newDocument").hide();
            $(".updateDocument").hide();
        });
    });

    $(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();
            if (selectedType === "2") {
                $("#Gujarati").show();
                $("#English").hide();
            } else if (selectedType === "1") {
                $("#Gujarati").hide();
                $("#English").show();
            }
        }

        // Initial check on page load
        toggleLanguageSection();

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

    $(document).ready(function () {
    // let pageCount = 1;

    // Initialize RichTextEditor for the first textarea
    // new RichTextEditor("#inp_editor_1", { editorResizeMode: "none" });
    new RichTextEditor("#footer_editor", { editorResizeMode: "height" });


    // Add Page
    // $(".addPage").on("click", function () {
    //     pageCount++;
    //     let editorId = `inp_editor_${pageCount}`;
    //     let newRow = `
    //         <tr class="editor-box">
    //             <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="${editorId}"></textarea>
    //             </td>
    //             <td>
    //                 <button type="button" class="btn btn-danger btn-sm removePage">- Remove</button>
    //             </td>
    //         </tr>`;

    //     $("#documentTable").append(newRow);

    //     // Initialize RichTextEditor for the new textarea with editorResizeMode
    //     new RichTextEditor(`#${editorId}`, { editorResizeMode: "height" });
    // });

    // // Remove Page
    // $(document).on("click", ".removePage", function () {
    //     $(this).closest("tr").remove();
    //     updatePageNumbers();
    // });

    // // Update page numbers dynamically after removal
    // function updatePageNumbers() {
    //     pageCount = 0;
    //     $(".editor-box").each(function () {
    //         pageCount++;
    //         $(this).find(".page-label").text(`Page ${pageCount}`);
    //     });
    // }
});
</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: 'importword exportword exportpdf ai preview powerpaste casechange importcss tinydrive 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 | 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',
          autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            image_advtab: true,
                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')),
        });
      </script>

      <script>
        $(document).ready(function () {
            $('#nature_id').on('change', function () {
                var selectedVal = $(this).val();
                if (selectedVal == '1') {
                    $('#bankDropdown').show();
                } else {
                    $('#bankDropdown').hide();
                }
            });
        });
      </script>

@endsection