@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Attendance Dashboard'))
@section('content')
    <style>
        .fc-day-grid-container {
            height: auto !important;
        }

        th {
            position: sticky;
        }

        .attendance-dash-stat .icon-wrap {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .level_show input[type="radio"] {
            display: none;
        }

        .button {
            display: inline-block;
            position: relative;
            width: 20px;
            margin: 10px;
            cursor: pointer;
        }

        .button span {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            padding: 0;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border-radius: 100%;
            background: #eeeeee;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            transition: ease .3s;
        }

        .orange .button span {
            background: #F86D5F;
        }

        .amber .button span {
            background: #F7C95F;
        }

        .lime .button span {
            background: #5ED09B;
        }

        .teal .button span {
            background: #38CDFC;
        }

        .blue .button span {
            background: #2D3B47;
        }

        .indigo .button span {
            background: #615DAD;
        }

        .gray .button span {
            background: #F5F5F7;
        }

        .layer {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: transparent;
            /*transition: ease .3s;*/
            z-index: -1;
        }

        .middle {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    </style>

    <div class="row mt-2 mb-2">
        <div class="col-12">
            <div class="alert alert-light border mb-0 py-2 px-3">
                <strong>{{ __('Attendance date') }}:</strong> {{ $attDate }}
                &nbsp;·&nbsp;
                <span class="text-muted">{{ __('Summary below uses department / branch / search filters. Status filter applies to the table only.') }}</span>
            </div>
        </div>
    </div>

    @if(auth()->user()->can('Attendance-create') || auth()->user()->can('Attendance-edit'))
        <div class="row mb-3">
            <div class="col-12">
                <div class="card border-primary shadow-sm">
                    <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('Manual attendance (GPS required)') }}</h5>
                        <span class="text-muted small">{{ __('Allow browser location. Current time is used for sign-in / sign-out.') }}</span>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info py-2 small mb-0">
                            {{ __('Select an employee, choose the attendance date, then use Set sign-in or Set sign-out. The system will request your device location before saving—without GPS the action cannot complete.') }}
                        </div>
                        <div class="form-row align-items-end">
                            <div class="form-group col-md-6 col-lg-4 mb-2 mb-lg-0">
                                <label for="admin_manual_staff_id">{{ __('Employee') }}</label>
                                <select id="admin_manual_staff_id" class="form-control select2" style="width:100%;" required>
                                    <option value="">{{ __('Select employee') }}</option>
                                    @foreach($manualAttendanceStaff as $st)
                                        <option value="{{ $st->id }}">
                                            {{ ($st->user->name ?? '—').'('.($st->user->id ?? '—').')' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6 col-lg-3 mb-2 mb-lg-0">
                                <label for="admin_manual_date">{{ __('Date') }}</label>
                                <input type="date" id="admin_manual_date" class="form-control" value="{{ \Illuminate\Support\Carbon::today()->toDateString() }}">
                            </div>
                            <div class="form-group col-12 col-lg-5 mb-0 d-flex flex-wrap align-items-end">
                                <button type="button" class="btn btn-success mr-2 mb-2" onclick="adminManualAttendancePrepare('in')">
                                    <i class="fas fa-sign-in-alt"></i> {{ __('Set sign-in') }}
                                </button>
                                <button type="button" class="btn btn-outline-success mb-2" onclick="adminManualAttendancePrepare('out')">
                                    <i class="fas fa-sign-out-alt"></i> {{ __('Set sign-out') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="row mt-1 mb-3">
        @foreach([
            ['value' => $summary['total'] ?? 0, 'label' => __('Staff in scope'), 'icon' => 'fas fa-users', 'color' => 'text-dark', 'bg' => 'rgba(45,59,71,.08)'],
            ['value' => $summary['P'] ?? 0, 'label' => __('Present (P)'), 'icon' => 'fas fa-user-check', 'color' => 'text-success', 'bg' => 'rgba(40,167,69,.12)'],
            ['value' => $summary['D'] ?? 0, 'label' => __('Late (D)'), 'icon' => 'fas fa-clock', 'color' => 'text-warning', 'bg' => 'rgba(255,193,7,.15)'],
            ['value' => $summary['E'] ?? 0, 'label' => __('Extra delay (E)'), 'icon' => 'fas fa-exclamation-triangle', 'color' => 'text-danger', 'bg' => 'rgba(220,53,69,.1)'],
            ['value' => $summary['A'] ?? 0, 'label' => __('Absent (A)'), 'icon' => 'fas fa-user-slash', 'color' => 'text-danger', 'bg' => 'rgba(220,53,69,.08)'],
            ['value' => $summary['L'] ?? 0, 'label' => __('On leave (L)'), 'icon' => 'fas fa-procedures', 'color' => 'text-info', 'bg' => 'rgba(23,162,184,.12)'],
        ] as $card)
            <div class="col-6 col-md-4 col-lg-2 mb-3">
                <div class="card attendance-dash-stat h-100 border-0 shadow-sm">
                    <div class="card-body py-3">
                        <div class="d-flex align-items-center">
                            <div class="icon-wrap mr-3" style="background: {{ $card['bg'] }};">
                                <i class="{{ $card['icon'] }} {{ $card['color'] }}"></i>
                            </div>
                            <div class="flex-grow-1 text-right">
                                <h4 class="mb-0 {{ $card['color'] }}">{{ $card['value'] }}</h4>
                                <p class="mb-0 font-12 text-muted text-truncate">{{ $card['label'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row mb-3">
        <div class="col-6 col-md-3 mb-3">
            <div class="card h-100 border-left border-warning shadow-sm" style="border-left-width: 4px !important;">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted font-12">{{ __('Pending leave applications') }}</div>
                            <h4 class="mb-0">{{ $pendingLeaveApplications }}</h4>
                        </div>
                        <i class="far fa-gem text-gradient-danger" style="font-size: 1.75rem;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-3">
            <div class="card h-100 border-left border-primary shadow-sm" style="border-left-width: 4px !important;">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted font-12">{{ __('Pending attendance reconciliation') }}</div>
                            <h4 class="mb-0">{{ $pendingReconciliation }}</h4>
                        </div>
                        <i class="fas fa-users text-gradient-warning" style="font-size: 1.75rem;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-3">
            <div class="card h-100 border-left border-info shadow-sm" style="border-left-width: 4px !important;">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted font-12">{{ __('On break now') }}</div>
                            <h4 class="mb-0">{{ $onBreakNow }}</h4>
                        </div>
                        <i class="fas fa-mug-hot text-gradient-primary" style="font-size: 1.75rem;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-3">
            <div class="card h-100 border-left border-secondary shadow-sm" style="border-left-width: 4px !important;">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted font-12">{{ __('Other status records') }}</div>
                            <h4 class="mb-0">{{ $summary['other'] ?? 0 }}</h4>
                        </div>
                        <i class="fas fa-ellipsis-h text-muted" style="font-size: 1.75rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 custom_design">
            <div class="card shadow-sm">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <h5 class="mb-0">{{ __('Daily Attendance') }}</h5>
                    <span class="text-muted small">{{ __('Date') }}: {{ $attDate }}</span>
                </div>
                <div class="card-body">
                    <form method="get" action="{{ route('attendance.dashboard') }}" class="mb-3">
                        <div class="form-row align-items-end">
                            <div class="form-group col-6 col-md-4 col-lg-6 col-xl-4 mb-2 mb-xl-0">
                                <label class="small text-muted mb-1">{{ __('Date') }}</label>
                                <input type="date" name="att_date" class="form-control form-control-sm" value="{{ $attDate }}">
                            </div>
                            <div class="form-group col-6 col-md-4 col-lg-6 col-xl-4 mb-2 mb-xl-0">
                                <label class="small text-muted mb-1">{{ __('Attendance status') }}</label>
                                <select name="daily_status" class="form-control form-control-sm">
                                    <option value="">{{ __('All') }}</option>
                                    <option value="P" @selected(request('daily_status') === 'P')>{{ __('Present (P)') }}</option>
                                    <option value="D" @selected(request('daily_status') === 'D')>{{ __('Delay (D)') }}</option>
                                    <option value="E" @selected(request('daily_status') === 'E')>{{ __('Extra delay (E)') }}</option>
                                    <option value="A" @selected(request('daily_status') === 'A')>{{ __('Absent (A)') }}</option>
                                    <option value="L" @selected(request('daily_status') === 'L')>{{ __('Leave (L)') }}</option>
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-4 col-lg-6 col-xl-4 mb-2 mb-xl-0">
                                <label class="small text-muted mb-1">{{ __('Department') }}</label>
                                <select name="daily_department_id" class="form-control form-control-sm">
                                    <option value="">{{ __('All') }}</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}" @selected((string) request('daily_department_id') === (string) $dept->id)>{{ $dept->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-4 col-lg-6 col-xl-4 mb-2 mb-xl-0">
                                <label class="small text-muted mb-1">{{ __('Branch') }}</label>
                                <select name="daily_warehouse_id" class="form-control form-control-sm">
                                    <option value="">{{ __('All') }}</option>
                                    @foreach($warehouses as $wh)
                                        <option value="{{ $wh->id }}" @selected((string) request('daily_warehouse_id') === (string) $wh->id)>{{ $wh->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-4 col-lg-6 col-xl-4 mb-2 mb-xl-0">
                                <label class="small text-muted mb-1">{{ __('Employee name') }}</label>
                                <input type="search" name="daily_q" class="form-control form-control-sm" value="{{ request('daily_q') }}" placeholder="{{ __('Search') }}">
                            </div>
                            <div class="form-group col-12 col-md-8 col-lg-12 col-xl-4 mb-0 d-flex flex-wrap align-items-end">
                                <button type="submit" class="btn btn-primary btn-sm mr-1 mb-1">{{ __('Filter') }}</button>
                                <a href="{{ route('attendance.dashboard') }}" class="btn btn-outline-secondary btn-sm mb-1">{{ __('Clear') }}</a>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-striped table-hover table-sm mb-0">
                        <thead class="thead-light">
                        <tr>
                            <th>{{ __('Employee') }}</th>
                            <th>{{ __('Department') }}</th>
                            <th>{{ __('In Time') }}</th>
                            <th>{{ __('Out Time') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($dailyAttendanceRows as $row)
                            @php
                                $staff = $row['staff'];
                                $attendance = $row['attendance'];
                                $displayStatus = $row['status'];
                            @endphp
                                <tr>
                                    <td class="align-middle">
                                        <img class="rounded-circle border border-gray-300 mr-2"
                                             src="@if($staff->user->image) {{ asset('storage/' . $staff->user->image) }} @else {{ asset('storage/uploads/user-icon.png') }} @endif"
                                             width="44" height="44"
                                             onerror="this.onerror=null;this.src='{{ asset('storage/uploads/user-icon.png') }}';"
                                             alt="{{ $staff->user->name }}">
                                        <span class="fw-600">{{ $staff->user->name }}</span>
                                        <span class="text-muted small">({{ $staff->warehouse->name ?? '—' }})</span>
                                    </td>
                                    <td class="align-middle">{{ $staff->department->name ?? '—' }}</td>
                                    @if($attendance !== null)
                                        <td class="align-middle"><input class="form-control form-control-sm" type="time" value="{{ $attendance->signIn }}" readonly></td>
                                        <td class="align-middle"><input class="form-control form-control-sm" type="time" value="{{ $attendance->signOut }}" readonly></td>
                                        <td class="align-middle" style="min-width: 72px;">
                                            <input
                                                class="form-control form-control-sm text-white text-center @if($attendance->status=='P') bg-success @elseif($attendance->status=='D') bg-info @else bg-danger @endif"
                                                type="text" readonly value="{{ $attendance->status }}">
                                        </td>
                                        <td class="align-middle">
                                            <a class="btn btn-primary btn-sm" href="javascript:void(0);"
                                               onclick="Attendance_update({{ $attendance->id }}, @json($attendance->date), @json($attendance->signIn), @json($attendance->signOut));"><i class="fas fa-edit"></i></a>
                                        </td>
                                    @else
                                        <td class="align-middle"><input class="form-control form-control-sm" type="time" value="" readonly></td>
                                        <td class="align-middle"><input class="form-control form-control-sm" type="time" value="" readonly></td>
                                        <td class="align-middle">
                                            <input
                                                class="form-control form-control-sm text-white text-center @if($displayStatus === 'A') bg-danger @else bg-info @endif"
                                                type="text" readonly value="{{ $displayStatus }}">
                                        </td>
                                        <td class="align-middle"></td>
                                    @endif
                                </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">{{ __('No employees match the selected filters.') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ __('Attendance missed') }}</h5>
                    <span class="badge badge-secondary font-weight-normal">{{ __('This year · last :count rows', ['count' => 200]) }}</span>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2">{{ __('Incomplete in/out (excluding today). Edit to correct.') }}</p>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                    <table class="table table-striped table-hover table-sm mb-0">
                        <thead class="thead-light">
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Branch') }}</th>
                            <th>{{ __('In Time') }}</th>
                            <th>{{ __('Out Time') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($missingAttendances as $attendanceMissing)
                            @if($attendanceMissing->staff && $attendanceMissing->staff->user && $attendanceMissing->staff->user->is_active == 1)
                                <tr>
                                    <td class="align-middle">{{ date('D, M d', strtotime($attendanceMissing->date)) }}</td>
                                    <td class="align-middle">{{ $attendanceMissing->staff->user->name }}</td>
                                    <td class="align-middle small">{{ $attendanceMissing->staff->warehouse->name ?? '—' }}</td>
                                    <td class="align-middle"><input class="form-control form-control-sm" type="time" value="{{ $attendanceMissing->signIn }}" readonly></td>
                                    <td class="align-middle"><input class="form-control form-control-sm" type="time" value="{{ $attendanceMissing->signOut }}" readonly></td>
                                    <td class="align-middle">
                                        <a class="btn btn-primary btn-sm" href="javascript:void(0);"
                                           onclick="Attendance_update({{ $attendanceMissing->id }}, @json($attendanceMissing->date), @json($attendanceMissing->signIn), @json($attendanceMissing->signOut));"><i class="fas fa-edit"></i></a>
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body" style="height: 420px!important;">


                    <h4 class="m-t-5 m-b-15 font-16">Last 30 Days Attendance Summary</h4>


                    <div id="stacked-bar-chart" class="ct-chart ct-golden-section mb-3"></div>

                    <div class="level_show text-center mb-3 middle">
                        <label class="orange middle">
                            <input type="radio" name="color" value="orange">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Leave 1st Half
                        </label>

                        <label class="amber middle">
                            <input type="radio" name="color" value="amber">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Extreme Delay
                        </label>

                        <label class="lime middle">
                            <input type="radio" name="color" value="lime">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Leave
                        </label>

                        <label class="teal middle">
                            <input type="radio" name="color" value="teal">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Delay
                        </label>

                        <label class="blue middle">
                            <input type="radio" name="color" value="blue">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Holiday
                        </label>

                        <label class="indigo middle">
                            <input type="radio" name="color" value="indigo">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Present
                        </label>
                        <label class="gray middle">
                            <input type="radio" name="color" value="indigo">
                            <div class="layer"></div>
                            <div class="button"><span></span></div>
                            Leave 2nd Half
                        </label>
                    </div>

                </div>
                <!-- end row -->

            </div>
        </div>
    </div> <!-- end col -->

@endsection
@section('modal')
    <div class="modal fade" id="Attendance_update_modal">
        <form action="{{route('attendance.update')}}" method="POST">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Attendance Update')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table aiz-table mb-0">
                            <tbody>

                            <input class="form-control" type="hidden" name="id" id="id" value="">

                            <tr>
                                <td><label for="">SignIn</label></td>
                                <td><input class="form-control" type="time" id="signin" value="" name="signin"></td>
                            </tr>
                            <tr>
                                <td><label for="">SignOut</label></td>
                                <td><input class="form-control" placeholder="Enter Received Amount"
                                           type="time"
                                           name="signout" id="signout" value="" required>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" id="" class="btn btn-primary">{{__('Update')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @if(auth()->user()->can('Attendance-create') || auth()->user()->can('Attendance-edit'))
        <div class="modal fade" id="admin_manual_in_modal" tabindex="-1" role="dialog" aria-hidden="true">
            <form action="{{ route('attendance.admin.manual.in') }}" method="POST">
                @csrf
                <input type="hidden" name="staff_id" id="admin_manual_in_staff_id">
                <input type="hidden" name="date" id="admin_manual_in_date">
                <input type="hidden" name="lat" id="admin_manual_in_lat">
                <input type="hidden" name="lon" id="admin_manual_in_lon">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Confirm manual sign-in') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2" id="admin_manual_in_summary"></p>
                            <p class="text-muted small mb-0">{{ __('Location was read from your browser. Submit to save sign-in for the selected employee and date.') }}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-success">{{ __('Save sign-in') }}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal fade" id="admin_manual_out_modal" tabindex="-1" role="dialog" aria-hidden="true">
            <form action="{{ route('attendance.admin.manual.out') }}" method="POST">
                @csrf
                <input type="hidden" name="staff_id" id="admin_manual_out_staff_id">
                <input type="hidden" name="date" id="admin_manual_out_date">
                <input type="hidden" name="lat" id="admin_manual_out_lat">
                <input type="hidden" name="lon" id="admin_manual_out_lon">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Confirm manual sign-out') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2" id="admin_manual_out_summary"></p>
                            <p class="text-muted small mb-0">{{ __('Location was read from your browser. Submit to save sign-out for the selected employee and date.') }}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-success">{{ __('Save sign-out') }}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    @endif

@endsection

@section('script')
    <!--Chartist Chart-->
    <script src="{{asset('assets/plugins/chartist/js/chartist.min.js')}}"></script>
    <script src="{{asset('assets/plugins/chartist/js/chartist-plugin-tooltip.min.js')}}"></script>
    <script>
        //Stacked bar chart
        new Chartist.Bar('#stacked-bar-chart', {
            labels: [
                @php
                    use Carbon\Carbon;

      $currentDate = Carbon::now();
      $startDate = Carbon::now()->startOfMonth();
      $endDate = $currentDate->copy(); // Copy the current date to avoid modifying the original object

      while ($startDate <= $endDate) {
          // Your code here
          // You can use $startDate to access the current date in the loop

          // For example, you can print the date in a specific format
          echo "'".$startDate->format('d/m') . "',";

          // Move to the next day
          $startDate->addDay();

               }
                @endphp
            ],
            @php
                $currentDate = \Carbon\Carbon::now();
                $startDate = $currentDate->copy()->startOfMonth();
                $endDate = $currentDate->copy();

                $presentCounts = [];
                $dCounts = [];
                $eCounts = [];
                $holidayCounts = [];
                $leaveCounts = [];
                $first_half_leave=[];
                $second_half_leave=[];

                while ($startDate <= $endDate) {
                    $date = $startDate->format('Y-m-d');

                    $presentCounts[] = \App\Models\Attendance::where('date', $date)->where('status', 'P')->count();
                    $dCounts[] = \App\Models\Attendance::where('date', $date)->where('status', 'D')->count();
                    $eCounts[] = \App\Models\Attendance::where('date', $date)->where('status', 'E')->count();
                    $holidayCounts[] = \App\Models\Holiday::where('from', '<=', $date)->where('to', '>=', $date)->count();
                    $leaveCounts[] = \App\Models\Leave::where('start', '<=', $date)->where('end', '>=', $date)->count();
                    $first_half_leave[]=\App\Models\halfLeave::where('date',$date)->where('status','LFH')->count();
                    $second_half_leave[]=\App\Models\halfLeave::where('date',$date)->where('status','LSH')->count();

                    $startDate->addDay();
                }
            @endphp

            series: [
                {!! json_encode($presentCounts) !!},
                {!! json_encode($dCounts) !!},
                {!! json_encode($eCounts) !!},
                {!! json_encode($holidayCounts) !!},
                {!! json_encode($leaveCounts) !!},
                {!! json_encode($first_half_leave) !!},
                {!! json_encode($second_half_leave) !!}
            ],
        }, {
            stackBars: true,
            axisY: {
                labelInterpolationFnc: function (value) {
                    return (value * 5);
                }
            },
            plugins: [
                Chartist.plugins.tooltip()
            ]
        }).on('draw', function (data) {
            if (data.type === 'bar') {
                data.element.attr({
                    style: 'stroke-width: 30px'
                });
            }
        });


    </script>
    <script>
        function Attendance_update(id, date, signin, signout) {
            $('#signin').val(signin);
            $('#id').val(id);
            $('#signout').val(signout);
            $('#Attendance_update_modal').modal('show');
        }

        @if(auth()->user()->can('Attendance-create') || auth()->user()->can('Attendance-edit'))
        function adminManualAttendancePrepare(direction) {
            var staffId = $('#admin_manual_staff_id').val();
            var dateVal = $('#admin_manual_date').val();
            var staffName = $('#admin_manual_staff_id option:selected').text();
            if (!staffId) {
                alert({!! json_encode(__('Please select an employee.')) !!});
                return;
            }
            if (!dateVal) {
                alert({!! json_encode(__('Please select a date.')) !!});
                return;
            }
            if (!navigator.geolocation) {
                alert({!! json_encode(__('Geolocation is not supported by this browser. Enable location to use manual attendance.')) !!});
                return;
            }
            navigator.geolocation.getCurrentPosition(function (position) {
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                if (direction === 'in') {
                    $('#admin_manual_in_staff_id').val(staffId);
                    $('#admin_manual_in_date').val(dateVal);
                    $('#admin_manual_in_lat').val(lat);
                    $('#admin_manual_in_lon').val(lon);
                    $('#admin_manual_in_summary').text(staffName + ' — ' + dateVal);
                    $('#admin_manual_in_modal').modal('show');
                } else {
                    $('#admin_manual_out_staff_id').val(staffId);
                    $('#admin_manual_out_date').val(dateVal);
                    $('#admin_manual_out_lat').val(lat);
                    $('#admin_manual_out_lon').val(lon);
                    $('#admin_manual_out_summary').text(staffName + ' — ' + dateVal);
                    $('#admin_manual_out_modal').modal('show');
                }
            }, function () {
                alert({!! json_encode(__('Location permission denied or unavailable. Allow location access to record attendance.')) !!});
            }, {enableHighAccuracy: true, timeout: 15000, maximumAge: 0});
        }
        @endif

    </script>
@endsection