@extends('admin.layouts.app')
@section('title', get_setting('site_name') . ' | Subordinate Employees')

@push('css')
    <style>
        .surrounding-wrap .card {
            border-radius: 12px;
        }
        .surrounding-header {
            padding: 14px 18px;
            border-bottom: 1px solid #eef1f5;
        }
        .surrounding-body {
            padding: 16px 18px 18px;
        }
        .surrounding-chip {
            border: 1px solid #d9deea;
            border-radius: 8px;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 600;
            color: #4b5563;
            background: #fff;
            cursor: pointer;
        }
        .surrounding-chip:hover,
        .surrounding-chip.active {
            background: #615dad;
            color: #fff;
            border-color: #615dad;
        }
        .surrounding-table-card .card-header {
            padding: 10px 14px;
            border-bottom: 1px solid #edf0f6;
            background: #fff;
        }
        .surrounding-table-card .card-body {
            padding: 0;
        }
        .surrounding-table-card .table {
            margin-bottom: 0;
        }
        .surrounding-table-card .table th,
        .surrounding-table-card .table td {
            padding: 8px 10px;
            font-size: 12px;
            white-space: nowrap;
        }
        .surrounding-detail-wrap {
            display: none;
        }
    </style>
@endpush

@section('content')
    <div class="row mt-3 surrounding-wrap">
        <div class="col-12">
            <div class="card">
                <div class="surrounding-header">
                    <h5 class="mb-0">Subordinate Employee List</h5>
                </div>
                <div class="surrounding-body">
                    @if($employees->isEmpty())
                        <p class="mb-0 text-muted">No subordinate found in your list.</p>
                    @else
                        <p class="mb-0 text-muted">Your direct subordinates are shown below with attendance, leave and visit info.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @foreach($employees as $selectedStaff)
        <div class="card mb-3 surrounding-wrap">
            <div class="surrounding-header d-flex align-items-start justify-content-between">
                <div>
                    <h5 class="mb-1">{{ optional($selectedStaff->user)->name }} ({{ optional($selectedStaff->user)->id }})</h5>
                    <p class="mb-0 text-muted">
                        Department: {{ optional($selectedStaff->department)->name ?? '-' }}
                        | Designation: {{ optional($selectedStaff->designation)->name ?? '-' }}
                        | Branch: {{ optional($selectedStaff->warehouse)->name ?? '-' }}
                    </p>
                </div>
                <div class="d-flex" style="gap:8px;">
                    <button type="button" class="surrounding-chip js-surrounding-action"
                            data-staff="{{ $selectedStaff->id }}" data-target="attendance">
                        Attendance
                    </button>
                    <button type="button" class="surrounding-chip js-surrounding-action"
                            data-staff="{{ $selectedStaff->id }}" data-target="leave">
                        Leave
                    </button>
                    <button type="button" class="surrounding-chip js-surrounding-action"
                            data-staff="{{ $selectedStaff->id }}" data-target="report">
                        Report
                    </button>
                </div>
            </div>

            <div class="surrounding-body surrounding-detail-wrap" id="detail-{{ $selectedStaff->id }}-attendance">
                <div class="card surrounding-table-card">
                    <div class="card-header"><h6 class="mb-0">Recent Attendance (31)</h6></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>In</th>
                                    <th>Out</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse(($attendancesByStaff[$selectedStaff->id] ?? collect()) as $att)
                                    <tr>
                                        <td>{{ $att->date }}</td>
                                        <td>{{ $att->signIn ?? '-' }}</td>
                                        <td>{{ $att->signOut ?? '-' }}</td>
                                        <td>{{ $att->status ?? '-' }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center">No attendance found</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="surrounding-body surrounding-detail-wrap" id="detail-{{ $selectedStaff->id }}-leave">
                <div class="card surrounding-table-card">
                    <div class="card-header"><h6 class="mb-0">Recent Leave (20)</h6></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead>
                                <tr>
                                    <th>Apply</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse(($leavesByStaff[$selectedStaff->id] ?? collect()) as $lv)
                                    <tr>
                                        <td>{{ $lv->apply_date ?? '-' }}</td>
                                        <td>{{ optional($lv->leave_type)->name ?? ($lv->type ?? '-') }}</td>
                                        <td>
                                            @if((int)$lv->status === 1)
                                                <span class="badge badge-success">Approved</span>
                                            @elseif((int)$lv->status === 2)
                                                <span class="badge badge-danger">Rejected</span>
                                            @else
                                                <span class="badge badge-info">Pending</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center">No leave found</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="surrounding-body surrounding-detail-wrap" id="detail-{{ $selectedStaff->id }}-report">
                <div class="row">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <div class="card surrounding-table-card h-100">
                            <div class="card-header"><h6 class="mb-0">Recent Visit (20)</h6></div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm mb-0">
                                        <thead>
                                        <tr>
                                            <th>Apply</th>
                                            <th>Duration</th>
                                            <th>Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse(($visitsByStaff[$selectedStaff->id] ?? collect()) as $vs)
                                            <tr>
                                                <td>{{ $vs->application_date ?? '-' }}</td>
                                                <td>{{ $vs->duration ?? 0 }}</td>
                                                <td>
                                                    @if((int)$vs->status === 1)
                                                        <span class="badge badge-success">Approved</span>
                                                    @elseif((int)$vs->status === 2)
                                                        <span class="badge badge-danger">Rejected</span>
                                                    @else
                                                        <span class="badge badge-info">Pending</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="3" class="text-center">No visit found</td></tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card surrounding-table-card h-100">
                            <div class="card-header"><h6 class="mb-0">Summary</h6></div>
                            <div class="card-body" style="padding: 14px;">
                                <p class="mb-1"><strong>Total Attendance Rows:</strong> {{ ($attendancesByStaff[$selectedStaff->id] ?? collect())->count() }}</p>
                                <p class="mb-1"><strong>Total Leave Rows:</strong> {{ ($leavesByStaff[$selectedStaff->id] ?? collect())->count() }}</p>
                                <p class="mb-0"><strong>Total Visit Rows:</strong> {{ ($visitsByStaff[$selectedStaff->id] ?? collect())->count() }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endsection

@section('script')
    <script>
        $(document).on('click', '.js-surrounding-action', function () {
            var staffId = $(this).data('staff');
            var target = $(this).data('target');
            var detailId = '#detail-' + staffId + '-' + target;

            $('#detail-' + staffId + '-attendance, #detail-' + staffId + '-leave, #detail-' + staffId + '-report').hide();
            $(detailId).slideDown(150);

            $('.js-surrounding-action[data-staff="' + staffId + '"]').removeClass('active');
            $(this).addClass('active');
        });
    </script>
@endsection