@extends('lay.dnekcab.retsam')

@section('title')
    {{ $page_title }}
@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 outgoing-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.outgoing.store') }}" id="outgoing-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-12">
                                                <label class="form-label">@lang('letters.outgoing_number') <span class="required">*</span></label>
                                                <input type="number" class="form-control" name="r_outgoing_number" placeholder="@lang('letters.outgoing_number')"/>
                                                <span class="text-danger hiddens">@lang('global.required')</span>
                                            </div>
                                        </div>
                                        <div class="row mt-1">
                                            {{-- letter date --}}
                                            <div class="col-md-12">
                                                <label class="form-label">@lang('letters.date') <span class="required">*</span></label>
                                                <input type="text" class="form-control datepickers" name="r_date" placeholder="@lang('letters.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>
                                        <input type="text" class="form-control" value="معاونیت اقتصادی ریاست الوزراء ا.ا.ا" disabled />
                                    </div>
                                    <!-- Sender Department -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.sender_department') <span class="required">*</span></label>
                                        <select name="letter_receiver[]" id="letter_receiver" multiple 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>
                                    <!-- Letter Type -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.letter_type')</label>
                                        <select name="letter_type" class="form-select" id="letter-type" onchange="showDecreesOrPetitionSection(this.value)">
                                            <option value="">@lang('global.select')</option>
                                            <option value="متحدالمال">@lang('letters.motahedulmal')</option>
                                            <option value="عادی">@lang('letters.normal')</option>
                                            <option value="احکام">@lang('letters.decrees')</option>
                                            <option value="فرمان">@lang('letters.order')</option>
                                            <option value="پیشنهاد">@lang('letters.proposal')</option>
                                            <option value="استعلام">@lang('letters.inquiry')</option>
                                            <option value="عریضه">@lang('letters.petition')</option>
                                        </select>
                                    </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>
                                        <span class="text-danger hiddens">@lang('global.required')</span>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6 letter-select">
                                        <label class="form-label">@lang('letters.answer_to')</label>
                                        <div class="d-flex align-items-center letter-answer-to">
                                            <select name="answer_to" id="letter-answer-to" class="form-select select2" onchange="showPetitionInfo(this.value)">
                                                <option value="">@lang('global.select')</option>
                                            </select>
                                            <span class="text-danger hiddens">@lang('global.required')</span>
                                            <button type="button" class="btn btn-outline-secondary me-1" title="@lang('letters.letter_details')" style="padding:7px 10px" onclick="showLetterDetails()">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-6 petition-select d-none">
                                        <label class="form-label">@lang('letters.select_petition')</label>
                                        <div class="d-flex align-items-center petition-answer-to">
                                            <select name="petition_link" id="petition-answer-to" class="form-select select2" onchange="showPetitionInfo(this.value)">
                                                <option value="">@lang('global.select')</option>
                                            </select>
                                            <span class="text-danger hiddens">@lang('global.required')</span>
                                            <button type="button" class="btn btn-outline-secondary me-1" title="@lang('letters.letter_details')" style="padding:7px 10px" onclick="showPetitionDetails()">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.related_book')</label>
                                        <input type="text" class="form-control" name="archive" placeholder="@lang('letters.related_book')" />
                                        <span class="text-danger hiddens">@lang('global.required')</span>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.attachment')</label>
                                        <input type="file" name="attachment" class="form-control" accept=".jpg, .jpeg, .png, .pdf" />
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6 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>
                                    <div class="col-md-3 d-none petition-div">
                                        <label class="form-label">@lang('letters.executions') <span class="required">*</span></label>
                                        <select name="petition_executions" id="petition-executions" class="form-select">
                                            <option value="">@lang('global.select')</option>
                                            <option value="تحت کار">@lang('letters.in_process')</option>
                                            <option value="حفظ شد">@lang('letters.saved')</option>
                                            <option value="معذرت خواسته شد">@lang('letters.apology_requested')</option>
                                            <option value="اجراء شد">@lang('letters.complete')</option>
                                            <option value="معطل">@lang('letters.pending')</option>
                                        </select>
                                    </div>
                                    <div class="col-md-9 d-none petition-div">
                                        <label class="form-label">@lang('letters.activity_description')</label>
                                        <textarea name="petition_description" class="form-control" rows="1" placeholder="@lang('letters.activity_description')"></textarea>
                                    </div>
                                </div>
                                <div class="row mt-3" id="footer-button">
                                    <div class="col">
                                        <a href="{{ route('letter.outgoing.list') }}" type="button" class="btn btn-outline-secondary">
                                            <i class="fa fa-times-circle"></i> @lang('global.cancel')
                                        </a>
                                        <button type="button" class="btn btn-primary me-1" onclick="outgoingLetter('outgoing-letter');">
                                            <i class="fa fa-check-circle"></i> @lang('global.save')
                                        </button>
                                    </div>
                                </div>
                            </form>
                            @if ($errors->any())
                                <div style="color: red; border: 1px solid red; padding: 10px; margin-bottom: 10px;">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- 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>
    <style>
        .form-label{
            font-weight: 16px;
            font-weight: bold;
        }
        .outgoing-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('js')
        <script>
            function outgoingLetter(formID)
            {
                $("#letter_receiver .select2-selection").css("border", "");
                if (!validateForm(formID)) {
                    return false;
                }
                
                var letterType = $("#letter-type").val();
                var petitionAnswerTo = $("#petition-answer-to").val();
                var petitionExecutions = $("#petition-executions").val();

                // Only check for 'عریضه' letter type
                if (letterType === 'عریضه') {
                    if (petitionAnswerTo !== '' && petitionExecutions === '') {
                        // Add error class for styling
                        $("#petition-executions").css("border", "1px solid #F00");
                        return;
                    }
                }

                let letterReceiver = $("#letter_receiver").val();
                if(!letterReceiver || letterReceiver.length === 0){
                    $("#letter_receiver .select2-selection").css("border", "1px solid #F00");
                    return;
                }

                // Submit form if everything is valid
                $("#" + formID).submit();
            }

            function showLetterDetails()
            {
                var letterID = $("#letter-answer-to").val();
                if (letterID == '') {
                    $(".letter-answer-to .select2-selection").css("border", "1px solid #F00");
                    return;
                }
                $(".letter-answer-to .select2-selection").css("border", "");
                $.ajax({
                    url: "{{ route('letter-details') }}",
                    method: "GET",
                    data: {
                        id: letterID,
                        model: "IncomingLetter",
                        folder: "letter.incoming_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 showPetitionDetails()
            {
                var letterID = $("#petition-answer-to").val();
                if (letterID == '') {
                    $(".petition-answer-to .select2-selection").css("border", "1px solid #F00");
                    return;
                }
                $(".petition-answer-to .select2-selection").css("border", "");
                $.ajax({
                    url: "{{ route('petition-details') }}",
                    method: "GET",
                    data: {
                        id: letterID
                    },
                    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 showDecreesOrPetitionSection(val)
            {
                if(val === 'احکام'){
                    $(".decrees-div").removeClass("d-none");
                }else{
                    $(".decrees-div").addClass("d-none");
                }
                if(val === 'عریضه'){
                    $(".petition-select").removeClass("d-none");
                    $(".letter-select").addClass("d-none");
                    var petitionID = $("#petition-answer-to").val();
                    if(petitionID == ""){
                        $(".petition-div").addClass("d-none");
                    }else{
                        $(".petition-div").removeClass("d-none");
                    }
                }else{
                    $(".petition-select").addClass("d-none");
                    $(".letter-select").removeClass("d-none");
                    $(".petition-div").addClass("d-none");
                }
            }

            function showPetitionInfo(val)
            {
                let letterType = $("#letter-type").val();
                if(val != '' && letterType === 'عریضه'){
                    $(".petition-div").removeClass("d-none");
                }else{
                    $(".petition-div").addClass("d-none");
                }
            }
            $('#letter-answer-to').select2({
                placeholder: "{{ __('global.select') }}",
                allowClear: true,
                ajax: {
                    url: "{{ route('incommingletter.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) {
                                let parts = [];
                                if (item.number) parts.push(`(${item.number})`);
                                if (item.year) parts.push(item.year);
                                if (item.from) parts.push(item.from);

                                return {
                                    id: item.id,
                                    text: parts.join(' - ') // فقط فیلدهای موجود نمایش داده می‌شوند
                                };
                            })
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1
            });
            $('#petition-answer-to').select2({
                placeholder: "{{ __('global.select') }}",
                allowClear: true,
                ajax: {
                    url: "{{ route('application.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) {
                                let parts = [];
                                if(item.number) parts.push(`(${item.number})`);
                                if(item.year) parts.push(item.year);
                                if(item.name) parts.push(item.name);

                                return {
                                    id: item.id,
                                    text: parts.join(' - ') // فقط فیلدهای موجود
                                };
                            })
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1
            });
        </script>
    @endsection