@extends('admin.admin_dashboard')

@section('customcss')
<style>
    .report-table th, .report-table td {
        vertical-align: middle;
        font-size: 13px;
    }
    .report-table thead th {
        background-color: #f8fafc;
        color: #334155;
        font-weight: 600;
        border-color: #e2e8f0;
    }
    .shift-header-morning {
        background-color: #eff6ff !important;
        color: #1e40af !important;
    }
    .shift-header-day {
        background-color: #fefce8 !important;
        color: #854d0e !important;
    }
    .print-only-header {
        display: none;
    }
</style>
@endsection

@section('admin')
<style>
    /* Direct print styles loaded after main template CSS */
    @media print {
        @page {
            
            margin: 8mm 8mm;
        }

        html, body {
            background: #fff !important;
            color: #000 !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            height: auto !important;
        }

        /* Completely hide sidebar, top navigation, footer and other dashboard elements */
        .dlabnav,
        .nav-header,
        .header,
        .footer,
        .chatbox,
        .page-titles,
        .card-filter,
        .card-header,
        .btn,
        #preloader,
        .hamburger,
        .nav-control,
        .modal,
        .sidebar-right {
            display: none !important;
            visibility: hidden !important;
            width: 0 !important;
            height: 0 !important;
            position: absolute !important;
            left: -9999px !important;
            overflow: hidden !important;
            z-index: -1 !important;
        }

        #main-wrapper {
            display: block !important;
            position: static !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            min-height: auto !important;
        }

        .content-body {
            margin-left: 0 !important;
            margin-top: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            left: 0 !important;
            top: 0 !important;
            position: static !important;
            min-height: auto !important;
        }

        .container-fluid {
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        .card {
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 !important;
            background: transparent !important;
        }

        .card-body {
            padding: 0 !important;
            margin: 0 !important;
        }

        .table-responsive {
            overflow: visible !important;
            display: block !important;
            width: 100% !important;
        }

        /* Printable header */
        .print-only-header {
            display: block !important;
            margin-bottom: 12px;
            text-align: center;
        }

        .print-only-header h3 {
            margin: 0 0 4px 0;
            font-size: 18px;
            font-weight: bold;
            color: #000;
        }

        .print-only-header p {
            margin: 2px 0;
            font-size: 11px;
            color: #222;
        }

        /* Report table */
        .report-table {
            width: 100% !important;
            border-collapse: collapse !important;
            font-size: 10px !important;
        }

        .report-table th, .report-table td {
            border: 1px solid #333 !important;
            padding: 4px 6px !important;
            color: #000 !important;
            background-color: transparent !important;
            font-size: 10px !important;
        }

        .shift-header-morning, .shift-header-day, .report-table thead th {
            background-color: #f1f5f9 !important;
            color: #000 !important;
            font-weight: bold !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .badge {
            border: 1px solid #333 !important;
            color: #000 !important;
            background: transparent !important;
            font-weight: bold;
            padding: 1px 4px !important;
            font-size: 9px !important;
        }
    }
</style>

    <div class="content-body">
        <div class="container-fluid">

            {{-- HEADER --}}
            <div class="row page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.attendance.reports.index') }}">Reports</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Daily Attendance Report</a></li>
                </ol>
            </div>

            {{-- FILTER --}}
            <div class="card mb-3 card-filter">
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.attendance.reports.specific-day') }}">
                        <div class="row align-items-end g-3">
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label fw-semibold">Attendance Date</label>
                                <input type="date" name="date" value="{{ request('date', $date->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            <div class="col-md-4 col-sm-6 d-flex gap-2">
                                <button type="submit" class="btn btn-primary px-4">
                                    <i class="fas fa-filter me-1"></i> Generate
                                </button>
                                <button type="button" onclick="window.print()" class="btn btn-outline-secondary px-4">
                                    <i class="fas fa-print me-1"></i> Print
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- PRINTABLE HEADER (Shown only in print) --}}
            <div class="print-only-header">
                <h3>{{ $schoolProfile->school_name ?? config('app.name', 'Smart Shikkha') }}</h3>
                @if(!empty($schoolProfile->address))
                    <p>{{ $schoolProfile->address }}</p>
                @endif
                <p><strong>Daily Attendance Report</strong> | Date: <strong>{{ $date->format('d M, Y (l)') }}</strong></p>
            </div>

            {{-- TABLE --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-0">Daily Attendance Report</h4>
                        <small class="text-muted">Date: <span class="fw-bold text-dark">{{ $date->format('d M, Y (l)') }}</span></small>
                    </div>
                    <div class="d-none d-md-block">
                        <button type="button" onclick="window.print()" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-print me-1"></i> Print Report
                        </button>
                    </div>
                </div>
                <div class="card-body table-responsive">

                    <table class="table table-bordered text-center report-table mb-0">

                        <thead>
                            <tr>
                                <th rowspan="2" class="align-middle">Primary ID</th>
                                <th rowspan="2" class="align-middle">Secondary ID</th>
                                <th rowspan="2" class="align-middle text-start">Name</th>
                                <th rowspan="2" class="align-middle">Post</th>

                                <th colspan="3" class="shift-header-morning">Morning Shift</th>
                                <th colspan="3" class="shift-header-day">Day Shift</th>

                                <th rowspan="2" class="align-middle">Total Hours</th>
                                <th rowspan="2" class="align-middle">Status</th>
                            </tr>

                            <tr>
                                <th class="shift-header-morning">In</th>
                                <th class="shift-header-morning">Out</th>
                                <th class="shift-header-morning">Late</th>

                                <th class="shift-header-day">In</th>
                                <th class="shift-header-day">Out</th>
                                <th class="shift-header-day">Late</th>
                            </tr>
                        </thead>

                        <tbody>

                            @forelse($reportData as $row)

                                @php
                                    $statusColor = match (strtolower($row['status'])) {
                                        'p', 'present' => 'success',
                                        'leave' => 'info',
                                        'off_day', 'weeklyoff' => 'secondary',
                                        'holiday' => 'dark',
                                        default => 'danger',
                                    };
                                @endphp

                                <tr>
                                    <td class="fw-semibold text-primary">
                                        {{ (!empty($row['employee']->primary_id) && $row['employee']->primary_id !== '0' && $row['employee']->primary_id !== 0) ? $row['employee']->primary_id : '-' }}
                                    </td>
                                    <td class="text-muted">
                                        {{ (!empty($row['employee']->e_id) && $row['employee']->e_id !== '0' && $row['employee']->e_id !== 0) ? $row['employee']->e_id : '-' }}
                                    </td>
                                    <td class="text-start fw-medium">{{ $row['employee']->name }}</td>
                                    <td>{{ $row['employee']->postDetails->name ?? ($row['employee']->post ?? '-') }}</td>

                                    {{-- MORNING --}}
                                    <td>
                                        {{ $row['morning_in'] ? \Carbon\Carbon::parse($row['morning_in'])->format('h:i A') : '-' }}
                                    </td>
                                    <td>
                                        {{ $row['morning_out'] ? \Carbon\Carbon::parse($row['morning_out'])->format('h:i A') : '-' }}
                                    </td>
                                    <td>
                                        @if(!empty($row['morning_late']))
                                            <span class="text-danger fw-bold">{{ $row['morning_late'] }}</span>
                                        @else
                                            -
                                        @endif
                                    </td>

                                    {{-- DAY --}}
                                    <td>
                                        {{ $row['day_in'] ? \Carbon\Carbon::parse($row['day_in'])->format('h:i A') : '-' }}
                                    </td>
                                    <td>
                                        {{ $row['day_out'] ? \Carbon\Carbon::parse($row['day_out'])->format('h:i A') : '-' }}
                                    </td>
                                    <td>
                                        @if(!empty($row['day_late']))
                                            <span class="text-danger fw-bold">{{ $row['day_late'] }}</span>
                                        @else
                                            -
                                        @endif
                                    </td>

                                    <td><strong>{{ $row['hours'] }}</strong></td>

                                    <td>
                                        <span class="badge bg-{{ $statusColor }}">
                                            {{ $row['status'] }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12" class="text-center py-4 text-muted">
                                        No employee records found.
                                    </td>
                                </tr>
                            @endforelse

                        </tbody>
                    </table>

                </div>
            </div>

        </div>
    </div>
@endsection