@extends('dashboard.layouts.index', ['breadcrumb' => ['main' => 'global.employee_profile','sub' => "global.employee_profile"], 'user_side' => $user])
@section('title')
@endsection

@section('content')
    <div class="page-header flex-5 d-flex col-gap-30 mb-30">
        <a href="{{'employment'}}" class="text-center">
            @lang("global.employment_details")
        </a>
        <a href="{{'finance'}}" class="text-center">
            @lang("global.finance")
        </a>
        <a href="{{'attendance'}}" class="text-center">
            @lang("global.attendance")
        </a>
        <a href="{{'documents'}}" class="active-item text-center">
            @lang("global.documents")
        </a>
        <a href="{{'info'}}" class="text-center">
            @lang("global.details")
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="page-box page-box-9">
                <div class="d-flex justify-content-between align-items-center p-30 pb-20 b-bottom">
                <span class="font-size-25 text-color-blue">
                   @lang("global.documents")
                </span>
                </div>

                <div class="p-30">
                    @foreach($documents as $document)

                        <div class="page-box page-box-9 mb-30">
                            <div class="page-box">
                                <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                    {{$document->title}}
                                </div>
                                <div class="p-30 editable-box">
                                    <div class="c-border b-r-2 p-in-30 py-17 d-flex justify-content-between align-items-center ">
                                        <a download="{{$document->document}}"
                                           href="{{asset($document->document)}}"
                                           class="">
                                            <div class="d-flex col-gap-16 align-items-center cursor-pointer">
                                                @include('svg-icons.document')

                                                <span class="font-size-18">
                                                    {{$user->first_name}}  {{$document->title}}
                                                </span>
                                            </div>

                                        </a>
                                        @include('svg-icons.edit')

                                    </div>

                                    <form class="form d-none-i" id="form" enctype="multipart/form-data"
                                          action="{{route("dashboard.users.employee.store-document")}}"
                                          novalidate method="POST">
                                        @csrf
                                        <input type="text" class="d-none" name="employee_id" value="{{$user->id}}">
                                        <input type="text" class="d-none" name="id" value="{{$document->id}}">
                                        @component('dashboard.components.edit_text' , [
                                               "name" => "title",
                                               "type" => "text",
                                                'value' => $document->title,
                                               'maxlentgh' => 50,
                                               "title" => __("global.title"),
                                               "classlable" =>" required ",
                                               ])
                                        @endcomponent

                                        @component('dashboard.components.edit_image',[
                                                     'hide_default' => true,
                                                     'name' => 'file',
                                                     'value' => $document->document,
                                                     'upload_title' => trans('global.upload_document'),
                                                     'placeholder' => __('global.document') ,
                                                 ])
                                        @endcomponent

                                        <div class="d-flex justify-content-end w-100 mt-20">
                                            <button class=" btn font-size-14 p-in-10 edit-action-cancel">@lang('global.cancel') </button>
                                            <button class=" btn btn-info font-size-14 p-in-10" >@lang('global.save') </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="page-box page-box-9 mb-30">
                            <div class="page-box">

                                <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                    @lang("global.passport")
                                </div>

                                <div class="p-30">
                                    <a  download="{{$user->userinformationOne->identity_passport}}" href="{{asset($user->userinformationOne->identity_passport)}}" class="c-border b-r-2 p-in-30 py-17 d-flex justify-content-between align-items-center">
                                        <div class="d-flex col-gap-16 align-items-center cursor-pointer">
                                            @include('svg-icons.document')

                                            <span class="font-size-18">
                                                {{$user->first_name}}  Passport
                                            </span>
                                        </div>

                                        @include('svg-icons.edit')
                                    </a>
                                </div>
                            </div>
                        </div>
                    <div class="row mb-30">
                        <div class="col-12">
                            <div class="add-submit d-flex justify-content-center w-100 text-center">
                                <a class="add-btn" data-toggle="modal" data-target="#add-document"
                                   href="">@lang('global.add_new_documents')</a>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
    @component('dashboard.components.modal', ['id' => 'add-document', 'title' => trans('global.add_new_documents')])
        <form class="form" id="form" enctype="multipart/form-data"
              action="{{route("dashboard.users.employee.store-document")}}"
              novalidate method="POST">
            @csrf
            <input type="text" class="d-none" name="employee_id" value="{{$user->id}}">
            @component('dashboard.components.edit_text' , [
                   "name" => "title",
                   "type" => "text",
                   'maxlentgh' => 50,
                   "title" => __("global.title"),
                   "classlable" =>" required ",
                   ])
            @endcomponent

            @component('dashboard.components.edit_image',[
                         'hide_default' => true,
                         'name' => 'file',
                         "required" => true,
                         'upload_title' => trans('global.upload_document'),
                         'placeholder' => __('global.document') ,
                     ])
            @endcomponent

            <div class="d-flex justify-content-center mb-14 w-100 mt-30">
                <button class="add-btn font-size-20 p-in-30" href="employee/create">@lang('global.save') </button>
            </div>
        </form>
    @endcomponent

@endsection