@extends('employee.layouts.app')
@section('title', get_setting('site_name').' Employee Dashboard')
@section('content')
    @php
        $defaultAvatar = asset('storage/uploads/user-icon.png');
        $userImage = auth()->user()->image ? asset('storage/'.auth()->user()->image) : $defaultAvatar;
        $hour = (int) date('G');
        $greeting = $hour < 12 ? __('Good morning') : ($hour < 17 ? __('Good afternoon') : __('Good evening'));
    @endphp
    <style>
        .fc-day-grid-container { height: auto !important; }
        .fc-other-month .fc-day-number { display: none !important; }

        /* Calendar colors — scoped so legend matches fc-event badges */
        .emp-dash-wrap .emp-cal-present,
        .emp-dash-wrap .fc-event.emp-cal-present {
            background: linear-gradient(120deg, #22c55e 0%, #16a34a 100%) !important;
            border: none !important;
            color: #fff !important;
        }
        .emp-dash-wrap .emp-cal-delay,
        .emp-dash-wrap .fc-event.emp-cal-delay {
            background: linear-gradient(120deg, #facc15 0%, #eab308 100%) !important;
            border: none !important;
            color: #713f12 !important;
        }
        .emp-dash-wrap .emp-cal-extra,
        .emp-dash-wrap .fc-event.emp-cal-extra {
            background: linear-gradient(120deg, #f56348 0%, #f81f8b 100%) !important;
            border: none !important;
            color: #fff !important;
        }
        .emp-dash-wrap .emp-cal-leave,
        .emp-dash-wrap .fc-event.emp-cal-leave {
            background: linear-gradient(120deg, #043548 0%, #34b7ea 100%) !important;
            border: none !important;
            color: #fff !important;
        }
        .emp-dash-wrap .emp-cal-half,
        .emp-dash-wrap .fc-event.emp-cal-half {
            background: linear-gradient(120deg, #a3f12e 0%, #351ff8 100%) !important;
            border: none !important;
            color: #fff !important;
        }
        .emp-dash-wrap .emp-cal-weekend,
        .emp-dash-wrap .fc-event.emp-cal-weekend {
            background: linear-gradient(120deg, #00e795 0%, #0095e2 100%) !important;
            border: none !important;
            color: #fff !important;
        }
        .emp-dash-wrap .emp-cal-holiday,
        .emp-dash-wrap .fc-event.emp-cal-holiday {
            background: linear-gradient(120deg, #f6d365 0%, #fda085 100%) !important;
            border: none !important;
            color: #fff !important;
        }

        .emp-dash-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-dash-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-dash-profile {
            text-align: center;
            padding: 1.5rem 1.25rem 1.25rem;
        }
        .emp-dash-avatar {
            width: 108px;
            height: 108px;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid #fff;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
        }
        .emp-dash-name { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.15rem; }
        .emp-dash-role {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            color: #0369a1;
            background: rgba(14, 165, 233, 0.1);
            padding: 4px 10px;
            border-radius: 999px;
            margin-bottom: 1rem;
        }
        .emp-dash-meta {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 12px;
            padding: 0.75rem 1rem;
            text-align: left;
        }
        .emp-dash-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            padding: 0.45rem 0;
            font-size: 13px;
        }
        .emp-dash-meta-row + .emp-dash-meta-row { border-top: 1px dashed #e2e8f0; }
        .emp-dash-meta-row span { color: #64748b; }
        .emp-dash-meta-row strong { color: #0f172a; text-align: right; }

        .emp-dash-attendance {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
        }
        .emp-dash-attendance-box {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 12px;
            padding: 0.85rem 0.75rem;
            text-align: center;
        }
        .emp-dash-attendance-box .lbl {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #64748b;
            margin-bottom: 0.35rem;
        }
        .emp-dash-attendance-box .val {
            font-size: 1.05rem;
            font-weight: 800;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
        }
        .emp-dash-attendance-box.is-in .val { color: #166534; }
        .emp-dash-attendance-box.is-out .val { color: #1d4ed8; }

        .emp-dash-stat-lbl {
            font-size: 12px;
            font-weight: 600;
            color: #64748b;
            margin-bottom: 0;
        }
        .emp-dash-stat-val { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }

        .emp-dash-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(15, 23, 42, 0.65);
            border-top: 0;
            white-space: nowrap;
            padding: 0.8rem 1rem;
        }
        .emp-dash-table tbody td {
            vertical-align: middle;
            font-size: 13px;
            padding: 0.9rem 1rem;
        }
        .emp-dash-table tbody tr:last-child td { border-bottom: 0; }
        .emp-dash-table .emp-dash-empty {
            padding: 2rem 1rem !important;
            text-align: center;
            color: #64748b;
        }

        .emp-dash-leave-bar {
            height: 8px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
        }
        .emp-dash-leave-bar > span {
            display: block;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #0ea5e9, #2563eb);
        }
        .emp-dash-leave-bar.is-high > span { background: linear-gradient(90deg, #f59e0b, #ef4444); }

        .emp-dash-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 1rem;
            margin-bottom: 1rem;
        }
        .emp-dash-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 12px;
            color: #64748b;
        }
        .emp-dash-legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .emp-dash-modal .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
        }
        .emp-dash-modal .modal-header { border-bottom: 1px solid #edf0f6; }
        .emp-dash-modal .modal-footer { border-top: 1px solid #edf0f6; }
    </style>

    <div class="container-fluid emp-dash-wrap">
        <div class="row mt-3">
            <div class="col-12">
                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ $greeting }}, {{ auth()->user()->name }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Here is your overview for today') }} — {{ now()->format('l, F j, Y') }}</p>
                    </div>
                    <a href="{{ route('employee.leave.application') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus mr-1"></i> {{ __('Apply for leave') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Sidebar --}}
            <div class="col-lg-4 col-xl-3 mb-3">
                <div class="card mb-3">
                    <div class="emp-dash-profile">
                        <img class="emp-dash-avatar mb-3"
                             src="{{ $userImage }}"
                             alt="{{ auth()->user()->name }}"
                             onerror="this.onerror=null;this.src='{{ $defaultAvatar }}';">
                        <div class="emp-dash-name">{{ auth()->user()->name }}</div>
                        <div class="emp-dash-role">{{ auth()->user()->staff->designation->name }}</div>
                        <div class="emp-dash-meta">
                            <div class="emp-dash-meta-row">
                                <span>{{ __('Joined on') }}</span>
                                <strong>{{ auth()->user()->staff->joing_date }}</strong>
                            </div>
                            <div class="emp-dash-meta-row">
                                <span>{{ __('Department') }}</span>
                                <strong>{{ auth()->user()->staff->department->name }}</strong>
                            </div>
                            <div class="emp-dash-meta-row">
                                <span>{{ __('Branch') }}</span>
                                <strong>{{ auth()->user()->staff->warehouse->name }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <span><i class="fas fa-fingerprint mr-1 text-muted"></i> {{ __("Today's attendance") }}</span>
                        <span class="badge badge-light text-muted font-weight-normal">{{ now()->format('M d, Y') }}</span>
                    </div>
                    <div class="card-body">
                        <div class="emp-dash-attendance">
                            <div class="emp-dash-attendance-box is-in">
                                <div class="lbl">{{ __('In time') }}</div>
                                @if($todayAttendance !== null)
                                    <div class="val">{{ date('h:i A', strtotime($todayAttendance->signIn)) }}</div>
                                @elseif(!empty($weekendAttendanceBlocked))
                                    <div class="val text-muted small mt-1">{{ __('Weekend — attendance blocked') }}</div>
                                @else
                                    <button type="button" class="btn btn-outline-success btn-sm mt-1" onclick="set_in_time()">
                                        <i class="fas fa-sign-in-alt"></i> {{ __('Set in') }}
                                    </button>
                                @endif
                            </div>
                            <div class="emp-dash-attendance-box is-out">
                                <div class="lbl">{{ __('Out time') }}</div>
                                @if($todayAttendance !== null && $todayAttendance->signOut !== null)
                                    <div class="val">{{ date('h:i A', strtotime($todayAttendance->signOut)) }}</div>
                                @else
                                    <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="set_out_time()">
                                        <i class="fas fa-sign-out-alt"></i> {{ __('Set out') }}
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <livewire:employee-break/>
            </div>

            {{-- Main content --}}
            <div class="col-lg-8 col-xl-9">
                @if(!empty($employeeModuleStats) || !empty($dashboardQuickStats))
                    <div class="row mb-1">
                        @foreach($employeeModuleStats ?? [] as $m)
                            <div class="col-sm-6 col-xl-3 col-12 mb-3">
                                @if(!empty($m['route']))
                                    <a href="{{ $m['route'] }}" class="card dash-stat-card dash-stat-card--link h-100 text-decoration-none text-body">
                                @else
                                    <div class="card dash-stat-card h-100">
                                @endif
                                    <div class="card-body py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="mr-3 {{ $m['color'] }}" style="font-size: 1.65rem;">
                                                <i class="{{ $m['icon'] }}"></i>
                                            </div>
                                            <div class="flex-grow-1 text-right">
                                                <div class="emp-dash-stat-val {{ $m['color'] }}">{{ $m['value'] }}</div>
                                                <p class="emp-dash-stat-lbl mb-0">{{ $m['label'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @if(!empty($m['route']))
                                    </a>
                                @else
                                    </div>
                                @endif
                            </div>
                        @endforeach

                        @foreach($dashboardQuickStats ?? [] as $stat)
                            <div class="col-sm-6 col-xl-3 col-12 mb-3">
                                @if(!empty($stat['route']))
                                    <a href="{{ $stat['route'] }}" class="card dash-stat-card dash-stat-card--link h-100 text-decoration-none text-body">
                                @elseif(!empty($stat['action']))
                                    <button type="button" onclick="{{ $stat['action'] }}()" class="card dash-stat-card dash-stat-card--link h-100 text-decoration-none text-body w-100 border-0 text-left p-0 bg-white">
                                @else
                                    <div class="card dash-stat-card h-100">
                                @endif
                                    <div class="card-body py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="mr-3 {{ $stat['color'] }}" style="font-size: 1.65rem;">
                                                <i class="{{ $stat['icon'] }}"></i>
                                            </div>
                                            <div class="flex-grow-1 text-right">
                                                <div class="emp-dash-stat-val {{ $stat['color'] }}">{{ $stat['value'] }}</div>
                                                <p class="emp-dash-stat-lbl mb-0">{{ $stat['label'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @if(!empty($stat['route']))
                                    </a>
                                @elseif(!empty($stat['action']))
                                    </button>
                                @else
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="row d-none" id="missattendance">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <span><i class="fas fa-user-clock mr-1 text-muted"></i> {{ __('Missed attendances') }}</span>
                                <button type="button" class="btn btn-sm btn-light" onclick="missattendance_show()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover emp-dash-table mb-0">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Date') }}</th>
                                            <th>{{ __('In time') }}</th>
                                            <th>{{ __('Out time') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($missAttendances as $missAttendance)
                                            <tr>
                                                <td class="font-weight-bold">{{ $missAttendance->date }}</td>
                                                <td>
                                                    @if($missAttendance->signIn != null)
                                                        {{ date('h:i A', strtotime($missAttendance->signIn)) }}
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($missAttendance->signOut != null)
                                                        {{ date('h:i A', strtotime($missAttendance->signOut)) }}
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-muted py-4">{{ __('No missed attendance records.') }}</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                                <span><i class="fas fa-umbrella-beach mr-1 text-muted"></i> {{ __('Leave summary') }} ({{ date('Y') }})</span>
                                <a href="{{ route('employee.leave.application') }}" class="btn btn-sm btn-outline-primary">
                                    {{ __('View all') }} <i class="fas fa-arrow-right ml-1" style="font-size: 11px;"></i>
                                </a>
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive">
                                    <table class="table table-hover emp-dash-table mb-0">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Leave type') }}</th>
                                            <th class="text-center">{{ __('Allowed') }}</th>
                                            <th class="text-center">{{ __('Adjustment') }}</th>
                                            <th class="text-center">{{ __('Taken') }}</th>
                                            <th class="text-center">{{ __('Remaining') }}</th>
                                            <th style="min-width: 120px;">{{ __('Usage') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($leaveSummary as $row)
                                            <tr>
                                                <td><strong>{{ $row['name'] }}</strong></td>
                                                <td class="text-center">{{ $row['allowed'] }}</td>
                                                <td class="text-center">{{ $row['adjustment'] }}</td>
                                                <td class="text-center">{{ $row['taken'] }}</td>
                                                <td class="text-center">
                                                    <span class="font-weight-bold {{ $row['remaining'] < 0 ? 'text-danger' : 'text-success' }}">
                                                        {{ $row['remaining'] }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="emp-dash-leave-bar flex-grow-1 mr-2 {{ $row['usage_pct'] >= 80 ? 'is-high' : '' }}">
                                                            <span style="width: {{ $row['usage_pct'] }}%;"></span>
                                                        </div>
                                                        <small class="text-muted">{{ $row['usage_pct'] }}%</small>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="emp-dash-empty">{{ __('No leave types configured.') }}</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-calendar-alt mr-1 text-muted"></i> {{ __('Monthly attendance summary') }}
                            </div>
                            <div class="card-body">
                                <div class="emp-dash-legend">
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-present"></span> {{ __('Present') }}</span>
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-delay"></span> {{ __('Delay') }}</span>
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-extra"></span> {{ __('Extra delay') }}</span>
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-leave"></span> {{ __('Leave') }}</span>
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-half"></span> {{ __('Half leave') }}</span>
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-weekend"></span> {{ __('Weekend') }}</span>
                                    <span class="emp-dash-legend-item"><span class="emp-dash-legend-dot emp-cal-holiday"></span> {{ __('Holiday') }}</span>
                                </div>
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade emp-dash-modal" id="setintime" tabindex="-1" role="dialog" aria-labelledby="setInTimeLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="{{ route('set.in.time') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold" id="setInTimeLabel">{{ __('Set in time') }}</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="text-muted mb-3">{{ __('Are you sure you want to set manual attendance?') }}</p>
                        <label class="small font-weight-bold text-uppercase text-muted">{{ __('In time') }}</label>
                        <input class="form-control" type="time" id="IN_time" value="" readonly>
                        <input type="hidden" name="lat" id="lat" value="" readonly>
                        <input type="hidden" name="lon" id="long" value="" readonly>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('Confirm') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade emp-dash-modal" id="setouttime" tabindex="-1" role="dialog" aria-labelledby="setOutTimeLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="{{ route('set.out.time') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold" id="setOutTimeLabel">{{ __('Set out time') }}</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="text-muted mb-3">{{ __('Are you sure you want to set manual attendance?') }}</p>
                        <label class="small font-weight-bold text-uppercase text-muted">{{ __('Out time') }}</label>
                        <input class="form-control" type="time" id="OUT_time" value="" readonly>
                        <input type="hidden" name="lat" id="lats" value="" readonly>
                        <input type="hidden" name="lon" id="longs" value="" readonly>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Confirm') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        !function ($) {
            "use strict";

            var CalendarPage = function () {};
            CalendarPage.prototype.init = function () {
                if ($.isFunction($.fn.fullCalendar)) {
                    $('#external-events .fc-event').each(function () {
                        var eventObject = { title: $.trim($(this).text()) };
                        $(this).data('eventObject', eventObject);
                        $(this).draggable({
                            zIndex: 999,
                            revert: false,
                            revertDuration: 0
                        });
                    });

                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();

                    $('#calendar').fullCalendar({
                        header: { left: '', center: 'title', right: '' },
                        editable: false,
                        eventLimit: false,
                        droppable: false,
                        drop: function (date, allDay) {
                            var originalEventObject = $(this).data('eventObject');
                            var copiedEventObject = $.extend({}, originalEventObject);
                            copiedEventObject.start = date;
                            copiedEventObject.allDay = allDay;
                            $('#calendar').fullCalendar('renderEvent', copiedEventObject, false);
                            if ($('#drop-remove').is(':checked')) {
                                $(this).remove();
                            }
                        },
                        events: [
                            @foreach($salesData as $holiday)
                                @if(date('F',strtotime($holiday->date))==date('F'))
                                @if($holiday->date<=date('Y-m-d'))
                                {{__('{')}}
                                title: '{{ $holiday->status }}',
                                start: '{{ $holiday->date }}',
                                className: @if($holiday->status =='E')'emp-cal-extra'
                                    @elseif($holiday->status =='P') 'emp-cal-present'
                                    @elseif($holiday->status =='D') 'emp-cal-delay' @endif ,
                                },
                                @endif
                                @endif
                            @endforeach

                            @php $year=date('Y');$month=date('m') @endphp
                            @for($day=1;$day<=\Illuminate\Support\Carbon::create($year,$month,1)->daysInMonth;$day++)
                            @foreach($weekend_data as $weakend)
                            @if(\Illuminate\Support\Carbon::create(null,\Illuminate\Support\Carbon::now()->format('m'),$day)->format('l')==$weakend)
                            {{__('{')}}
                            title: '{{ __('W') }}',
                            start: '{{\Illuminate\Support\Carbon::create(null,\Illuminate\Support\Carbon::now()->format('m'),$day)->format('Y-m-d') }}',
                            className: 'emp-cal-weekend',
                            },
                            @endif
                            @endforeach
                            @endfor

                            @foreach($holiday_data as $holi)
                            @if(date('F',strtotime($holi))==date('F'))
                            @if($holi<=date('Y-m-d'))
                            {{__('{')}}
                            title: '{{ __('H') }}',
                            start: '{{ $holi }}',
                            className: 'emp-cal-holiday',
                            },
                            @endif
                            @endif
                            @endforeach

                            @foreach($leave_data as $leave)
                            @if(date('F',strtotime($leave))==date('F'))
                            @if($leave<=date('Y-m-d'))
                            {{__('{')}}
                            title: '{{ __('L') }}',
                            start: '{{ $leave }}',
                            className: 'emp-cal-leave',
                            },
                            @endif
                            @endif
                            @endforeach

                            @foreach($half_leaves as $half)
                            @if(date('F',strtotime($half->date))==date('F'))
                            @if($half->date<=date('Y-m-d'))
                            {{__('{')}}
                            title: '{{ $half->status }}',
                            start: '{{ $half->date }}',
                            className: 'emp-cal-half',
                            },
                            @endif
                            @endif
                            @endforeach
                        ]
                    });

                    $("#add_event_form").on('submit', function (ev) {
                        ev.preventDefault();
                        var $event = $(this).find('.new-event-form'),
                            event_name = $event.val();
                        if (event_name.length >= 3) {
                            var newid = "new" + "" + Math.random().toString(36).substring(7);
                            $("#external-events").append('<div id="' + newid + '" class="fc-event">' + event_name + '</div>');
                            var eventObject = { title: $.trim($("#" + newid).text()) };
                            $("#" + newid).data('eventObject', eventObject);
                            $("#" + newid).draggable({ revert: false, revertDuration: 0, zIndex: 999 });
                            $event.val('').focus();
                        } else {
                            $event.focus();
                        }
                    });
                } else {
                    alert("Calendar plugin is not installed");
                }
            };

            $.CalendarPage = new CalendarPage;
            $.CalendarPage.Constructor = CalendarPage;
        }(window.jQuery);

        (function ($) {
            "use strict";
            $.CalendarPage.init();
        })(window.jQuery);

        function set_in_time() {
            var currentTime = new Date();
            var hours = currentTime.getHours();
            var minutes = currentTime.getMinutes();
            var seconds = currentTime.getSeconds();
            hours = (hours < 10 ? "0" : "") + hours;
            minutes = (minutes < 10 ? "0" : "") + minutes;
            seconds = (seconds < 10 ? "0" : "") + seconds;
            $('#IN_time').val(hours + ":" + minutes + ":" + seconds);
            getLocation();
            setTimeout(function () { $('#setintime').modal('show'); }, 1000);
        }

        function set_out_time() {
            var currentTime = new Date();
            var hours = currentTime.getHours();
            var minutes = currentTime.getMinutes();
            var seconds = currentTime.getSeconds();
            hours = (hours < 10 ? "0" : "") + hours;
            minutes = (minutes < 10 ? "0" : "") + minutes;
            seconds = (seconds < 10 ? "0" : "") + seconds;
            $('#OUT_time').val(hours + ":" + minutes + ":" + seconds);
            getLocation();
            setTimeout(function () { $('#setouttime').modal('show'); }, 1000);
        }

        function missattendance_show() {
            $('#missattendance').toggleClass('d-none');
        }

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

        function showPosition(position) {
            $("#lat").val(position.coords.latitude);
            $("#long").val(position.coords.longitude);
            $("#lats").val(position.coords.latitude);
            $("#longs").val(position.coords.longitude);
        }

        $('.fc-other-month').html('');
    </script>
@endsection