@extends('lay.dnekcab.retsam')

@section('title')
    {{ $page_title }}
@endsection
@section('page-content')
    <div class="page-content no-print">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <div class="card-header py-0">
                                <div class="col-md-12">
                                    <div class="row align-items-center">
                                        <div class="col-md-10">
                                            <div class="row">
                                                <div class="col-md-10 px-0">
                                                    <ol class="breadcrumb align-items-center m-0 px-0">
                                                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-list" style="position: relative; top: 3px;"></i> {{ __('dashboard.item')}}</a></li>
                                                        <li class="breadcrumb-item active"><i class="fas fa-angle-double-left mx-1" style="position: relative; top: 3px"></i> {{ $page_title }}</li>
                                                    </ol>
                                                </div>
                                                <div class="col-md-2 align-items-center d-flex">
                                                    <div id="item-total-count">{{ $lettersInfo->total() }}</div>
                                                    <i class="bx bx-collection mr-1 mr-half-1"></i> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary btn-sm form-control pull-left" onclick="letterModal('create')">
                                                <i class="fa fa-pen"></i> {{ __('letters.wwrite_letter') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="accordion" id="searchFilterArea">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="searchFilterHeading">
                                            <button class="accordion-button fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#searchCollapse" aria-expanded="true" aria-controls="searchCollapse">
                                                <i class="fas fa-search" style="padding-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}:0.35rem;"></i> 
                                                <span>{{ __('global.search')}}</span>
                                            </button>
                                        </h2>
                                        <div id="searchCollapse" class="accordion-collapse collapse" aria-labelledby="searchFilterHeading" data-bs-parent="#searchFilterArea">
                                            <div class="accordion-body">
                                                <div class="text-muted">
                                                    <form action="{{ route('letter.write.list') }}" method="GET" id="search-filter" style="display: grid">
                                                        @csrf
                                                        <div class="search-filter">
                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <input type="text" class="form-control" name="term_searh_name" id="term_searh_id" placeholder="{{ __('global.search') }}">
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <select class="form-control select2" name="copy_to" id="copy_to">
                                                                        <option value="">{{ __('letters.copy_to') }}</option>
                                                                        @foreach ($organization as $org)
                                                                            <option value="{{ $org->name }}">{{ $org->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <select class="form-control select2" name="pagination_searh_name" id="pagination_searh_id" data-select2-id="pagination_searh_id" tabindex="-1" aria-hidden="true">
                                                                        <option value="" disabled="" selected="" data-select2-id="8">25</option>
                                                                        <option value="25">25</option>
                                                                        <option value="50">50</option>
                                                                        <option value="100">100</option>
                                                                        <option value="250">250</option>
                                                                        <option value="500">500</option>
                                                                        <option value="all">همه</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <button type="submit" class="btn btn-primary">{{ __('global.search')}}</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end Search -->
                            </div>
                            <div class="card">
                                <div class="card-body pe-0 ps-0" id="data_content">
                                    @include('dnekcab.nimda.letter.write.list')
                                </div>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
        </div> <!-- container-fluid -->
    </div>
    
    <!-- create letter editorial employee modal modal start -->
    <div class="modal fade" id="write-letter-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog" style="min-width: 50%">
            <div class="modal-content"></div>
        </div>
    </div>
    <!-- create letter editorial employee modal modal end -->

    {{-- letter print section --}}
    <div class="print-section" id="print-section" style="display: none;"></div>
    {{-- letter print section --}}
@endsection
@section('js')
<script>
    function writeLetter()
    {
        // Reset previous error styles
        $("#moqam-id").next(".select2").find(".select2-selection").attr("style", "");
        $("#copy-to").next(".select2").find(".select2-selection").attr("style", "");
        $("#title").css("border", "");
        $(".note-editable").css("border", "");

        // Get input values
        let title = $("#title").val();
        let letterHtml = $("#write-letter-text").summernote('code');
        let letterText = $("<div>").html(letterHtml).text().trim();
        let moqamID = $("#moqam-id").val();
        let copyID = $("#copy-to").val();

        // Validate title
        if (title === '') {
            $("#title").css("border", "1px solid #F00");
            return;
        }

        // Validate Summernote content (must not be empty)
        if (letterText === '') {
            $(".letter-text-section .note-editable").css("border", "1px solid #F00");
            return;
        }

        // Validate moqam_id selection
        if (moqamID === '') {
            $("#moqam-id").next(".select2").find(".select2-selection").attr("style", "border: 1px solid #F00 !important");
            return;
        }

        // Validate copy_to selection
        if (copyID === "") {
            $("#copy-to").next(".select2").find(".select2-selection").attr("style", "border: 1px solid #F00 !important");
            return;
        }

        let depNameHtml = $("#dep-name-text").summernote('code');
        let depNameText = $("<div>").html(depNameHtml).text().trim();
        // Validate Summernote content (must not be empty)
        if (depNameText === '') {
            $(".dep-name-section .note-editable").css("border", "1px solid #F00");
            return;
        }

        $("#letter-body").val(letterHtml);
        $("#dep-name").val(depNameHtml);
        // Submit the form if all validations pass
        $("#write-letter-form").submit();
    }

    function letterModal(section, id='')
    {
        if(section == 'edit-show' || section == 'edit-hide'){
            if(section == 'edit-show'){
                $(".edit-setion").show();
                $(".view-setion").hide();
            }else{
                $(".edit-setion").hide();
                $(".view-setion").show();
            }

            $('#write-letter-text').summernote({
                placeholder: 'متن مکتوب',
                tabsize: 1,
                height: 250,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                ]
            });
            $('#dep-name-text').summernote({
                placeholder: 'اداره',
                tabsize: 1,
                height: 40,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                ]
            });
            return;
        }
        // Build the URL using Laravel route helper with template string
        let url = '{{ route("letter.write.modal", ["section" => "__section__", "id" => "__id__"]) }}';

        // Replace placeholders with actual values
        url = url.replace('__section__', section);
        url = url.replace('__id__', id);

        // Make AJAX GET request
        $.get(url)
            .done(function(response) {
                $('#write-letter-modal .modal-content').html(response);

                $('#write-letter-text').summernote({
                    placeholder: 'متن مکتوب',
                    tabsize: 1,
                    height: 250,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                    ]
                });

                $('#dep-name-text').summernote({
                    placeholder: 'اداره',
                    tabsize: 1,
                    height: 40,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                    ]
                });

                // show modal
                $('#write-letter-modal').modal('show');
            })
            .fail(function() {
                toastr.error('Failed to load the letter modal. Please try again.');
            });
    }

    function printLetter()
    {
        let printConten = $("#print-content").html();
        $("#print-section").html(printConten);
        window.print();
    }
</script>
@endsection
<style>
    .note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu {
        min-width: 342px !important;
    }
    .note-editor .note-toolbar .note-para .note-dropdown-menu, .note-popover .popover-content .note-para .note-dropdown-menu {
        min-width: 248px !important;
    }
    
    button[title="More Color"]::after {
        content: "▼"; /* یا "\f0d7" با Font Awesome */
        position: absolute;
        right: 4px;
        top: 51%;
        transform: translateY(-50%);
        font-size: 10px;
        pointer-events: none;
    }
    .note-toolbar button:hover {
        color: #000;
    }
    .note-editor {
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }
    .note-editor:hover {
        box-shadow: none !important;
        transform: translateY(0px) !important;
    }
    .note-editable p{
        margin-bottom: 3px !important;
    }
    #write-letter-modal label{
        font-weight: bold;
    }
</style>