@extends('business.layouts.admin')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('business.dashboard') }}">{{ __('Dashboard') }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ __('Employees Attendance') }}</li>
@endsection

@section('content')
    <div class="dash-content">
        {{-- Filter Section --}}
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
            <div class="card-body">
                <form method="GET" action="{{ route('business.attendance.index') }}" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted">Select Employee</label>
                        <select name="employee_id" class="form-select border-0 bg-light">
                            <option value="">All Employees</option>
                            @foreach ($employees as $emp)
                                <option value="{{ $emp->id }}"
                                    {{ $filters['employee_id'] == $emp->id ? 'selected' : '' }}>
                                    {{ $emp->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted">Start Date</label>
                        <input type="date" name="start_date" class="form-control border-0 bg-light"
                            value="{{ $filters['start_date'] }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-muted">End Date</label>
                        <input type="date" name="end_date" class="form-control border-0 bg-light"
                            value="{{ $filters['end_date'] }}">
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="submit" class="btn flex-grow-1 text-white fw-bold shadow-sm"
                            style="background-color: #655BE1; border-radius: 8px;">
                            <i class="fas fa-filter me-2"></i>Filter
                        </button>
                        <a href="{{ route('business.attendance.index') }}" class="btn btn-light border shadow-sm"
                            style="border-radius: 8px;">
                            <i class="fas fa-sync-alt"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Report Table --}}
        <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
            <div class="card-header bg-white border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold m-0" style="color: #655BE1;">Attendance Report</h5>
                <span class="badge bg-soft-primary text-primary px-3 py-2" style="background-color: #E8E7FD;">
                    Showing {{ $report->firstItem() }} - {{ $report->lastItem() }} of {{ $report->total() }}
                </span>
            </div>

            <div class="card-body px-4">
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr class="text-muted small text-uppercase" style="border-bottom: 2px solid #f4f5f9;">
                                <th class="py-3">Date</th>
                                <th class="py-3">Employee</th>
                                <th class="py-3">Check-In Details</th>
                                <th class="py-3">Check-Out Details</th>
                                <th class="py-3 text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($report as $row)
                                <tr style="border-bottom: 1px solid #f4f5f9;">
                                    <td>
                                        <div class="fw-bold">{{ \Carbon\Carbon::parse($row->date)->format('d M, Y') }}
                                        </div>
                                        <small class="text-muted text-uppercase" style="font-size: 0.7rem;">Day -
                                            {{ $row->day_of_week }}</small>
                                    </td>
                                    <td class="fw-bold text-dark">{{ $row->employee_name }}</td>

                                    {{-- In Time Box --}}
                                    <td>
                                        @if ($row->in_time)
                                            <div class="p-2 rounded status-box-in">
                                                <div class="fw-bold text-primary small mb-1">
                                                    <i
                                                        class="far fa-clock me-1"></i>{{ date('h:i A', strtotime($row->in_time)) }}
                                                </div>
                                                @if ($row->in_latitude)
                                                    <a href="https://www.google.com/maps?q={{ $row->in_latitude }},{{ $row->in_longitude }}"
                                                        target="_blank" class="map-link">
                                                        <i class="fas fa-map-marker-alt me-1"></i>View Location
                                                    </a>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted small">---</span>
                                        @endif
                                    </td>

                                    {{-- Out Time Box --}}
                                    <td>
                                        @if ($row->out_time)
                                            <div class="p-2 rounded status-box-out">
                                                <div class="fw-bold text-secondary small mb-1">
                                                    <i
                                                        class="far fa-clock me-1"></i>{{ date('h:i A', strtotime($row->out_time)) }}
                                                </div>
                                                @if ($row->out_latitude)
                                                    <a href="https://www.google.com/maps?q={{ $row->out_latitude }},{{ $row->out_longitude }}"
                                                        target="_blank" class="map-link-secondary">
                                                        <i class="fas fa-map-marker-alt me-1"></i>View Location
                                                    </a>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted small">---</span>
                                        @endif
                                    </td>

                                    <td class="text-center">
                                        @if (\Carbon\Carbon::parse($row->date)->isFuture())
                                            <span
                                                class="badge rounded-pill bg-light text-secondary border px-3">Upcoming</span>
                                        @elseif(!$row->in_time)
                                            <span class="badge rounded-pill px-3"
                                                style="background-color: #FFE5E5; color: #D9534F; border: 1px solid #ffcccc;">
                                                <i class="fas fa-times-circle me-1"></i>Absent
                                            </span>
                                        @else
                                            <span class="badge rounded-pill px-3"
                                                style="background-color: #E8E7FD; color: #655BE1; border: 1px solid #d2cffc;">
                                                <i class="fas fa-check-circle me-1"></i>Present
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 d-flex justify-content-end custom-pagination">
                    {{ $report->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>

    <style>
        .status-box-in {
            background-color: #f0f0ff;
            border-left: 3px solid #655BE1;
        }

        .status-box-out {
            background-color: #f8f9fa;
            border-left: 3px solid #6c757d;
        }

        .map-link {
            font-size: 0.7rem;
            color: #655BE1;
            text-decoration: none;
            font-weight: 600;
        }

        .map-link:hover {
            text-decoration: underline;
        }

        .map-link-secondary {
            font-size: 0.7rem;
            color: #6c757d;
            text-decoration: none;
            font-weight: 600;
        }

        .table thead th {
            font-weight: 700;
            color: #888;
        }

        /* Pagination fix for big arrows */
        .custom-pagination svg {
            width: 20px !important;
            height: 20px !important;
        }

        .pagination .page-link {
            color: #655BE1;
            border-radius: 5px;
            margin: 0 2px;
        }

        .pagination .page-item.active .page-link {
            background-color: #655BE1;
            border-color: #655BE1;
            color: white;
        }
    </style>
@endsection