@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> {{ __('global.document_relation') }}
                                    </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.in.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 incoming-letter">
                            <div id="view-section">
                                <div class="row mt-1">
                                    <div class="col-md-6">
                                        <div class="row">
                                            {{-- entry number --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.entry_number')</label><br>
                                                <p>{{ $recordInfo->number }}</p>
                                            </div>
                                            {{-- entry date --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.entry_date')</label><br>
                                                <p>{{ getHijriDate($recordInfo->date) }}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            {{-- letter number --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.letter_number')</label><br>
                                                <p>{{ $recordInfo->maktub_number }}</p>
                                            </div>
                                            {{-- letter date --}}
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.letter_date')</label><br>
                                                <p>{{ getHijriDate($recordInfo->maktub_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-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.answer_to')</label><br>
                                                <p>
                                                    @if($recordInfo->answer_to != '')
                                                        <a href="{{ route('archive.out.view', ['id' => encryption($recordInfo->answerTo->id)]) }}" target="_blank">
                                                            {{ $recordInfo->answerTo->number }} - {{ getYear($recordInfo->answerTo->date) }} - {{ $recordInfo->answerTo->to }}
                                                        </a>
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.related_book')</label><br>
                                                <p>{{ $recordInfo->archive }}</p>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('letters.reffered')</label><br>
                                                <p>{{ $recordInfo->reffered }}</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>
                                    </div>
                                    <div class="col-md-6">
                                        {{-- letter description --}}
                                        <label class="form-label">@lang('letters.activity_description')</label><br>
                                        <p>{{ $recordInfo->execution_details }}</p>
                                    </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.in.update', ['id' => encryption($recordInfo->id)]) }}" id="incoming-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-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" value="{{ $recordInfo->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" value="{{ getHijriDate($recordInfo->date) }}" 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" value="{{ $recordInfo->maktub_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" value="{{ getHijriDate($recordInfo->maktub_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')">{{ $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" name="r_sender" value="{{ $recordInfo->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')</label>
                                            <input type="text" class="form-control" value="{{ $recordInfo->to }}" disabled />
                                            <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" id="letter-type" class="form-select p-2" onchange="showDecreesNumber(this.value)">
                                                <option value="">@lang('global.select')</option>
                                                <option value="عادی" {{ $recordInfo->letter_type == 'عادی' ? 'selected' : '' }}>@lang('letters.normal')</option>
                                                <option value="مصوبه" {{ $recordInfo->letter_type == 'مصوبه' ? 'selected' : '' }}>@lang('letters.resolution')</option>
                                                <option value="احکام" {{ $recordInfo->letter_type == 'احکام' ? 'selected' : '' }}>@lang('letters.decrees')</option>
                                                <option value="پیشنهاد" {{ $recordInfo->letter_type == 'پیشنهاد' ? 'selected' : '' }}>@lang('letters.proposal')</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">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label">@lang('letters.reffered')</label>
                                                    <input type="text" class="form-control" name="reffered" value="{{ $recordInfo->reffered }}" placeholder="@lang('letters.reffered')" />
                                                    <span class="text-danger hiddens">@lang('global.required')</span>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label">@lang('letters.related_book')</label>
                                                    <input type="text" class="form-control" name="archive" value="{{ $recordInfo->archive }}" placeholder="@lang('letters.related_book')" />
                                                    <span class="text-danger hiddens">@lang('global.required')</span>
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col">
                                                    <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($outgoingLetter as $info)
                                                            <option value="{{ $info->id }}" @if($info->id == $recordInfo->answer_to) selected @endif>({{ $info->number }}) {{ getHijriDate($info->date) }}</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: 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 class="col @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" value="{{ $recordInfo->save_number }}" placeholder="@lang('letters.save_number')" />
                                                </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')">{{ $recordInfo->execution_details }}</textarea>
                                            <span class="text-danger hiddens">@lang('global.required')</span>
                                        </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>
                                    <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('incoming-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;
        }
        .incoming-letter p{
            font-weight: normal !important;
        }
        .incoming-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;
            }
            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 showDecreesNumber(val)
        {
            if(val === 'احکام'){
                $(".decrees-div").removeClass("d-none");
            }else{
                $(".decrees-div").addClass("d-none");
            }
        }
        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.outgoing"
                },
                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);
                }
            });
        }
    </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>