@extends('lay.dnekcab.retsam')

@section('title')
    {{ $page_title }}
@endsection

@section('css')
    <style>
        .note-editor {
            overflow: visible !important;
        }

        .note-editor .note-dropdown-menu {
            z-index: 9999 !important;
        }

        .note-editor .note-popover {
            z-index: 9999 !important;
        }

        .form-label{
            font-weight: 16px;
            font-weight: bold;
        }
        .incoming-letter select{
            background-position: left 0.5em center;
            padding: 7px 10px;
        }
        #letter-details-model .modal-header{
            background-image: linear-gradient(#272727, #3f3f3f, #272727);
            padding: 10px 20px
        }
        #letter-details-model h5{
            font-size: 20px;
            color: #FFF;
        }
        #letter-details-model .modal-header button{
            background: transparent;
            color: #FFF;
            outline: none !important;
            border: 0;
            font-size: 33px;
            padding: 0;
            margin: 0;
            position: absolute;
            left: 18px;
        }
        .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
            margin-left: 20px !important;
        }
    </style>
@endsection
@section('page-content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body incoming-letter">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header :scenario="'1'" :pageTitle="$page_title" />
                            <form method="POST" action="{{ route('letter.incoming.store') }}" id="incoming-letter" enctype="multipart/form-data" >
                                @csrf
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="row">
                                            {{-- entry number --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.entry_number') <span class="required">*</span></label>
                                                <input type="number" class="form-control" name="r_entry_number" placeholder="@lang('letters.entry_number')"/>
                                                <span class="text-danger hiddens">@lang('global.required')</span>
                                            </div>
                                            {{-- entry date --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.entry_date') <span class="required">*</span></label>
                                                <input type="text" class="form-control datepickers" name="r_entry_date" placeholder="@lang('letters.entry_date')" autocomplete="off" />
                                                <span class="text-danger hiddens">@lang('global.required')</span>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            {{-- letter number --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.letter_number') <span class="required">*</span></label>
                                                <input type="number" class="form-control" name="r_letter_number" placeholder="@lang('letters.letter_number')"/>
                                                <span class="text-danger hiddens">@lang('global.required')</span>
                                            </div>
                                            {{-- letter date --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.letter_date') <span class="required">*</span></label>
                                                <input type="text" class="form-control datepickers" name="r_letter_date" placeholder="@lang('letters.letter_date')" autocomplete="off" />
                                                <span class="text-danger hiddens">@lang('global.required')</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        {{-- letter description --}}
                                        <label for="description" class="form-label">@lang('letters.description') <span class="required">*</span></label>
                                        <textarea name="r_description" class="form-control" rows="5" placeholder="@lang('letters.description')"></textarea>
                                        <span class="text-danger hiddens">@lang('global.required')</span>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <!-- Sender -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.sender') <span class="required">*</span></label>
                                        <select name="r_sender" class="select2">
                                            <option value="">@lang('global.select')</option>
                                            @foreach ($organization as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger hiddens">@lang('global.required')</span>
                                    </div>
                                    <!-- Sender Department -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.sender_department')</label>
                                        <input type="text" class="form-control" name="sender_department" disabled value="معاونیت اقتصادی ریاست الوزراء ا.ا.ا" />
                                    </div>
                                    <!-- Letter Type -->
                                    <div class="col">
                                        <label class="form-label">@lang('letters.letter_type')</label>
                                        <select name="letter_type" class="form-select" id="letter-type" onchange="showDecreesNumber(this.value)">
                                            <option value="">@lang('global.select')</option>
                                            <option value="عادی">@lang('letters.normal')</option>
                                            <option value="احکام">@lang('letters.decrees')</option>
                                            <option value="فرمان">@lang('letters.order')</option>
                                            <option value="مصوبه">@lang('letters.resolution')</option>
                                            <option value="پیشنهاد">@lang('letters.proposal')</option>
                                            <option value="استعلام">@lang('letters.inquiry')</option>
                                        </select>
                                    </div>
                                    <div class="col d-none decrees-div">
                                        <label class="form-label">@lang('letters.save_number') <span class="required">*</span></label>
                                        <input type="number" name="save_number" id="save-number" class="form-control" placeholder="@lang('letters.save_number')" />
                                    </div>
                                    <!-- Follow Up -->
                                    {{-- <div class="col-md-3">
                                        <label class="form-label">@lang('letters.follow_up')</label>
                                        <select name="taqibi" class="form-select">
                                            <option value="">@lang('global.select')</option>
                                            <option value="yes">@lang('letters.yes')</option>
                                            <option value="no">@lang('letters.no')</option>
                                        </select>
                                    </div> --}}
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.reffered')</label>
                                                <input type="text" class="form-control" name="reffered" placeholder="@lang('letters.reffered')" />
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.related_book')</label>
                                                <input type="text" class="form-control" name="archive" placeholder="@lang('letters.related_book')" />
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-12">
                                                <label class="form-label">@lang('letters.answer_to')</label>
                                                <div class="d-flex align-items-center answer-to">
                                                    <select name="answer_to" id="answer-to" class="form-select select2">
                                                        <option value=""></option>
                                                    </select>
                                                    <button type="button" class="btn btn-outline-secondary me-1" title="@lang('letters.letter_details')" style="padding:8px 10px 8px 10px" onclick="showLetterDetails()">
                                                        <i class="fa fa-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col">
                                                <label class="form-label">@lang('letters.attachment')</label>
                                                <input type="file" name="attachment" class="form-control" accept=".jpg, .jpeg, .png, .pdf" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        {{-- letter description --}}
                                        <label class="form-label">@lang('letters.activity_description')</label>
                                        <textarea name="execution_details" class="form-control" rows="10" placeholder="@lang('letters.activity_description')"></textarea>
                                    </div>
                                </div>
                                <div class="row mt-3" id="footer-button">
                                    <div class="col">
                                        <button type="button" class="btn btn-primary me-1" onclick="insertLetter('incoming-letter');">
                                            <i class="fa fa-check-circle"></i> @lang('global.save')
                                        </button>
                                        <a href="{{ route('letter.incoming.list') }}" type="button" class="btn btn-outline-secondary">
                                            <i class="fa fa-times-circle"></i> @lang('global.cancel')
                                        </a>
                                    </div>
                                </div>
                            </form>
                            <br>
                            @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>
    </div>
@endsection

@section('js')
    <script>
        function insertLetter(formID)
        {
            if(!validateForm(formID)){
                return false;
            }
            let letterType = $("#letter-type").val();
            let saveNumber = $("#save-number").val();
            if(letterType === 'احکام'){
                if(saveNumber == ''){
                    $("#save-number").css("border", "1px solid #F00");
                    $("#save-number").focus();
                    return false;
                }
            }
            $("#"+formID).submit();
        }
        function showLetterDetails()
        {
            var letterID = $("#answer-to").val();
            if (letterID == '') {
                $(".answer-to .select2-selection").css("border", "1px solid #F00");
                return;
            }
            $(".answer-to .select2-selection").css("border", "");
            $.ajax({
                url: "{{ route('letter-details') }}",
                method: "GET",
                data: {
                    id: letterID,
                    model: "OutgoingLetter",
                    folder: "letter.outgoing_letter"
                },
                success: function(response) {
                    $("#letter-details-model .modal-body").html(response);
                    $("#letter-details-model").modal('show');
                },
                error: function(xhr) {
                    let errorMessage = "An error occurred";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    toastr.error(errorMessage);
                }
            });
        }
        function showDecreesNumber(val)
        {
            if(val === 'احکام'){
                $(".decrees-div").removeClass("d-none");
            }else{
                $(".decrees-div").addClass("d-none");
            }
        }
        $('#answer-to').select2({
            placeholder: "{{ __('global.select') }}",
            allowClear: true,
            ajax: {
                url: "{{ route('letter.search') }}",
                dataType: 'json',
                delay: 250,
                headers: {
                    'Accept': 'application/json',
                },
                data: function(params) {
                    return {
                        q: params.term // متن جستجو شده
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.text // متن آماده از سرور می‌آید
                            };
                        })
                    };
                },
                cache: true
            },
            minimumInputLength: 1
        });
    </script>
@endsection

{{-- letter details model --}}
<div class="modal fade" id="letter-details-model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 70%; width: 70%">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fa fa-info-circle"></i> {{ __('letters.letter_details') }}
                </h5>
                <button type="button" data-bs-dismiss="modal" aria-label="Close">x</button>
            </div>
            <div class="modal-body px-4">
                <i class="fa fa-spiner" style="font-size: 50px"></i>
            </div>
        </div>
    </div>
</div>