@extends('lay.dnekcab.retsam')

@section('css')
<style>
    .select2-container{
        z-index: 1100;
    }
    .custom-divider {
        position: relative;
        text-align: center;
        margin: 40px 38px;
    }
    .custom-divider:before {
        content: '';
        display: block;
        width: 100%;
        height: 2px; /* Thickness of the divider */
        background-color: #e4dede; /* Divider color */
        position: absolute;
        top: 50%;
    }
    .custom-divider span {
        background: white; /* Background color of the text */
        padding: 0 10px; /* Padding around the text */
        position: relative;
        z-index: 1; /* Ensure the text is above the divider */
    }
</style>
@endsection

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')
<div class="page-content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header bg-transparent border-bottom text-center">
                <h4 class="p-2">{{ __('leave.view_leave_details') }}</h4>
            </div>
            <div class="card-body">
                <div class="card-title text-center">
                    <img src="{{ asset('assets/dnekcab/images/logo/logo.png')}}" alt="Eoffice Logo" style="height: 80px;">
                    <h5 class="mt-1">ریاست الوزراء ا.ا.ا</h5>
                </div>
                <div class="col-md-12">
                    <section>
                        <div class="row">
                            <x-leave-view-header :leave="$leave" /> 
                        </div>
                    </section>
                    <div class="custom-divider">
                        <span><i class="bx bx-star"></i></span>
                    </div>
                    @if($leave->employee->designation->hirarchy_level <= $HighLevelHirarchyId)

                        {{-- HeadOffice Aproval --}}
                        <section>
                            <div class="row">
                                <x-head-office-approval :leave="$leave" />
                            </div>
                        </section>

                    @else

                        {{-- Responsible Acceptance --}}
                        <section>
                            <div class="row">
                                <x-responsible-person-approval :leave="$leave" />
                            </div>
                        </section>

                        @if($leave->responsible_decline_at == null)
                            {{-- HR Approval --}}
                            <section>
                                <div class="row">
                                    <x-hr-leave-approval :leave="$leave" />
                                </div>
                            </section>
                            @if($leave->hr_decline_at == null)
                                {{-- Manager Approval --}}
                                <section>
                                    <div class="row">
                                        <x-manager-leave-approval :leave="$leave" />
                                    </div>
                                </section>
                                @if($leave->manager_decline_at == null)
                                    {{-- Directorate Approval --}}
                                    <section>
                                        <div class="row">
                                            <x-directorate-leave-approval :leave="$leave" />
                                        </div>
                                    </section>
                                    @if($leave->directorate_decline_at == null)
                                        {{-- Deputy Approval --}}
                                        <section>
                                            <div class="row">
                                                <x-head-office-approval :leave="$leave" />
                                            </div>
                                        </section>
                                    @endif
                                @endif
                            @endif
                        @endif

                    @endif
                </div>
            </div>
            <div class="card-footer">

            </div>
        </div>

        <x-confirmation-modal />

    </div>
</div>
@endsection

@section('js')
    <script>
        $(document).ready(function(){
            
        });
    </script>
@endsection