@extends('app') @section('page-title') 
    @if (isset($status))
        <div class="pad margin no-print">
            <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
                <ul>
                    @foreach ($status['messages'] as $m)
                    <li>{{$m}}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
    <div class="row bg-title">

        <!-- .page title -->
        <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
            <h4 class="page-title"><i class="icon-people"></i> Leave Details
            </h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">

        </div>
        <!-- /.breadcrumb -->
    </div>
    <style>
        .user-bg {
            width: 467px;
            height: 331px;
        }
    </style>
@endsection @push('head-script')

<style>
    .curveBox{
        border-radius: 15px;
        background-color: rgb(226, 226, 226);
        padding: 20px;
        box-shadow: 0px 5px 15.04px 0.96px rgba(0, 0, 0, 0.13); 
    } 
    .profiledetail{
        color: black;
        font-weight:bold;
        font-size: 20px;
        margin: 0;
    }
    .profiledetailinfo{
        color: #000;
        font-size: 14px;
        font-weight: 500
    } 
    .profiledetailinfo i {
        color: #2F2F2F;
        font-size: 13px;
        margin: 0 5px
    } 
    .profilmainheadbox {
        margin-top: 15px;
        border-radius: 15px;
        background-color: white;
        padding: 10px;
    }
    .profilmainhead{ 
        color: rgba(0, 0, 0, 0.671);
        font-size: 13px;
        font-weight: 500;
    }
    .profilmainheadvalue{
        color: #000;
        font-weight: bold;
        font-size: 15px ;
        margin-top: 0px;
        margin-bottom: 0
    }
    .roundimg {
        border-radius: 10px;
        width: 100%;
    }
    
    .addnewbtn {
        padding: 5px;
        border: 1px solid #1e92ee;
        border-radius: 100px;
        color: #1e92ee;
        background: none;
        float: right;
        margin-right: 20px;
        font-weight: bold;
        padding-left: 10px;
        padding-right: 5px;
        margin-top: 0px;
    }
    .addnewbtn:hover {
        background: #1e92ee;
        border: 1px solid #1e92ee;
        color: #fff
    }
    
    .addnewbtn i { 
        color: #1e92ee; 
    }
    .addnewbtn:hover i { 
        color: #fff
    }
    i{
        cursor: pointer;
    }
    
    .customerinfotable thead th { color: rgba(0, 0, 0, 0.4) !important; font-size: 14px !important; text-transform: none !important; font-weight: 500}
    .customerinfotable>tbody>tr td { font-weight: 500; font-size: 13px; color: #000; padding: 15px;}
    .customerinfotable>tbody>tr:nth-of-type(odd) { background: #f0f0f0 !important}
    
        
    .emplleaveinfo thead th { color: #000 !important; font-size: 14px !important; text-transform: none !important; font-weight: 500}
    .emplleaveinfo>tbody>tr td:first-child { font-weight: 500; font-size: 17px; color: #000; padding: 15px;}
    
    .emplleaveinfo>tbody>tr td .label-default { background: #767677; color: #fff; font-size: 12px; font-weight: 500 }
    .emplleaveinfo>tbody>tr td .label-warning { background: #fc9d37; color: #fff; font-size: 12px; font-weight: 500 }
    .emplleaveinfo>tbody>tr td .label-success { background: #49d07c; color: #fff; font-size: 12px; font-weight: 500 }
    .emplleaveinfo>tbody>tr td .label-danger { background: #ee1e80; color: #fff; font-size: 12px; font-weight: 500 }
    
        
    .customerinfotable>tbody>tr td .label-danger { background: #ee1e80; color: #fff; font-size: 12px; font-weight: 500 }
    .customerinfotable>tbody>tr td .label-success { background: #49d07c; color: #fff; font-size: 12px; font-weight: 500 }
    
    
        
    
    .modal-header .close {
        color: black !important;
        font-size: 35px;
        opacity: 1;
    }
    .modal-header {
        background-color: white !important;
    }
    
    .modal-header span {
        font-size: 20px; font-weight: 600
    }
    
    
    
    .customermaininfo .nav-tabs>li.active>a, .customermaininfo .nav-tabs>li.active>a:focus, .customermaininfo .nav-tabs>li.active>a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: none;
        border-bottom-color: transparent;
    } 
    .customermaininfo .nav-tabs { border: none; justify-content: center; margin-bottom: 7px; }
    .customermaininfo .nav-tabs .nav-item { padding: 0px 50px;}
    .customermaininfo .nav-tabs .nav-link  { font-weight: 700; color: rgba(0, 0, 0, 0.4);  font-size: 12px; padding:15px 0 5px;  font-weight: bold; background: none; border: 0; margin-top: 19px;}
    .customermaininfo .nav-tabs .nav-item.show .nav-link, .customermaininfo .nav-tabs .nav-item.active .nav-link { border: none; background: none; color: #1e92ee; border-bottom: #1e92ee 2px solid;  opacity: 1;}
    .customermaininfo .nav-tabs .nav-link:hover {  color: #000;  }

    .customermaininfo .tab-pane { padding: 20px 40px 20px 20px; border-radius: 5px;}
    
    
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/custom-select/custom-select.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css"> @endpush @section('content')

@section('content')
<div class="white-box"> 
    <div class="row">
        
        <div class="col-md-12"> 
            <div class="row">
                <div class="col-md-12 customermaininfo"> 
                    
                    <div class="tab-content" style="margin-top:0;">
                        <div class="tab-pane active" id="customer_details">
                            <div class="profilmainheadbox">
                                 <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group col-md-4">
                                            <label>Employee</label>
                                            <br>
                                            {{ (!is_null($leave->user_id)) ? ucwords($leave->user->name) : '-' }}
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>Leave Type</label>
                                            <br>
                                            {{ (!is_null($leave->leave_type_id)) ? ucwords($leave->leaveType->type_name) : '-' }}
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>Leave Status</label>
                                            <br>
                                            {{ (!is_null($leave->leave_status)) ? ucwords($leave->leave_status) : '-' }}
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>Apply Date & Time</label>
                                            <br>
                                          {{ (!is_null($leave->created_at)) ? $leave->created_at : '-' }}
                                        </div>
                                        
                                        <div class="form-group col-md-4">
                                            <label>Leave Duration</label>
                                            <br>
                                            {{ (!is_null($leave->duration)) ? ucwords($leave->duration) : '-' }}
                                            
                                        </div>
                                        @if ($leave->duration=='multiple')
                                        <div class="form-group col-md-4">
                                            <label>From Date</label>
                                            <br>
                                            {{ (!is_null($leave->start_date)) ? $leave->start_date : '-' }}
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>To Date</label>
                                            <br>
                                            {{ (!is_null($leave->end_date)) ? $leave->end_date : '-' }}
                                        </div>
                                        @else
                                            <div class="form-group col-md-4">
                                            <label>Date</label>
                                            <br>
                                            {{ (!is_null($leave->start_date)) ? $leave->start_date : '-' }}
                                        </div>
                                        @endif

                                        @if ($leave->leave_status!='pending')
                                        <div class="form-group col-md-4">
                                            <label>{{ucwords($leave->leave_status)}} By</label>
                                            <br>
                                          {{ ucwords($leave->action_by) }}
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ucwords($leave->leave_status)}} Date & Time</label>
                                            <br>
                                          {{ $leave->action_datetime }}
                                        </div>
                                        @endif
                                        <div class="form-group col-md-4">
                                            <label>Reason for absence</label>
                                            <br>
                                            {{ (!is_null($leave->reason)) ? $leave->reason : '-' }}
                                        </div>

                                 </div>
                                 @if ($leave->leave_status=='pending')
                                 <div class="col-md-4">
                                        <form action="{{env('APP_URL')}}/{!! $alias !!}/leaves/statuschange" method="post">
                                            <div class="row">
                                                <input type="hidden" name="leaveId" value="{{$leave->id}}">
                                                {{ csrf_field() }}
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                      <label>Leave Status</label>
                                                        <select class="select2 form-control" name="leave_status" id="leave_status">
                                                            <option value="approved">Approve</option>
                                                            <option value="rejected">Reject</option>
                                                            <option value="revoked">Revoke</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <label>Reason? (Optional)</label>
                                                    <div class="form-group">
                                                        <textarea name="remark" id="remark" class="form-control" cols="30" rows="5"></textarea>
                                                    </div>
                                                </div>
                                                <div class="form-actions">
                                                 <button type="submit" id="save-form" class="btn btn-success"><i class="fa fa-check"></i>Save</button>
                                                </div>
                                            </div>
                                        </form>
                                 </div>
                                 @endif
                             </div>
            
            @if($leave->files)
            <div class="row">
                <div class="col-md-12">
                    <label>Attachments</label> 
                    <div class="form-group">
                        @if($leave->files)
                            @foreach($leave->getMedia('files') as $attachment)
                                <div style="display:inline-block; position:relative; margin: 7px 7px 0 0;">
                                    @if($leave->mime_type=="application/msword" || $leave->mime_type=="appplication/docx" || $leave->mime_type=="appplication/doc")
                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/docx-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                    @elseif($attachment->mime_type=="application/pdf")
                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/pdf-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                    @else
                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="{{$attachment->getUrl()}}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                    @endif
                                    <p class="text-center">{{$attachment->file_name}}</p>
                                </div>
                            @endforeach
                        @endif

                    </div>
                </div>
            </div>
            @endif
             @if(!empty($leave->attachments))
            <div class="row">
            <label>Attachments</label>
                <div class="col-md-12">
                     
            @foreach($leave->attachments as $attachment)
                <div class="col-md-4 col-6 mb-2">
                    <a href="{!! $attachment !!}" target="_blank"><img src="{!! $attachment !!}" alt="your image" style="width:250px;height: 250px;" onerror="this.src='/assets/img/default-profile-3.png'" /></a>
                </div>                      
            @endforeach
                </div>
            </div>
            @endif
       
                            </div>
                        </div>

                       
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>  
@endsection

@endsection @push('footer-script')
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="/assets/plugins/bower_components/custom-select/custom-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

@endpush