@extends('web.layouts.container')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/web/css/lib/jquerysctipttop.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/web/css/lib/bootstrap-datetimepicker.min.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('sidemenu')
    <section class="sidemenu">

        <div class="logo">
            <img src="{{asset('assets/web/images/logo.png')}}" alt="">
        </div>

        <ul class="sidemenu-links">
            <li class="linkGroup">
                <a href="#0" class="linkItem-head"> <i class="fas fa-th-large"></i> <span>{{__('employees.general_incoming')}}</span></a>
                <ul class="linkItem-body">
                    <li>
                        <a href="#">{{__('employees.inbox')}}</a>
                    </li>

                    <li>
                        <a href="#">{{__('employees.add_new')}}</a>
                    </li>

                </ul>
            </li>
            <li class="linkGroup">
                <a href="#0" class="linkItem-head"> <i class="fas fa-ban"></i> <span>{{__('employees.rejected')}}</span></a>
                <ul class="linkItem-body">
                    <li>
                        <a href="#">{{__('employees.inbox')}}</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"> <i class="fas fa-cogs"></i> <span>{{__('employees.settings')}}</span></a>
            </li>
            <li>
                <a href="{{route('emp.logout')}}"> <i class="fas fa-sign-out-alt"></i> <span>{{__('employees.logout')}}</span></a>
            </li>
        </ul>
    </section>
@endsection
@section('content')
    <div class="pages-links">
        <a href="#">{{__('employees.incoming_office')}} </a>
        <i class="fas fa-chevron-left"></i>
        <span>{{__('employees.add_new')}}</span>
    </div>
    <div class="mt-4">
        <div class="row">
            <div class="col-lg-6">
                <form method="post" action="{{route('letters.store')}}" class="income-form form-row letter_form" enctype="multipart/form-data">
                    @csrf()
                    <div class="form-group col-12">
                        <label>{{__('employees.incoming_number')}}</label>
                        <input type="text" name="incoming_number" class="income-input" placeholder="123456789">
                        <span class="icon"><img src="{{asset('assets/web/images/icons/1.svg')}}" alt=""></span>
                    </div>
                    <div class="form-group col-12">
                        <label>{{__('employees.subject')}}</label>
                        <input type="text" name="subject" class="income-input" placeholder="{{__('employees.subject')}}">
                        <span class="icon"><img src="{{asset('assets/web/images/icons/2.png')}}" alt=""></span>
                    </div>
                    <div class="income-sec col-12 row no-gutters">
                        <div class="form-group col-6 pl-2">
                            <label>{{__('employees.department')}} </label>
                            <select name="main_section" class="income-input main_section">
                                <option value="">{{__('employees.department')}}</option>
                                @if($sections)
                                    @foreach($sections as $section)
                                        <option value="{{$section->id}}">{{$section->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="form-group col-6 pl-2">
                            <label>{{__('employees.department_name')}}</label>
                            <select name="sub_section" class="income-input sub_section">
                                <option value="">{{__('employees.department_name')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 upload-img mt-4 mb-4">
                        <label class="upload-recipe-image d-block" for="upload-recipe">
                            <input type="file" name="image" id="upload-recipe">
                            <div class="upload-front">
                                <img src="{{asset('assets/web/images/icons/recupload.svg')}}" alt="">
                                <h5>{{__('employees.attach_pic')}}</h5>
                            </div>
                        </label>
                        <div class="gallery"></div>
                    </div>
                    <div class="form-group col-12">
                        <label>{{__('employees.letter_number')}}</label>
                        <input type="text" name="letter_number" class="income-input" placeholder="123456789">
                        <span class="icon"><img src="{{asset('assets/web/images/icons/1.svg')}}" alt=""></span>
                    </div>
                    <div class="form-group col-12">
                        <label>{{__('employees.incoming_entity')}}</label>
                        <select name="incoming_entity" class="income-input">
                            <option value="">{{__('employees.incoming_entity')}}</option>
                            @if($incomingEntities)
                                @foreach($incomingEntities as $incomingEntity)
                                    <option value="{{$incomingEntity->id}}">{{$incomingEntity->name}}</option>
                                @endforeach
                            @endif
                        </select>
                        <span class="icon"><img src="{{asset('assets/web/images/icons/3.svg')}}" alt=""></span>
                    </div>
                    <div class="form-group col-12">
                        <label>{{__('employees.trans_type')}}</label>
                        <select class="income-input trans_type" name="trans_type">
                            <option data-show=".internal_type" data-hide=".external_type" value="1">{{__('employees.internal')}}</option>
                            <option data-show=".external_type" data-hide=".internal_type" value="2">{{__('employees.external')}}</option>
                        </select>
                        <span class="icon"><img src="{{asset('assets/web/images/icons/3.svg')}}" alt=""></span>
                    </div>
                    <div class="form-group col-12 internal_type">
                        <input type="text" name="internal_type" class="income-input" placeholder="{{__('employees.internal_entity')}}">
                    </div>
                    <div class="form-group col-12 external_type d-none">
                        <select name="external_type" class="income-input">
                            <option value="">{{__('employees.external_entity')}}</option>
                            @if($externalEntities)
                                @foreach($externalEntities as $externalEntity)
                                    <option value="{{$externalEntity->id}}">{{$externalEntity->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="form-group col-12">
                        <label>{{__('employees.incoming_date')}}</label>
                        <input type="text" name="incoming_date" class="income-input hijri-date-input" placeholder="{{__('employees.incoming_date')}}">
                        <span class="icon"><img src="{{asset('assets/web/images/icons/5.svg')}}" alt=""></span>
                    </div>
                    <div class="form-group col-12">
                        <label>{{__('employees.notice')}}</label>
                        <textarea name="notice" rows="6" class="income-input"></textarea>
                        <span class="icon"><img src="{{asset('assets/web/images/icons/4.svg')}}" alt=""></span>
                    </div>
                    <div class="form-group col-6">
                        <button class="butn w-100 p-3 letter_button"><span>{{__('employees.save')}}</span></button>
                    </div>
                    <div class="form-group col-6">
                        <a href="speech-add.html" class="butn w-100 p-3"><span>{{__('employees.new_letter')}} </span></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('inner_js')
<script src="{{ asset('assets/web/js/lib/moment-with-locales.min.js') }}"></script>
<script src="{{ asset('assets/web/js/lib/moment-hijri.min.js') }}"></script>
<script src="{{ asset('assets/web/js/lib/bootstrap-hijri-datetimepicker.min.js') }}"></script>
{{--<script src="{{ asset('assets/web/js/lib/notify.min.js') }}"></script>--}}
<script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        $(document).ready(function(e) {

            $('.trans_type').change(function () {
                $($(this).children('option:selected').data('show')).removeClass('d-none');
                $($(this).children('option:selected').data('hide')).addClass('d-none');
            });

            $('.main_section').change(async function () {
                let loading = $('.loading');
                loading.removeClass('d-none');

                let data = {section_id: $(this).val()},
                    url = "{{route('letters.getSection')}}",
                    method = 'get';

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response) {
                    $('.sub_section').html(response);
                    loading.addClass('d-none');
                }

            });

            $('.letter_button').click(async function (e) {
                e.preventDefault();

                let loading = $('.loading');
                loading.removeClass('d-none');

                let form = $('.letter_form'),
                    data = new FormData(form[0]),
                    url = form.attr('action'),
                    method = form.attr('method');

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method,
                    contentType: false,
                    processData: false,
                });

                if (response.errors) {
                    loading.addClass('d-none');
                    toastr.options.closeButton = true;
                    toastr.options.showMethod = 'slideDown';
                    toastr.options.hideMethod = 'slideUp';
                    toastr.options.closeMethod = 'slideUp';
                    toastr.options.closeDuration = 200;
                    toastr.error(response.errors);
                }
                if (response.message) {
                    loading.addClass('d-none');
                    toastr.options.closeButton = true;
                    toastr.options.showMethod = 'slideDown';
                    toastr.options.hideMethod = 'slideUp';
                    toastr.options.closeMethod = 'slideUp';
                    toastr.options.closeDuration = 200;
                    toastr.success(response.message);
                }
            });

            /** Start Datepicker block */
            initHijrDatePicker();
            initHijrDatePickerDefault();
            $('.disable-date').hijriDatePicker({
                minDate:"2020-01-01",
                maxDate:"2021-01-01",
                viewMode:"years",
                hijri:true,
                debug:true
            });
            function initHijrDatePicker() {
                $(".hijri-date-input").hijriDatePicker({
                    locale: "ar-sa",
                    format: "DD-MM-YYYY",
                    hijriFormat:"iYYYY-iMM-iDD",
                    dayViewHeaderFormat: "MMMM YYYY",
                    hijriDayViewHeaderFormat: "iMMMM iYYYY",
                    showSwitcher: true,
                    allowInputToggle: true,
                    useCurrent: true,
                    isRTL: true,
                    viewMode:'months',
                    keepOpen: false,
                    hijri: true,
                    debug: true,
                    showClear: true,
                    showTodayButton: true,
                    showClose: true
                });
            }
            function initHijrDatePickerDefault() {
                $(".hijri-date-default").hijriDatePicker();
            }
            /** End Datepicker block */

            $(".add-sec-btn").click(function(e) {
                $(".income-sec")
                    .append('<div class="form-group col-5 pl-2">' +
                        '<label> القـــــســــم</label>' +
                        '<input type="text" class="income-input" placeholder="بحث ...">' +
                        '</div>' +
                        '<div class="form-group col-5 pl-2">' +
                        '<label> إسم القسم</label>' +
                        '<input type="text" class="income-input" placeholder=" ...إسم الفسم ">' +
                        ' </div>');
            });
        });

        // Multiple images preview in browser
        let imagesPreview = function(input, placeToInsertImagePreview) {
            if (input.files) {
                let filesAmount = input.files.length;

                for (let i = 0; i < filesAmount; i++) {
                    let reader = new FileReader();

                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                    };

                    reader.readAsDataURL(input.files[i]);
                }
            }

        };

        $('#upload-recipe').on('change', function() {
            imagesPreview(this, 'div.gallery');
        });
    </script>
@endsection