@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 p-2">
                        <div class="card-header p-0" style="border: 1px solid #EEE">
                            <div class="d-flex justify-content-between align-items-center">
                                <ol class="breadcrumb align-items-center m-0">
                                    <li class="breadcrumb-item">
                                        <a href="{{ route('dashboard') }}">
                                            <i class="fa fa-list mx-1" style="position: relative; top: 2px"></i> {{ __('global.dashboard') }}
                                        </a>
                                    </li>
                                    <li class="breadcrumb-item active">
                                        <i class="fas fa-angle-double-left mx-1" style="position: relative; top: 3px"></i> {{ __('global.document_relation') }}
                                    </li>
                                </ol>
                                <div class="d-flex gap-1 px-2">
                                    @if(auth()->user()->hasPermissionTo('Letters - Outgoing Letter edit'))
                                        <button type="button" style="padding: 4px 6px !important" onclick="showHideSection('edit-section', 'view-section');" class="btn btn-primary btn-sm edit-btn">
                                            <i class="fa fa-pen"></i> {{ __('global.update') }}
                                        </button>
                                    @endif
                                    {{-- <button type="button" style="padding: 4px 6px !important" class="btn btn-primary btn-sm">
                                        <i class="fa fa-print"></i> {{ __('global.print') }}
                                    </button> --}}
                                    <a href="{{ route('letter.outgoing.list') }}" type="button" style="padding: 4px 6px !important" class="btn btn-outline-secondary btn-sm">
                                        {{ __('global.back') }} <i class="fa fa-arrow-circle-left"></i>
                                    </a>                                    
                                </div>
                            </div>
                        </div>
                        <div class="card-body outgoing-letter">
                            <div id="view-section">
                                <div class="row mt-1">
                                    {{-- entry number --}}
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.outgoing_number')</label><br>
                                        <p>{{ $letterInfo->number }}</p>
                                    </div>
                                    {{-- entry date --}}
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.date')</label><br>
                                        <p>{{ getHijriDate($letterInfo->date) }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        {{-- letter description --}}
                                        <label for="description" class="form-label">@lang('letters.description')</label><br>
                                        <p>{{ $letterInfo->description }}</p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row mt-3">
                                    <!-- Sender -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.sender')</label>
                                        <p>{{ $letterInfo->from }}</p>
                                    </div>
                                    <!-- Sender Department -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.sender_department')</label><br>
                                        <p>
                                            @foreach($letterInfo->recipients as $recipient)
                                                <span class="badge bg-info">{{ $recipient->name }}</span>
                                            @endforeach
                                        </p>
                                    </div>
                                    <!-- Letter Type -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.letter_type')</label><br>
                                        <p>
                                            {{ $letterInfo->letter_type }}
                                            @if($letterInfo->letter_type == 'احکام')
                                                <span style="color: rgb(49, 28, 241)" title="@lang('letters.save_number')">( {{ $letterInfo->save_number }} )</span>
                                            @endif
                                        </p>
                                    </div>
                                    <!-- Follow Up -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.follow_up')</label><br>
                                        <p>{{ __('letters.'.$letterInfo->taqibi) }}</p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row mt-3">
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.answer_to')</label><br>
                                        <p>
                                            @if($letterInfo->answer_to != '')
                                                <a href="{{ route('letter.incoming.view', ['id' => encryption($letterInfo->answerTo->id)]) }}" target="_blank">
                                                    {{ $letterInfo->answerTo->maktub_number }} - {{ getYear($letterInfo->answerTo->maktub_date) }} - {{ $letterInfo->answerTo->from }}
                                                </a>
                                            @endif
                                            @if($letterInfo->type_link != '' && $letterInfo->petitionLink)
                                                @if(auth()->user()->hasPermissionTo('Application - View Application'))
                                                    <a href="{{ route('viewApplication', ['id' => encryption($letterInfo->petitionLink->id)]) }}" target="_blank">
                                                        {{ $letterInfo->petitionLink->number }} - {{ substr($letterInfo->petitionLink->date, 0, 4); }} - {{ $letterInfo->petitionLink->name }}
                                                    </a>
                                                @endif
                                            @endif
                                        </p>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.related_book')</label><br>
                                        <p>{{ $letterInfo->archive }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">@lang('letters.attachment')</label><br>
                                        @if ($letterInfo->file)
                                            <a href="{{ asset($letterInfo->file) }}" download><p>Download File</p></a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            <div id="edit-section" style="display: none">
                                <form method="POST" action="{{ route('letter.outgoing.update', ['id' => encryption($letterInfo->id)]) }}" id="outgoing-letter-update" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="row">
                                        <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" value="{{ $letterInfo->number }}" placeholder="@lang('letters.entry_number')"/>
                                                    <span class="text-danger hiddens">@lang('global.required')</span>
                                                </div>
                                                {{-- entry date --}}
                                                <div class="col-md-12 mt-1">
                                                    <label class="form-label">@lang('letters.date') <span class="required">*</span></label>
                                                    <input type="text" class="form-control datepickers" value="{{ getHijriDate($letterInfo->date) }}" name="r_date" placeholder="@lang('letters.entry_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')">{{ $letterInfo->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" disabled value="{{ $letterInfo->from }}" placeholder="@lang('letters.sender')" />
                                            <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') <span class="required">*</span></label>
                                            @php
                                                // فقط آیدی‌ها را از رابطه recipients بگیر
                                                $selectedRecipients = $letterInfo->recipients->pluck('id')->toArray();
                                            @endphp

                                            <select name="letter_receiver[]" id="letter_receiver" multiple class="select2">
                                                @foreach ($organization as $item)
                                                    <option value="{{ $item->id }}" 
                                                        @if(in_array($item->id, $selectedRecipients)) selected @endif>
                                                        {{ $item->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="text-danger hiddens" id="letter_receiver_error">@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="متحدالمال" {{ $letterInfo->letter_type == 'متحدالمال' ? 'selected' : '' }}>@lang('letters.motahedulmal')</option>
                                                <option value="عادی" {{ $letterInfo->letter_type == 'عادی' ? 'selected' : '' }}>@lang('letters.normal')</option>
                                                <option value="احکام" {{ $letterInfo->letter_type == 'احکام' ? 'selected' : '' }}>@lang('letters.decrees')</option>
                                                <option value="فرمان" {{ $letterInfo->letter_type == 'فرمان' ? 'order' : '' }}>@lang('letters.decrees')</option>
                                                <option value="پیشنهاد" {{ $letterInfo->letter_type == 'پیشنهاد' ? 'selected' : '' }}>@lang('letters.proposal')</option>
                                                <option value="استعلام" {{ $letterInfo->letter_type == 'استعلام' ? 'selected' : '' }}>@lang('letters.inquiry')</option>
                                                <option value="عریضه" {{ $letterInfo->letter_type == 'عریضه' ? 'selected' : '' }}>@lang('letters.petition')</option>
                                            </select>
                                            <span class="text-danger hiddens">@lang('global.required')</span>
                                        </div>
                                        <!-- Follow Up -->
                                        <div class="col-md-3">
                                            <label class="form-label">@lang('letters.follow_up')</label>
                                            <select name="taqibi" class="form-select" @if($letterInfo->taqibi == 'yes') disabled @endif >
                                                <option value="">@lang('global.select')</option>
                                                <option value="yes" {{ $letterInfo->taqibi == 'yes' ? 'selected' : '' }}>@lang('letters.yes')</option>
                                                <option value="no" {{ $letterInfo->taqibi == 'no' ? 'selected' : '' }}>@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 @if($letterInfo->letter_type == 'عریضه') d-none @endif">
                                            <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">
                                                    @if($letterInfo->answerTo)
                                                        <option value="{{ $letterInfo->answer_to }}">
                                                            {{ $letterInfo->answerTo->maktub_number }} - {{ getYear($letterInfo->answerTo->maktub_date) }} - {{ $letterInfo->answerTo->from }}
                                                        </option>
                                                    @else
                                                        <option></option>
                                                    @endif
                                                </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  @if($letterInfo->letter_type != 'عریضه') d-none @endif">
                                            <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" onchange="showPetitionInfo(this.value)">
                                                    @if($letterInfo->type_link != '' && $letterInfo->petitionLink)
                                                        <a href="{{ route('viewApplication', ['id' => encryption($letterInfo->petitionLink->id)]) }}" target="_blank">
                                                            <option value="{{ $letterInfo->petitionLink->id }}">
                                                                {{ $letterInfo->petitionLink->number }} - {{ substr($letterInfo->petitionLink->date, 0, 4); }} - {{ $letterInfo->petitionLink->name }}
                                                            </option>
                                                        </a>
                                                    @else
                                                        <option value=""></option>
                                                    @endif
                                                </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" value="{{ $letterInfo->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 @if($letterInfo->letter_type != 'احکام') d-none @endif 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 @if($letterInfo->letter_type != 'عریضه') d-none @endif 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>
                                            <span class="text-danger hiddens" id="petition-executions-error">@lang('global.required')</span>
                                        </div>
                                        <div class="col-md-9 @if($letterInfo->letter_type != 'عریضه') d-none @endif 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')">{{ @$letterInfo->petitionLink->execution_desc }}</textarea>
                                        </div>
                                    </div>
                                    <div class="row mt-3" id="footer-button">
                                        <div class="col">
                                            <button type="button" class="btn btn-primary me-1" onclick="updatetLetter('outgoing-letter-update');">
                                                <i class="fa fa-check-circle"></i> @lang('global.save')
                                            </button>
                                            <button type="button" onclick="showHideSection('view-section', 'edit-section')" class="btn btn-outline-secondary">
                                                <i class="fa fa-times-circle"></i> @lang('global.cancel')
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            @if ($errors->any())
                                <div style="color: rgb(245, 73, 73); 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>
        #view-section, #view-section label, #view-section p{
            font-size: 20px !important;
        }
        select{
            background-position: left .75rem center !important;
            padding: 10px !important;
        }
        .form-label{
            font-weight: 16px;
            font-weight: bold;
        }
        .outgoing-letter p{
            font-weight: normal !important;
        }
        .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>
        // ------------------------------for update letter start-----------------------------------
        function updatetLetter(formID)
        {
            $("#petition-executions-error").hide();
            $("#letter_receiver_error").hide();

            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-error").show();
                    return;
                }
            }
            
            let letterReceiver = $("#letter_receiver").val();
            if(!letterReceiver || letterReceiver.length === 0){
                $("#letter_receiver_error").show();
                return;
            }

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

        function showHideSection(showID, hideID)
        {
            if(hideID == 'view-section'){
                $(".edit-btn").hide();
            }
            if(hideID == 'edit-section'){
                $(".edit-btn").show();
            }
            $("#"+hideID).slideUp();
            $("#"+showID).slideDown();
        }
        // ------------------------------for update letter end-------------------------------------
        // show answer to letter details
        
        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: "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");
            }
        }

        $('#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
        });

        $('#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
        });
    </script>   
@endsection