@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 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> {{ __('letters.archive_out') }}
                                    </li>
                                </ol>
                                <div class="d-flex gap-1 px-2">
                                    <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>
                                    <a href="{{ route('archive.out.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 archve-letter">
                            <div id="view-section">
                                <div class="row mt-1">
                                    <div class="col-md-6">
                                        <div class="row">
                                            {{-- entry number --}}
                                            <div class="col">
                                                <label class="form-label">@lang('letters.outgoing_number')</label><br>
                                                <p>{{ $recordInfo->number }}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            {{-- entry date --}}
                                            <div class="col">
                                                <label class="form-label">@lang('letters.date')</label><br>
                                                <p>{{ getHijriDate($recordInfo->date) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        {{-- letter description --}}
                                        <label for="description" class="form-label">@lang('letters.description')</label><br>
                                        <p>{{ $recordInfo->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>{{ $recordInfo->from }}</p>
                                    </div>
                                    <!-- Sender Department -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.sender_department')</label><br>
                                        <p>{{ $recordInfo->to }}</p>
                                    </div>
                                    <!-- Letter Type -->
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.letter_type')</label><br>
                                        <p>{{ $recordInfo->letter_type }}  @if($recordInfo->letter_type == 'احکام')<span style="color: rgb(33, 47, 241)" title="@lang('letters.save_number')">({{ $recordInfo->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.'.$recordInfo->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($recordInfo->answer_to != '')
                                                <a href="{{ route('archive.in.view', ['id' => encryption($recordInfo->answerTo->id)]) }}" target="_blank">
                                                    {{ $recordInfo->answerTo->maktub_number }} - {{ getYear($recordInfo->answerTo->maktub_date) }} - {{ $recordInfo->answerTo->from }}
                                                </a>
                                            @endif
                                            @if($recordInfo->type_link != '')
                                                @if(auth()->user()->hasPermissionTo('Application - View Application'))
                                                    <a href="{{ route('viewApplication', ['id' => encryption($recordInfo->petitionLink->id)]) }}" target="_blank">
                                                        {{ $recordInfo->petitionLink->number }} - {{ substr($recordInfo->petitionLink->date, 0, 4); }} - {{ $recordInfo->petitionLink->name }}
                                                    </a>
                                                @endif
                                            @endif
                                        </p>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">@lang('letters.related_book')</label><br>
                                        <p>{{ $recordInfo->case_number }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">@lang('letters.attachment')</label><br>
                                        @if ($recordInfo->file)
                                            <a href="{{ asset($recordInfo->file) }}" download><p>Download File</p></a>
                                        @endif
                                    </div>
                                </div>
                                <hr>
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <label class="form-label">@lang('letters.view_permissions')</label><br>
                                        @foreach($recordInfo->employees as $info)
                                            <p class="mb-0" style="font-weight: normal">{{ $loop->iteration }}. {{ $info->name }} {{ $info->last_name }} - {{ $info->designation->name }}</p>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            
                            <div id="edit-section" style="display: none">
                                <form method="POST" action="{{ route('archive.out.update', ['id' => encryption($recordInfo->id)]) }}" id="archve-letter-update" enctype="multipart/form-data">                                    
                                    @csrf
                                    @method('PUT')
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="row">
                                                {{-- entry number --}}
                                                <div class="col">
                                                    <label class="form-label">@lang('letters.outgoing_number') <span class="required">*</span></label>
                                                    <input type="number" class="form-control" name="r_outgoing_number" value="{{ $recordInfo->number }}" placeholder="@lang('letters.entry_number')"/>
                                                    <span class="text-danger hiddens">@lang('global.required')</span>
                                                </div>
                                            </div>
                                            <div class="row mt-1">
                                                {{-- entry date --}}
                                                <div class="col">
                                                    <label class="form-label">@lang('letters.entry_date') <span class="required">*</span></label>
                                                    <input type="text" class="form-control datepickers" value="{{ getHijriDate($recordInfo->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')">{{ $recordInfo->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="{{ $recordInfo->from }}" disabled />
                                            <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="r_to" value="{{ $recordInfo->to }}" />
                                            <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="متحدالمال" {{ $recordInfo->letter_type == 'متحدالمال' ? 'selected' : '' }}>@lang('letters.motahedulmal')</option>
                                                <option value="عادی" {{ $recordInfo->letter_type == 'عادی' ? 'selected' : '' }}>@lang('letters.normal')</option>
                                                <option value="احکام" {{ $recordInfo->letter_type == 'احکام' ? 'selected' : '' }}>@lang('letters.decrees')</option>
                                                <option value="پیشنهاد" {{ $recordInfo->letter_type == 'پیشنهاد' ? 'selected' : '' }}>@lang('letters.proposal')</option>
                                                <option value="استعلام" {{ $recordInfo->letter_type == 'استعلام' ? 'selected' : '' }}>@lang('letters.inquiry')</option>
                                                <option value="عریضه" {{ $recordInfo->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 p-2">
                                                <option value="">@lang('global.select')</option>
                                                <option value="yes" {{ $recordInfo->taqibi == 'yes' ? 'selected' : '' }}>@lang('letters.yes')</option>
                                                <option value="no" {{ $recordInfo->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($recordInfo->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" class="form-select select2">
                                                    <option value="">@lang('global.select')</option>
                                                    @foreach($incomingArchive as $info)
                                                        <option value="{{ $info->id }}" @if($recordInfo->answer_to == $info->id) selected @endif>
                                                            ({{ $info->maktub_number }}) - {{ getYear($info->maktub_date) }} - {{ $info->from }}
                                                        </option>
                                                    @endforeach
                                                </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($recordInfo->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" class="form-select select2" onchange="showPetitionInfo(this.value)">
                                                    <option value="">@lang('global.select')</option>
                                                    @foreach($application as $info)
                                                        <option value="{{ $info->id }}" @if($info->id == $recordInfo->type_link) selected @endif>({{ $info->number }}) - {{ substr($info->date, 0, 4); }} - {{ $info->name }}</option>
                                                    @endforeach
                                                </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="case_number" value="{{ $recordInfo->case_number }}" 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">
                                            <label class="form-label">@lang('letters.view_permissions') <span class="required">*</span></label>
                                            <select name="r_employee_id[]" class="form-select select2" multiple>
                                                <option value="">@lang('global.select')</option>
                                                @foreach($employee_access as $info)
                                                    <option value="{{ $info->id }}" 
                                                        @if($recordInfo->employees->contains('id', $info->id)) selected @endif>
                                                        {{ $info->name }} {{ $info->last_name }} - {{ $info->designation->name }}
                                                    </option>
                                                @endforeach
                                            </select>                                            
                                            <span class="text-danger hiddens">@lang('global.required')</span>
                                        </div>
                                        <div class="col-md-3 @if($recordInfo->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>
                                    <div class="row mt-3">
                                        <div class="col-md-3 @if($recordInfo->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>
                                        </div>
                                        <div class="col-md-9 @if($recordInfo->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')">{{ @$recordInfo->petitionLink->execution_desc }}</textarea>
                                        </div>
                                    </div>
                                    <div class="row mt-3" id="footer-button">
                                        <div class="col">
                                            <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>
                                            <button type="button" class="btn btn-primary me-1" onclick="updatetLetter('archve-letter-update');">
                                                <i class="fa fa-check-circle"></i> @lang('global.save')
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </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>
        select{
            background-position: left .75rem center !important;
            padding: 10px !important;
        }
        .form-label{
            font-weight: 16px;
            font-weight: bold;
        }
        .archve-letter p{
            font-weight: normal !important;
        }
        .archve-letter select{
            background-position: left 0.5em center;
            padding: 7px 10px;
        }
        @media print {
            .no-print {
                display: none !important;
            }
            .print-section {
                display: block !important;
            }
            .modal {
                position: relative !important;
                display: block !important;
                overflow: visible !important;
            }
            .modal, .modal-backdrop {
                display: none !important;
            }
        }

        @media screen {
            .print-section {
                display: none;
            }
        }

        #print-section{
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }
        #logo img{
            width: 200px;
        }
        #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 .select2-selection--multiple .select2-selection__rendered{
            display: block;
        }
        .select2-selection ul{
            padding: 0 2px !important;
        }
        .select2-selection ul li{
            margin-top: 3px !important;
        }
    </style>
    <script>
        // ------------------------------for update letter start-----------------------------------
        function updatetLetter(formID)
        {
            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;
                }
            }
            $("#"+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-------------------------------------

        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: "ArchiveLetter",
                    folder: "archive.incoming"
                },
                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");
            }
        }
    </script>
@endsection
<div class="print-section" id="print-section" style="display: none">
    <div id="logo">
        <img src="{{ asset('assets/logo/logo.png') }}">
    </div>
    <div id="title-info" class="mt-4">
        <h3>د ریاست الوزراء اقتصادی ریاست</h3>
        <h4>د دفتر عمومی ریاست</h4>
    </div>
    <br>
    <div class="row">
        <div class="col text-end mx-2">گنه: </div>
        <div class="col text-start ms-2">تاریخ: {{ getHijriDate(now()) }}</div>
    </div>
    <hr style="border-bottom: 2px ridge #4b4a4a; width: 98%; margin: 10px auto;">
    <div class="row mx-2">
        <p>بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
    </div>
    <div class="row mx-2">
        <h3 class="fw-bold text-end">د محترم وزارت ته!</h3>
    </div>
    <div class="row mx-2">
        <p class="text-end">السلام علیکم و رحمة الله و برکاته</p>
    </div>
    <div class="row mx-2 text-end">
        <label class="form-label">موضوع</label>
        <p id="letter-text" style="font-size: 16px;">{{ $recordInfo->editorial_text }}</p>
    </div>
    <div class="row mx-2">
        <p>دیره مننه</p>
    </div>
    <br>
    <div class="row mx-2">
        <p class="mb-0">{{ @$recordInfo->moqamInfo->name." ".@$recordInfo->moqamInfo->last_name }}</p>
        <p>{{ @$recordInfo->moqamInfo->designation->name }}</p>
    </div>
</div>