@extends('admin.admin_dashboard')

@section('customcss')
<style>
    .monthly-table th, .monthly-table td {
        vertical-align: middle;
        font-size: 12.5px;
    }
    .monthly-table thead th {
        background-color: #f8fafc;
        color: #334155;
        font-weight: 600;
        border-color: #e2e8f0;
    }
    .print-only-header {
        display: none;
    }
</style>
@endsection

@section('admin')
<style>
    /* Direct Print Styles for Monthly Summary Report */
    @media print {
        @page {
            size: A4 landscape;
            margin: 8mm 6mm;
        }

        html, body {
            background: #fff !important;
            color: #000 !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        /* Hide entire dashboard shell */
        .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;
        }

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

        .content-body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            left: 0 !important;
            top: 0 !important;
            position: static !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;
        }

        .print-only-header {
            display: block !important;
            text-align: center;
            margin-bottom: 12px;
            border-bottom: 2px solid #000;
            padding-bottom: 5px;
        }

        .print-only-header h3 {
            margin: 0 0 2px 0;
            font-size: 16px;
            font-weight: bold;
            color: #000 !important;
        }

        .print-only-header p {
            margin: 1px 0;
            font-size: 11px;
            color: #000 !important;
        }

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

        .monthly-table {
            width: 100% !important;
            border-collapse: collapse !important;
            font-size: 9px !important;
        }

        .monthly-table th, .monthly-table td {
            border: 1px solid #000 !important;
            padding: 3px 4px !important;
            color: #000 !important;
            background-color: transparent !important;
            font-size: 9px !important;
        }

        .monthly-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 #000 !important;
            color: #000 !important;
            background: transparent !important;
            font-weight: bold;
            padding: 1px 3px !important;
            font-size: 8.5px !important;
        }
    }
</style>

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

        {{-- Header & Breadcrumb --}}
        <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)">Monthly Attendance Summary</a></li>
            </ol>
        </div>

        {{-- Filter Section --}}
        <div class="card mb-3 card-filter">
            <div class="card-header bg-light py-2">
                <h5 class="card-title mb-0">Monthly Staff Attendance Summary Report</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('admin.attendance.reports.monthly-summary') }}">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-semibold">From Date <span class="text-danger">*</span></label>
                            <input type="date" name="from_date" class="form-control" 
                                   value="{{ request('from_date', $fromDate->format('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-semibold">To Date <span class="text-danger">*</span></label>
                            <input type="date" name="to_date" class="form-control" 
                                   value="{{ request('to_date', $toDate->format('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-semibold">Employee (Optional)</label>
                            <select name="employee_id" class="form-control default-select wide">
                                <option value="">All Employees</option>
                                @foreach($employeeList as $emp)
                                    @php
                                        $primary = (!empty($emp->primary_id) && $emp->primary_id !== '0' && $emp->primary_id !== 0) ? " [PID: {$emp->primary_id}]" : '';
                                        $secondary = (!empty($emp->e_id) && $emp->e_id !== '0' && $emp->e_id !== 0) ? " (ID: {$emp->e_id})" : '';
                                    @endphp
                                    <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                                        {{ $emp->name }}{{ $primary }}{{ $secondary }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-sm-6 d-flex gap-2">
                            <button type="submit" class="btn btn-primary px-3 w-100">
                                <i class="fa fa-filter me-1"></i> Generate
                            </button>
                            <button type="button" onclick="window.print()" class="btn btn-outline-secondary px-3 w-100">
                                <i class="fa fa-print me-1"></i> Print
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Print School Header (Visible 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>Monthly Staff Attendance Summary Report</strong> | Period: <strong>{{ $fromDate->format('d M, Y') }}</strong> to <strong>{{ $toDate->format('d M, Y') }}</strong></p>
        </div>

        {{-- Report Data Table --}}
        @if(isset($reportData) && $reportData->isNotEmpty())
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2 py-2">
                    <div>
                        <h5 class="card-title mb-0">
                            Monthly Summary: <span class="text-primary">{{ $fromDate->format('d M, Y') }}</span> to <span class="text-primary">{{ $toDate->format('d M, Y') }}</span>
                        </h5>
                    </div>
                    <div>
                        <button type="button" onclick="window.print()" class="btn btn-sm btn-outline-secondary">
                            <i class="fa fa-print me-1"></i> Print Report
                        </button>
                    </div>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-bordered text-center monthly-table mb-0">
                        <thead>
                            <tr>
                                <th class="align-middle">Primary ID</th>
                                <th class="align-middle">Secondary ID</th>
                                <th class="align-middle text-start">Employee Name</th>
                                <th class="align-middle">Post</th>
                                <th class="align-middle">Total Days</th>
                                <th class="align-middle">Working Days</th>
                                <th class="align-middle">Present</th>
                                <th class="align-middle">Absent</th>
                                <th class="align-middle">Leave</th>
                                <th class="align-middle">Off/Holiday</th>
                                <th class="align-middle">Late (Days)</th>
                                <th class="align-middle">Expected Hours</th>
                                <th class="align-middle">Worked Hours</th>
                                <th class="align-middle">Shortage</th>
                                <th class="align-middle">Attendance %</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reportData as $data)
                                @php
                                    $emp = $data['employee'];
                                    $primaryId = (!empty($emp->primary_id) && $emp->primary_id !== '0' && $emp->primary_id !== 0) ? $emp->primary_id : '-';
                                    $secondaryId = (!empty($emp->e_id) && $emp->e_id !== '0' && $emp->e_id !== 0) ? $emp->e_id : '-';
                                    $post = $emp->postDetails->name ?? ($emp->post ?? '-');
                                    $pct = $data['attendance_percentage'];
                                    $pctColor = $pct >= 90 ? 'text-success' : ($pct >= 75 ? 'text-warning' : 'text-danger');
                                @endphp
                                <tr>
                                    <td class="fw-semibold text-primary">{{ $primaryId }}</td>
                                    <td class="text-muted">{{ $secondaryId }}</td>
                                    <td class="text-start fw-medium">{{ $emp->name }}</td>
                                    <td>{{ $post }}</td>
                                    <td>{{ $data['total_days'] }}</td>
                                    <td><strong>{{ $data['working_days'] }}</strong></td>
                                    <td><span class="badge bg-success">{{ $data['present_days'] }}</span></td>
                                    <td>
                                        @if($data['absent_days'] > 0)
                                            <span class="badge bg-danger">{{ $data['absent_days'] }}</span>
                                        @else
                                            <span class="text-muted">0</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($data['leave_days'] > 0)
                                            <span class="badge bg-info">{{ $data['leave_days'] }}</span>
                                        @else
                                            <span class="text-muted">0</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ $data['off_days'] + $data['holiday_days'] }}</span>
                                    </td>
                                    <td>
                                        @if($data['late_days'] > 0)
                                            <span class="text-danger fw-bold">{{ $data['late_days'] }} <small>({{ $data['late_hours'] }})</small></span>
                                        @else
                                            <span class="text-muted">0</span>
                                        @endif
                                    </td>
                                    <td>{{ $data['expected_hours'] }}</td>
                                    <td><strong>{{ $data['worked_hours'] }}</strong></td>
                                    <td>
                                        @if($data['shortage_minutes'] > 0)
                                            <span class="text-danger fw-bold">{{ $data['shortage_hours'] }}</span>
                                        @else
                                            <span class="text-muted">0h 0m</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong class="{{ $pctColor }}">{{ $pct }}%</strong>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="15" class="text-center py-4 text-muted">
                                        No monthly attendance data found for the selected criteria.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        @elseif(request()->has('from_date'))
            <div class="alert alert-info">
                <i class="fa fa-info-circle me-2"></i>
                No attendance data found for the selected criteria.
            </div>
        @endif

    </div>
</div>
@endsection