@extends('member-new')
@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('attendance/admin.attendance_log_view')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{{$alias}}/attendance-logs">{{trans('attendance/admin.attendance_logs')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{trans('attendance/admin.attendance_log_view')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <!-- Statistics Card -->
        <div class="col-xl-12 col-md-12 col-12">
            <div class="card card-statistics">
                <div class="card-header pb-0">
                    <h4 class="card-title">
                        @if ($type == 'Web_CheckIn' || $type == 'CHECK_INOUT')
                            {{ trans('attendance/admin.check_in_summary') }}({{ $attendance->attendance_date }})
                        @else
                            {{ trans('attendance/admin.attendance_summary') }}({{ $attendance->attendance_date }})
                        @endif
                    </h4>
                </div>
                <div class="card-body statistics-body" style="padding-bottom: 0px !important;">
                    <div class="row">
                        <div class="col-md-12 col-12 col-sm-12">
                            <div class="mb-1">
                                <h4 style="color:#7367F0;">
                                    {{ $attendance->employee ? $attendance->employee->name : '' }}</h4>
                            </div>
                            <hr>
                        </div>
                    </div>
                </div>

                @if ($type == 'Web_CheckIn')
                    <div class="row m-2">
                        <div class="col-md-12 col-12">
                            <div class="mb-2">
                                <h4 class="p-1 text-center"
                                    style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                    {{ trans('attendance/admin.check_in_attachments') }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="row m-2">
                        @if ($attendance->attachments)
                            @foreach ($attendance->getMedia('attachments') as $attachment)
                                <div class="col-md-4 pe-2 text-center">
                                    @if (
                                        $attachment->mime_type == 'application/msword' ||
                                            $attachment->mime_type == 'appplication/docx' ||
                                            $attachment->mime_type == 'appplication/doc')
                                        <a href="{{ $attachment->getUrl() }}" target="_blank"><img
                                                src="/assets/img/docx-icon.jpg" alt="attachment"
                                                style="width:250px;height: 250px; 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="width:250px;height: 250px; object-fit: contain;"></a>
                                    @else
                                        <a href="{{ $attachment->getUrl() }}" target="_blank"><img
                                                src="{{ $attachment->getUrl() }}" alt="attachment"
                                                style="width:250px;height: 250px; object-fit: contain;"></a>
                                    @endif
                                    <p class="text-center">{{ $attachment->file_name }}</p>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <hr>
                @elseif($type == 'CHECK_INOUT')
                    @if ($attendance->remarks)
                        <div class="row m-2">
                            <div class="col-md-12 col-12">
                                <div class="mb-2">
                                    <h4 class="p-1 text-center"
                                        style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                        {{ trans('attendance/admin.check_in_attachments') }}</h4>
                                </div>
                            </div>
                        </div>
                        @if ($attachments)
                            <div class="row m-2">
                                @foreach ($attachments as $attachment)
                                    <div class="col-md-6 pe-2 col-lg-4">
                                        <div class="card">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <a href="{{ str_replace($error, '', str_replace('\/', '/', strstr($attachment, '/storage'))) }}"
                                                        download><img
                                                            src="{{ str_replace($error, '', str_replace('\/', '/', strstr($attachment, '/storage'))) }}"
                                                            alt="attachment"
                                                            style="height: 250px; width:250px; object-fit: contain;"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @else
                        {{-- In attachments --}}
                        @if (@$attendance->in_address['attachment_url'])
                            <div class="row m-2">
                                <div class="col-md-12 col-12">
                                    <div class="mb-2">
                                        <h4 class="p-1 text-center"
                                            style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                            {{ trans('attendance/admin.check_in_attachments') }}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-2">
                                @foreach (@$attendance->in_address['attachment_url'] as $attachment)
                                    <div class="col-md-6 pe-2 col-lg-4">
                                        <div class="card">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <a href="{{ $attachment }}" download=""><img
                                                            src="{{ $attachment }}" alt="attachment"
                                                            style="height: 250px; width:250px; object-fit: contain;"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        {{-- Out Attachment --}}
                        @if (@$attendance->out_address['attachment_url'])
                            <div class="row m-2">
                                <div class="col-md-12 col-12">
                                    <div class="mb-2">
                                        <h4 class="p-1 text-center"
                                            style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                            {{ trans('attendance/admin.check_out_attachments') }}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-2">
                                @foreach (@$attendance->out_address['attachment_url'] as $attachment)
                                    <div class="col-md-6 pe-2 col-lg-4">
                                        <div class="card">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <a href="{{ $attachment }}" download=""><img
                                                            src="{{ $attachment }}" alt="attachment"
                                                            style="height: 250px; width:250px; object-fit: contain;"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endif
                @else
                    <div class="row m-2">
                        <div class="col-md-12 col-12">
                            <div class="mb-2">
                                <h4 class="p-1 text-center"
                                    style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                    {{ trans('attendance/admin.attendance_log_view') }}</h4>
                            </div>
                        </div>

                        @foreach ($attendanceLogs as $log)
                            <div class="col-md-6 pe-2 col-lg-4">
                                <div class="card">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <img src="{!! $log->photo !!}" alt="your image"
                                                style="width:250px;height: 250px;"
                                                onerror="this.src='/assets/img/default-profile-3.png'" />
                                        </div>
                                        <div class="card-footer">
                                            {{ date('d M Y H:i:s', strtotime($log->attendance_datetime)) }}</div>
                                        @if (isset($log->device))
                                            <div class="text-muted">Marked By: {{ $log->device->name }} -
                                                {{ ucwords($log->device->device_sub_type) . ' (' . $log->device->serial_number . ')' }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
        <!--/ Statistics Card -->
    </div>
</section>

@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>

    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        })
    </script>

<!-- END: Page JS-->
@endpush