{{-- resources/views/HR/employees/show.blade.php --}}
@extends('master.app')
@section('title', 'Employee Profile')

@section('body')
<main class="app-content">
    <section>
        <div class="card shadow-sm border-0">
            {{-- Header --}}
            <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-3">
                    <img
                        src="{{ asset('storage/'.$employee->image) }}"
                        onerror="this.src='{{ asset('storage/profile.png') }}'"
                        style="width:64px;height:64px;object-fit:cover;border-radius:16px;border:1px solid #eee;"
                        alt="Employee"
                    >
                    <div>
                        <h4 class="mb-0">{{ $employee->name }}</h4>
                        <small class="text-muted">
                            {{ $employee->position ?? '—' }}
                            • Phone: {{ $employee->phone ?? '—' }}
                            @if($employee->email) • {{ $employee->email }} @endif
                            @if($employee->resigned_at)
                                • <span class="badge bg-danger">Resigned</span>
                            @else
                                • <span class="badge bg-success">Active</span>
                            @endif
                        </small>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <a href="{{ route('employees.edit', $employee->id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="fa fa-pencil"></i> Edit
                    </a>
                    <a href="{{ route('employees.index') }}" class="btn btn-sm btn-outline-dark">
                        <i class="fa fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>

            <div class="card-body">

                {{-- Flash --}}
                @if(session('msg'))
                    <div class="alert alert-success py-2">{{ session('msg') }}</div>
                @endif

                {{-- Quick Actions --}}
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                    <div>
                        <h6 class="mb-0">Quick Actions</h6>
                        <small class="text-muted">Overtime • Advance • Salary • Print • Resign</small>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        {{-- <a href="{{ route('employee_overtime.index', $employee->id) }}" class="btn btn-sm btn-primary btn-rounded">
                            <i class="fa fa-clock-o me-1"></i> Overtime
                        </a>
                        <a href="{{ route('employee_payment.index', $employee->id) }}" class="btn btn-sm btn-primary btn-rounded">
                            <i class="fa fa-money me-1"></i> Advance
                        </a>
                        <a href="{{ route('employee_salary.index', $employee->id) }}" class="btn btn-sm btn-primary btn-rounded">
                            <i class="fa fa-calculator me-1"></i> Salary
                        </a> --}}

                        {{-- Print Profile --}}
                        <a href="{{ route('employees.print', $employee->id) }}" target="_blank"
                           class="btn btn-sm btn-outline-dark btn-rounded">
                            <i class="fa fa-print me-1"></i> Print Profile
                        </a>

                        {{-- ID Card --}}
                        <a href="{{ route('employees.idcard', $employee->id) }}" target="_blank"
                           class="btn btn-sm btn-outline-secondary btn-rounded">
                            <i class="fa fa-id-card me-1"></i> ID Card
                        </a>

                        {{-- Resign --}}
                        <button type="button" class="btn btn-sm btn-outline-danger btn-rounded"
                                data-mdb-toggle="modal" data-mdb-target="#resignModal">
                            <i class="fa fa-user-times me-1"></i> Resign
                        </button>

                        {{-- Resign Certificate --}}
                        @if($employee->resigned_at)
                            <a href="{{ route('employees.resign.certificate', $employee->id) }}" target="_blank"
                               class="btn btn-sm btn-success btn-rounded">
                                <i class="fa fa-certificate me-1"></i> Resign Certificate
                            </a>
                        @endif
                    </div>
                </div>

                {{-- Stats --}}
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(13,110,253,.06); border-radius:16px;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <small class="text-muted">Total Overtime</small>
                                        <div class="h5 mb-0">{{ number_format((float)($stats['overtime_total'] ?? 0), 2) }}</div>
                                    </div>
                                    <div class="text-primary"><i class="fa fa-clock-o fa-lg"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(25,135,84,.07); border-radius:16px;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <small class="text-muted">Total Advance</small>
                                        <div class="h5 mb-0">{{ number_format((float)($stats['advance_total'] ?? 0), 2) }}</div>
                                    </div>
                                    <div class="text-success"><i class="fa fa-money fa-lg"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(255,193,7,.12); border-radius:16px;">
                            <div class="card-body">
                                <small class="text-muted">Last Salary (Net)</small>
                                <div class="h5 mb-0">
                                    {{ $stats['last_salary'] ? number_format((float)$stats['last_salary']->net_salary, 2) : '—' }}
                                </div>
                                <small class="text-muted">
                                    {{ $stats['last_salary'] ? ($stats['last_salary']->year.'-'.$stats['last_salary']->month) : '' }}
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(108,117,125,.08); border-radius:16px;">
                            <div class="card-body">
                                <small class="text-muted">Attendance Summary</small>
                                <div class="d-flex gap-2 mt-1 flex-wrap">
                                    <span class="badge bg-success">P: {{ $stats['present_days'] ?? 0 }}</span>
                                    <span class="badge bg-secondary">A: {{ $stats['absent_days'] ?? 0 }}</span>
                                    <span class="badge bg-warning text-dark">L: {{ $stats['leave_days'] ?? 0 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Activity Chart --}}
                <div class="card border-0 shadow-sm mb-3" style="border-radius:16px;">
                    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                        <div class="fw-semibold">
                            <i class="fa fa-line-chart me-1 text-muted"></i> Activity Chart (Last 6 Months)
                        </div>
                        <small class="text-muted">Overtime • Advance • Net Salary • Present Days</small>
                    </div>
                    <div class="card-body">
                        <canvas id="empActivityChart" height="90"></canvas>
                    </div>
                </div>

                {{-- Documents --}}
                <div class="row g-3">
                    @php
                        $docs = [
                            ['title'=>'Profile Image','path'=>$employee->image,'icon'=>'fa-image'],
                            ['title'=>'Employee Tazkira','path'=>$employee->tz_scan,'icon'=>'fa-id-card'],
                            ['title'=>'Security Insurance','path'=>$employee->document,'icon'=>'fa-shield'],
                            ['title'=>'Contract Letter','path'=>$employee->contract_letter,'icon'=>'fa-file-text-o'],
                        ];
                        $isPdf = fn($p) => strtolower(pathinfo($p ?? '', PATHINFO_EXTENSION)) === 'pdf';
                    @endphp

                    @foreach($docs as $d)
                        <div class="col-md-3">
                            <div class="card h-100 shadow-sm border-0" style="border-radius:16px;">
                                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                                    <div class="fw-semibold">
                                        <i class="fa {{ $d['icon'] }} me-1 text-muted"></i> {{ $d['title'] }}
                                    </div>

                                    @if(!empty($d['path']) && $d['path'] !== 'profile.png')
                                        <a class="btn btn-sm btn-outline-secondary"
                                           target="_blank"
                                           href="{{ asset('storage/'.$d['path']) }}">
                                            Open
                                        </a>
                                    @endif
                                </div>

                                <div class="card-body">
                                    @if(empty($d['path']) || $d['path'] === 'profile.png')
                                        <div class="text-muted small">No file uploaded.</div>
                                    @else
                                        @if($isPdf($d['path']))
                                            <iframe src="{{ asset('storage/'.$d['path']) }}"
                                                    frameborder="0" style="width:100%; height:140px; border-radius:12px;"></iframe>
                                        @else
                                            <img src="{{ asset('storage/'.$d['path']) }}"
                                                 onerror="this.src='{{ asset('storage/profile.png') }}'"
                                                 style="width:100%; height:140px; object-fit:cover; border-radius:12px;">
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <hr class="my-4">

                {{-- Light History --}}
                <div class="row g-3">
                    {{-- Recent Overtime --}}
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-header bg-white border-0 fw-semibold">
                                <i class="fa fa-clock-o me-1 text-primary"></i> Recent Overtime
                            </div>
                            <div class="card-body">
                                @forelse($employee->overtime as $ot)
                                    <div class="d-flex justify-content-between small py-1 border-bottom">
                                        <span>{{ $ot->date ?? '—' }} • {{ $ot->hourse ?? '' }}h</span>
                                        <span class="fw-semibold">{{ number_format((float)$ot->amount,2) }}</span>
                                    </div>
                                @empty
                                    <div class="text-muted small">No overtime records.</div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    {{-- Recent Advance --}}
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-header bg-white border-0 fw-semibold">
                                <i class="fa fa-money me-1 text-success"></i> Recent Advance
                            </div>
                            <div class="card-body">
                                @forelse($employee->advance as $ad)
                                    <div class="d-flex justify-content-between small py-1 border-bottom">
                                        <span>{{ $ad->date ?? '—' }} • {{ $ad->title ?? 'Advance' }}</span>
                                        <span class="fw-semibold">{{ number_format((float)$ad->payment,2) }}</span>
                                    </div>
                                @empty
                                    <div class="text-muted small">No advance records.</div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    {{-- Recent Salary --}}
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-header bg-white border-0 fw-semibold">
                                <i class="fa fa-calculator me-1 text-warning"></i> Recent Salary
                            </div>
                            <div class="card-body">
                                @forelse($employee->salary as $sal)
                                    <div class="d-flex justify-content-between small py-1 border-bottom">
                                        <span>{{ $sal->year ?? '' }}-{{ $sal->month ?? '' }}</span>
                                        <span class="fw-semibold">{{ number_format((float)$sal->net_salary,2) }}</span>
                                    </div>
                                @empty
                                    <div class="text-muted small">No salary records.</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

            </div>{{-- card-body --}}
        </div>{{-- card --}}
    </section>
</main>

{{-- Resign Modal --}}
<div class="modal fade" id="resignModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" action="{{ route('employees.resign', $employee->id) }}" class="modal-content">
      @csrf
      <div class="modal-header">
        <h5 class="modal-title">Resign Employee</h5>
        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-outline mb-3">
            <input type="date" name="resigned_at" value="{{ date('Y-m-d') }}" class="form-control">
            <label class="form-label">Resign Date</label>
        </div>
        <div class="form-outline">
            <input type="text" name="resign_reason" class="form-control" placeholder="Reason (optional)">
            <label class="form-label">Resign Reason</label>
        </div>
        <small class="text-muted d-block mt-2">This will set employee status to In-Active.</small>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-mdb-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-danger">
            <i class="fa fa-user-times me-1"></i> Confirm Resign
        </button>
      </div>
    </form>
  </div>
</div>
@endsection

@section('pageJs')
<script type="text/javascript">
    $(".app-menu").removeClass("active");
    $("#nav_hri").addClass("active");
    $("#hri").addClass("is-expanded");
    $("#nav_emp_account").addClass("active");
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const labels = @json($chart['labels'] ?? []);
    const overtime = @json($chart['overtime'] ?? []);
    const advance = @json($chart['advance'] ?? []);
    const salary = @json($chart['salary'] ?? []);
    const present = @json($chart['present'] ?? []);

    const ctx = document.getElementById('empActivityChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    { label: 'Overtime', data: overtime, tension: .35 },
                    { label: 'Advance', data: advance, tension: .35 },
                    { label: 'Net Salary', data: salary, tension: .35 },
                    { label: 'Present Days', data: present, tension: .35 }
                ]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: true } },
                scales: { y: { beginAtZero: true } }
            }
        });
    }
</script>
@endsection