@extends('layouts.app')

@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
@stop

@section('content')
@include('layouts.partials.employee-files')
<div class="tab-content-wrapper">
    <!-- Tab Content -->
    @php
    $uriSegment = "";
        if(request()->has('user_id')){
            $uriSegment =  '?user_id='.request()->get('user_id');
        }
    @endphp
    <form id="form"
            name="onboarding-form"
            action="{{route('employee.documents.store.user').$uriSegment}}"
            method="POST"
    >

        <div class="w-full mt-8 mb-8">
            <div class="flex flex-col gap-[20px]">
                <div class="bg-base-white border border-custom-grey-200 rounded-[8px] px-[32px] py-[24px]">
                    <div class="w-full flex flex-col gap-4">
                        <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0">
                            <label for="name" class="form-label text-sm-semibold w-full lg:w-1/2">{{trans("forms.lbl_name")}} *</label>
                            <input type="text" id="name" name="name" class="form-input w-full lg:w-1/2" value="" />
                        </div>

                        <hr/>

                        <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0">
                            <label for="expired_at" class="form-label text-sm-semibold w-full lg:w-1/2">{{trans("employee_documents.expiry_date")}}</label>
                            <div class="w-full lg:w-1/2 relative">
                                <input type="text" id="expired_at" name="expired_at" class="form-input w-full datepicker" value="" />
                            </div>
                        </div>

                        <hr/>

                        <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0">
                            <div for="name" class="form-label text-sm-semibold w-full lg:w-1/2">
                                {{trans("employee_documents.select_documents")}}
                            </div>
                            <div class="w-full lg:w-1/2">
                                <div class="file-upload-wrapper">
                                    <div id="fileuploader"
                                    data-types="jpg,jpeg,png,gif,pdf,docx,ppt,pptx,doc,xlsx,xls,mp4,mpeg,m4p,m4v,mov,avi"
                                    data-assets="">{{trans("employee_documents.select_documents_upload")}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap justify-start items-center gap-2">
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_create')}}
                    </button>
                    <a href="{{route('employee.documents.index').$uriSegment}}"  class="btn-tertiary-base">{{trans('forms.lbl_cancel')}}</a>
                </div>
            </div>
        </div>

    </form>
</div>

@stop

@section('footer-script')
    <!-- plugin js for this page -->
    <script src="{{ asset('js/tailwind/profile.js') }}"></script>

    <!-- Custom js for this page-->
    <script src="{{asset('js/jquery-file-upload.js')}}"></script>
    <script type="text/javascript">
        $(".date-block").hide();

        $(".btn-save").on("click", function(event) {
			event.preventDefault();

            if (window.isUploading) {
                // If uploads are in progress, mark submission as pending
                //$("#status").html("Waiting for uploads to complete...");
                $(this).data("submitPending", true);

                return;
            }

            data = $('#form').serialize();
            data = data+"&files="+ JSON.stringify(selectedFiles);

			PDRequest({
				type    : "POST",
				url     : $("#form").prop("action"),
				data    : data,
				event   : event
			}).then((response) => {
                @if(request()->has('user_id'))
                    window.location = "{{route('employee.documents.index')."?user_id=".request()->get('user_id')}}";
                @else
                    window.location = "{{route('employee.documents.index')}}";
                @endif
            });
		});

        $("body").on("change", "select[name='document_type_id']", function(e) {

            var expiry = parseInt($(this).find(':selected').data('expiry')),
                datepickerBlock = $('.date-block');

            expiry ? datepickerBlock.show() : datepickerBlock.hide();
        });
    </script>
@stop