@php
    $joiningDate = auth()->user()->employeeMaster->date_of_joining ?? null;

    // Default current month and year
    $currentYear = now()->year;
    $currentMonth = now()->month;

    // If employee joining date exists
    if ($joiningDate) {
        $joining = \Carbon\Carbon::parse($joiningDate);
        $joinMonth = $joining->month;
        $joinYear = $joining->year;
    } else {
        $joinMonth = 1;
        $joinYear = $currentYear;
    }

    // Generate month-year pairs
    $startMonth = ($joinYear == $currentYear) ? $joinMonth : 1;
@endphp

@extends('admin.layouts.layouts')

@section('title', 'My Attendance')

@section('content')

    <style>
        .select2-container {
            margin: 0 12px 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;
        }

        .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">
            My Attendance
        </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">My Attendance</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
            </div>
            <div class="d-flex align-items-center">
                {{-- <input type="text" class="form-control attendanceDate"
                    style="padding: 0.52rem 0.375rem !important; margin: 0 5px 6px 0; width: 60%;"> --}}
                <div class="mt-2" style="flex: 2;">
                    <select class="form-control form-control-sm monthAttendance mt-2" style="width: 150px !important;">
                        <option value="">Select Month</option>

                        @for ($month = $startMonth; $month <= $currentMonth; $month++)
                            <option value="{{ $month }}">
                                {{ \Carbon\Carbon::create()->month($month)->format('F') }}
                            </option>
                        @endfor
                    </select>
                </div>

                <div class="mt-2" style="flex: 1;">
                    <select class="form-control form-control-sm yearAttendance" style="width: 115px !important;">
                        <option value="">Select Year</option>
                        @for ($year = $joinYear; $year <= $currentYear; $year++)
                            <option value="{{ $year }}">{{ $year }}</option>
                        @endfor
                    </select>
                </div>

                <button class="btn btn-primary btn-sm" title="Search" id="refreshAttendance">
                    <i class="fa-solid fa-search"></i>
                </button>
                <button class="btn btn-danger btn-sm ml-1" title="Reset" id="resetAttendance">
                    <i class="fa-solid fa-remove"></i>
                </button>
                <button class="btn btn-sm btn-primary ml-1" id="salary-btn">Get Salary</button>
            </div>
        </div>
        <div class="card-body">
            <table class="table w-100" id="my-attendance-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Date</th>
                        <th>Check In Type</th>
                        <th>Check-in Time</th>
                        <th>Check-out Time</th>
                        <th>Total Hours</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </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">Adjust Attendance</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="date" id="adjustmentDate">
                    <div class="modal-body">
                        @php
                            $checkInOptions = explode(',', auth()->user()->employeeMaster?->check_in_option ?? '');
                        @endphp
                        <div class="form-group">
                            <label for="check_in_out_option" class="form-label">Check In/Out Option <span class="text-danger">*</span></label>
                            <select name="check_in_out_option" id="check_in_out_option" class="form-control" data-parsley-required
                                data-parsley-trigger="change" data-parsley-required-message="Please select check type"
                                data-parsley-errors-container="#check_in_out_option_error">
                                <option value="">Select Check In/Out Option</option>
                                @foreach ($checkInOptions as $option)
                                    <option value="{{ $option }}">
                                        {{ $option }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" id="check_in_out_option_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="check_type" class="form-label">Check Type <span class="text-danger">*</span></label>
                            <select name="check_type" id="check_type" class="form-control" data-parsley-required
                                data-parsley-trigger="change" data-parsley-required-message="Please select check type"
                                data-parsley-errors-container="#check_type_error">
                                <option value="">Select Check Type</option>
                                <option value="check_in">Check In</option>
                                <option value="check_out">Check Out</option>
                                <option value="full">Full (Check In & Check Out)</option>
                            </select>
                            <div class="invalid-feedback" id="check_type_error"></div>
                        </div>

                        <div class="form-group d-none" id="check_in_time_box">
                            <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 d-none" id="check_out_time_box">
                            <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('my-attendance.ajax-list') }}";
        const attendanceAdjustment = "{{ route('my-attendance.adjustment-store') }}";
        const attendanceAdjustmentLogs = "{{ route('attendance.logs') }}";
        const generateSalaryRoute = "{{ route('my-attendance.salary-pdf') }}";
    </script>
    <script src="{{ asset('assets/js/admin/my-attendance.js') }}"></script>
@endsection