{{-- ============================= --}}



<div class="mt-5 md:mt-2">
    <div class="overflow-auto shadow md:flex sm:rounded" >
        <div class="w-full px-4 py-5 overflow-auto bg-white rounded">
            <div class="flex flex-col justify-between w-full mb-4 space-x-2 space-y-2 md:flex-row">
                <span class="text-xl text-blueskills">{{__("hr_messages.Manage Vacation Types")}}</span>
                <x-jet-input id="search" wire:model="search" placeholder="{{__('messages.search')}}" autocomplete="search"/>
                @can("add vacation_types")
                <x-add-alert>
                    <div class="mt-2">
                        <div class="mt-2">
                            {{-- English Name  --}}
                            <div class="col-span-6 sm:col-span-4">
                                <x-jet-label for="name" value="{{__('hr_messages.English Name')}}" />
                                <x-jet-input id="name" role="text" class="block w-full mt-1" wire:model.lazy="name_en" autocomplete="name" />
                                <x-jet-input-error for="name_en" class="mt-2 {{__('messages.text-left')}}" />
                            </div>
                            {{-- Arabic Name  --}}
                            <div class="col-span-6 sm:col-span-4">
                                <x-jet-label for="name_ar" value="{{__('hr_messages.Arabic Name')}}" />
                                <x-jet-input id="name" role="text" class="block w-full mt-1" wire:model.lazy="name_ar" autocomplete="name" />
                                <x-jet-input-error for="name_ar" class="mt-2 {{__('messages.text-left')}}" />
                            </div>
                            {{-- Days  --}}
                            <div class="col-span-6 sm:col-span-4">
                                <x-jet-label for="days" value="{{__('hr_messages.Days')}}" />
                                <x-jet-input id="days" type='number' role="number" class="block w-full mt-1" wire:model.lazy="days" autocomplete="days" />
                                <x-jet-input-error for="days" class="mt-2 {{__('messages.text-left')}}" />
                            </div>
                        </div>
                    </div>
                    <x-slot name="title">
                        {{__("hr_messages.Add Vacation Type")}}
                    </x-slot>
                </x-add-alert>

                @endcan
            </div>
            @if (session()->has('message'))
                <div class="col-span-6 text-sm text-center text-green-700">
                    {{ session('message') }}
                </div>
            @endif
            @if (session()->has('error'))
                <div class="col-span-6 text-sm text-center text-red-600">
                    {{ session('error') }}
                </div>
            @endif
        <!-- component -->
        <x-data-table>
                <x-slot name="head">
                    <x-table-row-head>
                        <x-table-heading >#</x-table-heading>
                        <x-table-heading sortable :direction="$sortField==='name_en'? $sortDirection:null" wire:click="sortBy('name_en')">{{__("hr_messages.English Name")}}</x-table-heading>
                        <x-table-heading sortable :direction="$sortField==='name_ar'? $sortDirection:null" wire:click="sortBy('name_ar')">{{__("hr_messages.Arabic Name")}}</x-table-heading>
                        <x-table-heading sortable :direction="$sortField==='days'? $sortDirection:null" wire:click="sortBy('days')">{{__("hr_messages.Days")}}</x-table-heading>
                        <x-table-heading sortable :direction="$sortField==='last_updated_by'? $sortDirection:null" wire:click="sortBy('last_updated_by')">{{__("messages.Updated By")}}</x-table-heading>
                        <x-table-heading sortable :direction="$sortField==='updated_at'? $sortDirection:null" wire:click="sortBy('updated_at')">{{__("messages.Updated At")}}</x-table-heading>
                        <x-table-heading sortable :direction="$sortField==='created_at'? $sortDirection:null" wire:click="sortBy('created_at')">{{__("messages.Created At")}}</x-table-heading>
                        <x-table-heading >&nbsp;</x-table-heading>
                    </x-table-row-head>
                </x-slot>
                <x-slot name="body">
                    @forelse ($vacations as $key =>$vacation)
                        <x-table-row>
                            <x-table-cell><x-slot name="header">#</x-slot>{{$vacations->firstItem() + $key }} </x-table-cell>
                            <x-table-cell><x-slot name="header">{{__("messages.Name")}}</x-slot>{{$vacation->name_en}}</x-table-cell>
                            <x-table-cell><x-slot name="header">{{__("messages.Name")}}</x-slot>{{$vacation->name_ar}}</x-table-cell>
                            <x-table-cell><x-slot name="header">{{__("hr_messages.Days")}}</x-slot>{{$vacation->days}}</x-table-cell>
                            <x-table-cell><x-slot name="header">{{__("messages.Updated By")}}</x-slot>{{($vacation->last_updated_by_user)?$vacation->last_updated_by_user->name:"-"}}</x-table-cell>
                            <x-table-cell><x-slot name="header">{{__("messages.Updated At")}}</x-slot>{{$vacation->updated_at}}</x-table-cell>
                            <x-table-cell><x-slot name="header">{{__("messages.Created At ")}}</x-slot>{{$vacation->created_at}}</x-table-cell>
                            <x-table-cell >
                                <div class="flex justify-end space-x-2">
                                @can("edit vacation_types")
                                <x-edit-alert>
                                    {{-- Edit English Name  --}}
                                    <div class="mt-2">
                                        <div class="col-span-6 sm:col-span-4">
                                            <x-jet-label for="name" value="{{__('hr_messages.English Name')}}" />
                                            <x-jet-input id="edit_name_en" role="text" class="block w-full mt-1" wire:model.lazy="edit_name_en" autocomplete="edit_name_en" />
                                            <x-jet-input-error for="edit_name_en" class="mt-2 {{__('messages.text-left')}} " />
                                        </div>
                                    </div>
                                    {{-- Edit Arabic Name  --}}
                                    <div class="mt-2">
                                        <div class="col-span-6 sm:col-span-4">
                                            <x-jet-label for="name" value="{{__('hr_messages.Arabic Name')}}" />
                                            <x-jet-input id="edit_name_ar" role="text" class="block w-full mt-1" wire:model.lazy="edit_name_ar" autocomplete="edit_name_ar" />
                                            <x-jet-input-error for="edit_name_ar" class="mt-2 {{__('messages.text-left')}} " />
                                        </div>
                                    </div>
                                    <x-slot name="title">
                                        {{__("hr_messages.Vacation Type")}} {{$vacation->name}}
                                    </x-slot>
                                    <x-slot name="model_id">
                                        {{$vacation->id}}
                                    </x-slot>
                                </x-edit-alert>
                                @endcan
                                @can("delete vacation_types")
                                <x-delete-alert>
                                    {{__("hr_messages.Vacation Type")}} {{$vacation->name}}
                                    <x-slot name="model_id">
                                        {{$vacation->id}}
                                    </x-slot>
                                </x-delete-alert>
                                    @endcan
                                </div>
                            </x-table-cell>
                        </x-table-row>
                    @empty
                    <x-table-row>
                        <x-table-cell class="text-gray-500"  colspan="6">
                            {{__("messages.Empty Result")}}
                        </x-table-cell>
                    </x-table-row>
                    @endforelse
                </x-slot>
            </x-data-table>
          {{$vacations->links()}}
        </div>
    </div>
</div>