@extends('admin.layouts.layouts')

@section('title', 'Attendance Adjustment Request')

@section('content')

    <style>
        .select2-container {
            margin: 0 5px 7px 0 !important;
        }

        .select2-container--default .select2-selection--single {
            height: 35px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 4px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 15px !important;
            margin-top: -5px !important;
        }

        #attendance-adjustment-table th
        {
            white-space: nowrap;
        }

        #attendance-adjustment-table td:nth-child(1) {
            white-space: normal;
            word-break: break-word;
            min-width: 150px;
        }

        #attendance-adjustment-table td:nth-child(2) {
            white-space: normal;
            word-break: break-word;
            min-width: 100px;
        }

        #attendance-adjustment-table td:nth-child(3) {
            white-space: normal;
            word-break: break-word;
            min-width: 100px;
        }

        #attendance-adjustment-table td:nth-child(4) {
            white-space: normal;
            word-break: break-word;
            min-width: 100px;
        }

        #attendance-adjustment-table td:nth-child(8) {
            white-space: normal;
            word-break: break-word;
            min-width: 250px;
        }

        .drawer {
            position: fixed;
            top: 0;
            right: -420px;
            width: 420px;
            max-width: 95%;
            height: 100%;
            background: #ffffff;
            box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
            transition: right 0.32s cubic-bezier(.2, .8, .2, 1);
            z-index: 2000;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border-left: 1px solid rgba(0, 0, 0, 0.06);
            font-size: 14px;
        }

        .drawer.open {
            right: 0;
        }

        .drawer-header {
            padding: 18px 16px;
            border-bottom: 1px solid #eee;
            background: #fafafa;
        }

        .drawer-header h5 {
            font-size: 16px;
            margin: 0;
        }

        .drawer-header .badge {
            font-size: 12px;
            padding: 6px 8px;
        }

        .drawer-body {
            padding: 14px;
        }

        .drawer-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1990;
        }

        .drawer-overlay.show {
            display: block;
        }

        .timeline {
            list-style: none;
            margin: 0;
            padding: 8px 8px 30px 16px;
            position: relative;
        }

        .timeline:before {
            content: "";
            position: absolute;
            left: 22px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: #ffffff;
        }

        .timeline-item {
            position: relative;
            margin: 0px 0 7px 0px;
            padding: 10px 12px;
            border-radius: 8px;
            background: #fff;
            border: 2px solid rgb(0 0 0 / 20%);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
        }

        .timeline-item .meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .timeline-item .meta .who {
            display: flex;
            align-items: center;
        }

        .user-dot {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #fff;
            margin-right: 10px;
            background: linear-gradient(135deg, #4e73df, #224abe);
            font-size: 13px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        }

        .timeline-item .time {
            color: #8a94a6;
            font-size: 12px;
            /* margin-top: 4px; */
        }

        .timeline-item .title {
            font-weight: 600;
            margin: 0;
            font-size: 14px;
        }

        .timeline-item .desc {
            color: #5b6470;
            font-size: 13px;
            margin-bottom: 6px;
            white-space: unset;
        }

        .ribbon {
            position: absolute;
            top: -2px;
            right: -2px;
            padding: 6px 8px;
            border-top-right-radius: 8px;
            border-bottom-left-radius: 8px;
            font-size: 10px;
            font-weight: bold;
            color: white;
            text-transform: uppercase;
        }

        .ribbon-requested {
            background: #6c757d;
        }

        .ribbon-approved {
            background: #28a745;
        }

        .ribbon-rejected {
            background: #dc3545;
        }

        @media (max-width: 520px) {
            .drawer {
                width: 100%;
                right: -100%;
            }

            .drawer.open {
                right: 0;
            }

            .timeline {
                padding-left: 12px;
            }

            .timeline:before {
                left: 12px;
            }

            .timeline-item {
                margin-left: 36px;
            }
        }
    </style>

    <div class="page-header">
        <h3 class="page-title">
            Attendance Adjustment Request
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Attendance</li>
                <li class="breadcrumb-item active" aria-current="page">Attendance Adjustment Request</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive" style="overflow-x:auto;">
                <table class="table table-nowrap" id="attendance-adjustment-table">
                    <thead>
                        <tr>
                            <th>Employee Name</th>
                            <th>Date</th>
                            <th>Orignal Time</th>
                            <th>Check In Type</th>
                            <th>Check Type</th>
                            <th>In Time</th>
                            <th>Out Time</th>
                            <th>Remark</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="adjustmentModal" tabindex="-1" role="dialog" aria-labelledby="adjustmentModalLabel" aria-hidden="true"
    data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="adjustmentModalLabel">Attendance Adjustment Request</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="adjustmentForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="employee_attendance_id" id="employeeAttendanceId">
                    <input type="hidden" name="status" id="status">
                    <input type="hidden" name="check_type" id="check_type">

                    <div class="modal-body">

                        <div class="form-group">
                            <label for="check_in_time" class="form-label">Check In Time</label>
                            <input type="time" class="form-control" id="check_in_time" name="check_in_time"
                                data-parsley-errors-container="#check_in_time_error">
                            <div class="invalid-feedback" id="check_in_time_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="check_out_time" class="form-label">Check Out Time</label>
                            <input type="time" class="form-control" id="check_out_time" name="check_out_time"
                                data-parsley-errors-container="#check_out_time_error">
                            <div class="invalid-feedback" id="check_out_time_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="remark" class="form-label">Remark <span class="text-danger">*</span></label>
                            <textarea type="text" class="form-control" id="remark" name="remark" placeholder="Enter Remark" rows="4"
                                data-parsley-required data-parsley-trigger='keyup' data-parsley-required-message="Please enter remark."
                                data-parsley-errors-container='#remark_error'></textarea>
                            <div class="invalid-feedback" id="remark_error">{{ $errors->first('remark') }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalSubmitBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="attendanceLogDrawer" class="drawer" aria-hidden="true" role="dialog" aria-labelledby="attendanceLogTitle">
        <div class="drawer-header d-flex align-items-start">
            <div>
                <h5 id="attendanceLogTitle" class="mb-1">Attendance Adjustment Log</h5>
            </div>
            <div class="ml-auto text-right">
                <button type="button" class="close closeDrawer" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
        </div>
        <div class="drawer-body" id="attendanceLogBody">
            <div class="text-center text-muted py-4" id="noLogsMsg">No logs found</div>
        </div>
    </div>
    <!-- Overlay -->
    <div id="drawerOverlay" class="drawer-overlay closeDrawer"></div>
@endsection

@section('page-js')
    <script type="text/javascript">
        const employeeAttendanceAjaxList = "{{ route('attendance-adjustment.ajax-list') }}";
        const attendanceAdjustment = "{{ route('attendance-adjustment.status') }}";
        const attendanceAdjustmentLogs = "{{ route('attendance.logs') }}";
    </script>
    <script src="{{ asset('assets/js/admin/attendance-adjustment.js') }}"></script>
@endsection