{{-- resources/views/Reports/monthly_attendance_details_report.blade.php --}}
@extends('layouts.mainlayout')

@section('title', 'Monthly Attendance Details')

@section('main')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


<div class="container-fluid">

    {{-- show server-side validation errors --}}
    @if(session('reportError'))
        <div class="alert alert-warning">
            {{ session('reportError') }}
        </div>
    @endif

    {{-- Filter Form --}}
    <form id="reportForm" method="post" action="{{ route('monthly-attendance-details-report.generate') }}" class="mb-3">
        @csrf

        <div class="card filter-card mb-3">
            <div class="card-body py-3">
                <div class="filters-row">

                    {{-- Date range --}}
                    <div class="filter-item filter-date">
                        <label class="filter-label">Date range</label>
                        <div class="date-range-inner">

                            @php
                            // Prefer controller-provided filters (from reportData flash) over old()
                            $startVal = isset($filters) ? ($filters['start_date'] ?? '') : old('start_date', '');
                            $endVal   = isset($filters) ? ($filters['end_date'] ?? '')   : old('end_date', '');
                            @endphp

                            <div class="date-input-wrapper">
                                <input type="text" name="start_date" id="start_date"
                                    class="form-control form-control-sm date-input"
                                    value="{{ old('start_date', $filters['start_date'] ?? '') }}">
                                <span class="calendar-icon" data-target="start_date">📅</span>
                            </div>

                            <span class="range-sep">—</span>

                            <div class="date-input-wrapper">
                                <input type="text" name="end_date" id="end_date"
                                    class="form-control form-control-sm date-input"
                                    value="{{ old('end_date', $filters['end_date'] ?? '') }}">
                                <span class="calendar-icon" data-target="end_date">📅</span>
                            </div>
                        </div>
                    </div>

                    {{-- Preset --}}
                    <div class="filter-item filter-preset">
                        <label class="filter-label">Preset</label>
                        <select name="preset" class="form-control form-control-sm styled-select">
                            <option value="">-- Select --</option>
                                <option value="last7" 
                                    {{ ($filters['preset'] ?? '') == 'last7' ? 'selected' : '' }}>
                                    Last 7 days
                                </option>

                                <option value="last30" 
                                    {{ ($filters['preset'] ?? '') == 'last30' ? 'selected' : '' }}>
                                    Last 30 days
                                </option>

                                <option value="this_month" 
                                    {{ ($filters['preset'] ?? '') == 'this_month' ? 'selected' : '' }}>
                                    This month
                                </option>

                                <option value="last_month" 
                                    {{ ($filters['preset'] ?? '') == 'last_month' ? 'selected' : '' }}>
                                    Last month
                                </option>
                        </select>
                    </div>

                    {{-- Team --}}
                    <div class="filter-item filter-team">
                        <label class="filter-label">Team</label>
                        <select name="team_id" class="form-control form-control-sm styled-select">
                            <option value="">All</option>
                            @foreach($teams as $t)
                                <option value="{{ $t->id }}" {{ old('team_id', $filters['team_id'] ?? '') == $t->id ? 'selected' : '' }}>
                                    {{ $t->team }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- {{-- Actions --}} -->
                    <div class="filter-item filter-actions" aria-label="Actions">
                        <div class="actions-inner">
                            <button id="generateBtn" type="submit" class="btn btn-primary btn-sm action-btn">
                                Generate Report
                            </button>

                            <button
                                type="submit"
                                formaction="{{ route('monthly-attendance-details-report.export') }}"
                                formmethod="post"
                                class="btn btn-success btn-sm action-btn"
                                title="Export Excel">
                                Excel
                            </button>

                            <button type="submit"
                                formaction="{{ route('monthly-attendance-details-report.export') }}"
                                formmethod="post"
                                name="export_format"
                                value="pdf"
                                class="btn btn-danger btn-sm action-btn"
                                title="Export PDF">
                                PDF
                            </button>

                            <a href="{{ route('monthly-attendance-details-report.index', ['clear' => 1]) }}"
                                role="button"
                                class="square-reset-btn"
                                title="Reset filters"
                                aria-label="Reset filters">
                                ↻
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>

    <style>
        .styled-select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;

            background: #fff url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIwLDAgNiw4LCAxMiwwIiBmaWxsPSIjYWJhYmFiIiAvPjwvc3ZnPg==")
                no-repeat right 10px center;
            background-size: 12px;

            padding: 6px 32px 6px 10px !important;

            border-radius: 6px !important;
            border: 1px solid rgba(186, 177, 177, 0.1) !important; /* VERY LIGHT BORDER */
            height: 36px;
            font-size: 13px;
            transition: 0.2s ease;
        }

        .styled-select:hover {
            border-color: rgba(0,0,0,0.20) !important;
        }

        .styled-select:focus {
            border-color: #2563eb !important;      /* blue focus border */
            box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
            outline: none;
        }

        .pagination-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-top: 12px;
        }

        .show-results {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .show-results select {
            height: 32px;
            font-size: 13px;
        }

        /* Scale flatpickr calendar size */
        .flatpickr-calendar {
            font-size: 13px;
        }

        .flatpickr-day {
            height: 30px;
            line-height: 30px;
        }
            .date-input-wrapper {
            position: relative;
            width: 100%;
        }

        .date-input {
            padding-right: 36px; /* space for icon */
        }

        .calendar-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 16px;
            color: #6b7280;
            user-select: none;
        }

        .calendar-icon:hover {
            color: #2563eb; /* blue on hover */
        }

        .filter-card, .filter-card * { box-sizing: border-box; }
        .filter-card { border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; background: #fff; }
        .filter-card .card-body { padding: 10px 12px; }

        .filter-label { font-weight: 600; font-size: 12px; color: #4b5563; margin-bottom:6px; display:block; }

        .filters-row { display:flex; align-items:flex-start; gap:8px; width:100%; }
        .filter-item { display:flex; flex-direction:column; justify-content:flex-start; }
        

        .filter-date { flex: 0 0 36%; min-width: 260px; }
        .filter-preset { flex: 0 0 10%; min-width: 90px; }
        /* .filter-team { flex: 0 0 10%; min-width: 90px; } */
        .filter-team {
            flex: 0 0 auto;  
            min-width: 180px;
        }
        .filter-search { flex: 0 0 12%; min-width: 120px; }

        .table-responsive {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        #reportTable {
            margin-bottom: 0 !important;
        }
        .pagination {
            margin: 0 !important; 
        }
        .sticky-pagination {
            position: sticky;
            top: 0;
            background: #e5e7eb !important; /* light gray (same tone as table border) */
            padding: 4px 0 !important;      /* reduce height */
            z-index: 40;
            display: flex;
            justify-content: center;
            border-top: 1px solid #ccc;
            width: 100%;
        }
        .tooltip-btn {
             position: relative;
        }

        .tooltip-text {
            visibility: hidden;
            opacity: 0;
            width: 180px;
            background: #333;
            color: #fff;
            text-align: left;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;

            position: absolute;
            z-index: 10;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.25s;

            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        }

        .tooltip-btn:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        .att-time {
            line-height: 1.1rem;
        }
        /* FIX: Actions aligned like others */
        .filter-actions {
            flex: 0 0 auto;
            min-width: 200px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .filter-actions::before {
            content: 'Actions';
            font-weight: 600;
            font-size: 12px;
            color: #4b5563;
            margin-bottom: 6px;
            display: block;
        }

        #reportTable th:first-child,
        #reportTable td:first-child {
            position: sticky;
            left: 0;
            background: #efefef;   /* keep table background */
            z-index: 2;
        }

        #reportTable th:first-child {
            z-index: 3; /* header stays on top */
        }

     /* ===== Attendance Cell Alignment ===== */

        .att-cell {
            display: grid;
            grid-template-rows:
                minmax(52px, auto)  /* Timings */
                22px                /* Work */
                18px;               /* Break */
            row-gap: 2px;
            min-height: 115px;
        }

        /* Timings */
        .att-punches {
            font-size: 13px;
            line-height: 1.4;
        }

        .att-time {
            text-align: left;
            white-space: nowrap;
        }

        /* Work / Break always stick to bottom */
        .att-meta {
            margin-top: auto;
        }

        .att-summary {
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        /* Work */
        .att-summary.work {
            font-weight: 600;
            color: #065f46;
            white-space: nowrap;
        }

        /* Break */
        .att-summary.break {
            font-size: 12px;
            color: #92400e;
            white-space: nowrap;
        }


        /* Extra info (does NOT affect alignment) */
        .att-status {
            font-weight: 700;
            margin-top: 4px;
        }

        .att-holiday {
            font-size: 11px;
            color: #6b7280;
        }

        .tooltip-btn {
            position: relative;
        }

        .tooltip-text {
            visibility: hidden;
            opacity: 0;
            width: 180px;
            background: #333;
            color: #fff;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            position: absolute;
            z-index: 10;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.25s;
        }

        .tooltip-btn:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        

        .date-range-inner { display:flex; align-items:center; gap:8px; }
        .date-range-inner input[type="date"] { height:34px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); padding:0 .45rem; font-size:13px; }
        .range-sep { color:#6b7280; font-weight:600; padding:0 6px; }

        .actions-inner { display:flex; align-items:center; gap:8px; }
        .action-btn { height:36px; border-radius:6px; font-weight:600; padding:0 12px; white-space:nowrap; display:flex; align-items:center; justify-content:center; }
        .btn-success.action-btn { color:#fff; }

        .square-reset-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid rgba(0,0,0,0.08); background:transparent; }

        @media (max-width: 720px) {
            .filters-row { flex-wrap:wrap; gap:10px; }
            .filter-date { flex:0 0 100%; min-width:auto; }
            .filter-preset, .filter-team, .filter-search, .filter-actions { flex:0 0 48%; min-width:auto; }
        }

    </style>

    {{-- Summary / Table --}}
    @if(!empty($rangeText))
        <div class="d-flex justify-content-between mb-2">
            <div>
                <strong>Date Range:</strong> {{ $rangeText }}
                @if(!empty($teamName))
                    &nbsp; | &nbsp; <strong>Team:</strong> {{ $teamName }}
                @endif
                @isset($employeeCount)
                    &nbsp; | &nbsp; 
                    <strong>Employees:</strong> {{ $employeeCount }}
                @endisset
            </div>
            <div>
            <strong><em>
                P = Present,
                A = Absent,
                H = Holiday,
                L = Leave,
                T = Total Days
            </em></strong>
            </div>
        </div>
    @endif
    
    {{-- Report Table --}}
     
    @if(!empty($days) && !empty($users))
    <div class="d-flex justify-content-between align-items-center mb-2">

        {{-- LEFT: Search --}}
        <input id="searchName"
            type="text"
            class="form-control form-control-sm"
            placeholder="Search employee…"
            style="max-width:220px; height:32px;"
            onkeydown="handleSearchKey(event)">

        {{-- RIGHT: Show --}}
        <form method="get" class="d-flex align-items-center gap-1 mb-0">
            @foreach(request()->except(['per_page','page']) as $k => $v)
                <input type="hidden" name="{{ $k }}" value="{{ $v }}">
            @endforeach

            <label class="mb-0 small">Show</label>
            <select name="per_page"
                    class="form-control form-control-sm"
                    style="height:32px;"
                    onchange="this.form.submit()">
                @foreach([10, 100, 500] as $n)
                    <option value="{{ $n }}" {{ $perPage == $n ? 'selected' : '' }}>
                        {{ $n }}
                    </option>
                @endforeach
            </select>
        </form>

    </div>

        <div class="table-responsive" style="overflow-x:auto;">
            <table id="reportTable" class="table table-bordered table-sm">
                <thead class="thead-light">
                    <tr>
                        <th>Emp Name</th>
                        <th>Team</th>
                        @foreach($days as $d)
                            <th style="min-width:120px;">
                                {{ $d->format('d M') }} <br> {{ $d->format('D') }}
                            </th>
                        @endforeach
                        <th>P</th>
                        <th>A</th>
                        <th>H</th>
                        <th>L</th>
                        <th>T</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr class="report-row">
                            <td class="emp-name">{{ $user->name }} {{ $user->lastName }}</td>
                            <td>{{ $user->team }}</td>
                            @foreach($days as $d)
                                @php
                                    $cell = $attendanceMap[$user->user_id][$d->toDateString()] ?? null;
                                @endphp
    <td>
        <div class="att-cell">

        <!-- Timings -->
        <div class="att-punches">
        @if(!empty($cell['all_punches']))
            @foreach($cell['all_punches'] as $i => $p)
                <div class="att-time">
                    {{ $p }}

                    {{-- show icon once --}}
                    @if($i === 0 && !empty($cell['has_punch_issue']))
                            <a href="{{ url('/update-attendance') }}?user_id={{ $user->user_id }}&team_id={{ $user->team_id }}&date={{ $d->toDateString() }}"
                            class="tooltip-btn style="text-decoration:none" title="Update attendance">
                            <span style="color:#dc2626; font-weight:400; cursor:pointer;">ⓘ</span>
                            <span class="tooltip-text">
                                {{ $cell['punch_issue_msg'] }}
                                <br>
                                <small>Click to update attendance</small>
                            </span>
                        </a>
                    @endif
                </div>
            @endforeach
        @endif

        </div>


        <!-- Work -->
        <div class="att-summary work">
            @if(!empty($cell['work_display']))
                Work: {{ $cell['work_display'] }} hrs
            @endif
        </div>

        <!-- Break -->
        <div class="att-summary break">
            @if(!empty($cell['break_display']))
                Break: {{ $cell['break_display'] }} hrs
            @endif
        </div>

        <!-- Status / Holiday (optional) -->
        @if(!empty($cell['status']))
            <div class="att-status">{{ $cell['status'] }}</div>
        @endif

        @if(!empty($cell['holiday_name']))
            <div class="att-holiday">{{ $cell['holiday_name'] }}</div>
        @endif

    </div>
</td>



                            @endforeach
                            <td>{{ $totals[$user->user_id]['P'] ?? 0 }}</td>
                            <td>{{ $totals[$user->user_id]['A'] ?? 0 }}</td>
                            <td>{{ $totals[$user->user_id]['H'] ?? 0 }}</td>
                            <td>{{ $totals[$user->user_id]['L'] ?? 0 }}</td>
                            <td>{{ $totals[$user->user_id]['T'] ?? count($days) }}</td>
                        </tr>
                    @endforeach
                    <tr id="noResultsRow" class="text-center" style="display:none;">
                        <td colspan="{{ 2 + count($days) + 5 }}">No matching employees found.</td>
                    </tr>
                </tbody>
            </table>



        </div> {{-- end table-responsive --}}
                    
    @if(!empty($totalPages) && $totalPages > 1 && $perPage !== 'all')
        <div class="pagination-bar">

            {{-- Pagination --}}
            <ul class="pagination mb-0">
                <li class="page-item {{ $currentPage == 1 ? 'disabled' : '' }}">
                    <a class="page-link"
                    href="{{ request()->fullUrlWithQuery(['page' => max(1, $currentPage - 1)]) }}">
                        « Prev
                    </a>
                </li>

                @for($i = max(1, $currentPage - 2); $i <= min($totalPages, $currentPage + 2); $i++)
                    <li class="page-item {{ $i == $currentPage ? 'active' : '' }}">
                        <a class="page-link"
                        href="{{ request()->fullUrlWithQuery(['page' => $i]) }}">
                            {{ $i }}
                        </a>
                    </li>
                @endfor

                <li class="page-item {{ $currentPage == $totalPages ? 'disabled' : '' }}">
                    <a class="page-link"
                    href="{{ request()->fullUrlWithQuery(['page' => min($totalPages, $currentPage + 1)]) }}">
                        Next »
                    </a>
                </li>
            </ul>

        </div>
        @endif
    @endif
        </div> {{-- end container-fluid --}}
        @endsection

        @section('js')
        <script>
            const urlParams = new URLSearchParams(window.location.search);
            const preUserId = urlParams.get('user_id');
            const preTeamId = urlParams.get('team_id');
            const preDateISO = urlParams.get('date'); // yyyy-mm-dd
        </script>
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

        <script>
        document.addEventListener('DOMContentLoaded', function() {
            function debounce(fn, wait) {
                var t;
                return function() {
                    var args = Array.prototype.slice.call(arguments);
                    clearTimeout(t);
                    t = setTimeout(function(){ fn.apply(null, args); }, wait);
                };
            }

            var searchInput = document.getElementById('searchName');
            var table = document.getElementById('reportTable');
            var noResultsRow = document.getElementById('noResultsRow');

            // Build rows array if a report table exists. If table not present, rows = []
            var rows = table ? Array.prototype.slice.call(table.querySelectorAll('tbody tr.report-row')) : [];

            // Filtering function — does nothing when there are no rows
            function applyFilter() {
                if (!rows || rows.length === 0) return;

                var q = (searchInput.value || '').trim().toLowerCase();
                var anyVisible = false;
                for (var i = 0; i < rows.length; i++) {
                    var r = rows[i];
                    var nameEl = r.querySelector('.emp-name') || r.cells[0];
                    var teamEl = r.cells[1];
                    var hay = ((nameEl && nameEl.textContent) ? nameEl.textContent : '') + ' ' + ((teamEl && teamEl.textContent) ? teamEl.textContent : '');
                    hay = hay.toLowerCase();
                    var show = (q === '') || (hay.indexOf(q) !== -1);
                    r.style.display = show ? '' : 'none';
                    if (show) anyVisible = true;
                }
                if (noResultsRow) noResultsRow.style.display = anyVisible ? 'none' : '';
            }

            // Debounced input listener (safe when no rows)
            if (searchInput) {
                searchInput.addEventListener('input', debounce(applyFilter, 250));

                // Escape clears
                searchInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        searchInput.value = '';
                        applyFilter();
                    }
                });
            }

            // Run once on load (if table exists)
            applyFilter();

            // Expose a global handler used by the input's onkeydown attribute.
            // This ensures Enter will never submit the form from this input.
            window.handleSearchKey = function(e) {
                if (!e) return;
                if (e.key === 'Enter') {
                    // Always prevent default submit
                    e.preventDefault();
                    e.stopPropagation();
                    // Only apply filter when table rows exist (i.e. report visible)
                    if (rows && rows.length > 0) {
                        applyFilter();
                    }
                    return false;
                }
                // let other keys behave normally
            };
            window.refreshReportRows = function() {
                table = document.getElementById('reportTable');
                rows = table ? Array.prototype.slice.call(table.querySelectorAll('tbody tr.report-row')) : [];
                noResultsRow = document.getElementById('noResultsRow');
                applyFilter();
            };
        });
        </script>


        <script>
            document.addEventListener('DOMContentLoaded', function () {

                window.fpStart = flatpickr("#start_date", {
                    dateFormat: "Y-m-d",
                    altInput: true,
                    altFormat: "d/m/Y",
                    defaultDate: "{{ $filters['start_date'] ?? '' }}",
                    allowInput: true,
                    monthSelectorType: "static",
                });

                window.fpEnd = flatpickr("#end_date", {
                    dateFormat: "Y-m-d",
                    altInput: true,
                    altFormat: "d/m/Y",
                    defaultDate: "{{ $filters['end_date'] ?? '' }}",
                    allowInput: true,
                    monthSelectorType: "static",
                });
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {

                const presetSelect = document.querySelector('select[name="preset"]');
                if (!presetSelect || !window.fpStart || !window.fpEnd) return;

                let updatingFromPreset = false; 

                /* ---------------------------
                Apply preset → update dates
                --------------------------- */
                function formatYMD(d) {
                    return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
                }

                function applyPreset(preset) {
                    const now = new Date();
                    let start, end;

                    switch (preset) {
                        case 'last7':
                            start = new Date(now);
                            start.setDate(now.getDate() - 6);
                            end = now;
                            break;

                        case 'last30':
                            start = new Date(now);
                            start.setDate(now.getDate() - 29);
                            end = now;
                            break;

                        case 'this_month':
                            start = new Date(now.getFullYear(), now.getMonth(), 1);
                            end   = new Date(now.getFullYear(), now.getMonth() + 1, 0);
                            break;

                        case 'last_month':
                            start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                            end   = new Date(now.getFullYear(), now.getMonth(), 0);
                            break;

                        default:
                            return;
                    }

                    updatingFromPreset = true;

                    window.fpStart.setDate(formatYMD(start), true);
                    window.fpEnd.setDate(formatYMD(end), true);

                    setTimeout(() => updatingFromPreset = false, 50);
                }

                presetSelect.addEventListener('change', function () {
                    if (this.value) {
                        applyPreset(this.value);
                    }
                });

                /* --------------------------------
                Clear preset ONLY if user changes dates manually
                -------------------------------- */
                window.fpStart.config.onChange.push(() => {
                    if (!updatingFromPreset) presetSelect.value = "";
                });

                window.fpEnd.config.onChange.push(() => {
                    if (!updatingFromPreset) presetSelect.value = "";
                });

            });
            </script>

        <script>
        document.addEventListener('DOMContentLoaded', function () {

            document.querySelectorAll('.calendar-icon').forEach(function (icon) {
                icon.addEventListener('click', function () {
                    const targetId = this.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    if (input && input._flatpickr) {
                        input._flatpickr.open();
                    }
                });
            });

        });
        </script>
        @endsection