@extends('layouts.app')

@section('page_title', 'My Profile')

@section('content')
    <div class="row">
        <div class="col-xl-4 col-lg-5">
            <div class="card border-0 shadow-sm mb-4 overflow-hidden">
                <div class="card-body p-0">
                    <div class="profile-header bg-primary py-5 text-center position-relative">
                        <div class="position-absolute top-0 end-0 p-3">
                            <span class="badge bg-white text-primary rounded-pill px-3">{{ strtoupper($user->role) }}</span>
                        </div>
                        <img src="{{ $user->avatar ?? 'https://ui-avatars.com/api/?name=' . $user->name . '&background=random&size=128' }}"
                            class="rounded-circle border border-4 border-white shadow-sm mb-3" width="120" height="120">
                        <h4 class="text-white fw-bold mb-1">{{ $user->name }}</h4>
                        <p class="text-white-50 mb-0">{{ $user->designation }}</p>
                    </div>
                    <div class="p-4">
                        <div class="mb-3">
                            <label class="small text-muted text-uppercase fw-bold mb-1">Email Address</label>
                            <p class="mb-0 fw-medium">{{ $user->email }}</p>
                        </div>
                        <div class="mb-3">
                            <label class="small text-muted text-uppercase fw-bold mb-1">Department</label>
                            <p class="mb-0 fw-medium">{{ $user->department->name ?? 'N/A' }}</p>
                        </div>
                        <div class="mb-3">
                            <label class="small text-muted text-uppercase fw-bold mb-1">Phone Number</label>
                            <p class="mb-0 fw-medium">{{ $user->phone ?? 'Not provided' }}</p>
                        </div>
                        <div class="mb-0">
                            <label class="small text-muted text-uppercase fw-bold mb-1">Member Since</label>
                            <p class="mb-0 fw-medium">{{ $user->created_at->format('d M, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Leave Balance Stats -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0 p-4 pb-0">
                    <h6 class="fw-bold mb-0">Leave Balance ({{ date('Y') }})</h6>
                </div>
                <div class="card-body p-4">
                    @php $balance = $user->leaveBalances->where('year', date('Y'))->first(); @endphp
                    @if ($balance)
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="small fw-medium">Annual Leaves</span>
                                <span class="small fw-bold">{{ $balance->annual_total - $balance->annual_used }} /
                                    {{ $balance->annual_total }}</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 6px;">
                                <div class="progress-bar"
                                    style="width: {{ $balance->annual_total > 0 ? (($balance->annual_total - $balance->annual_used) / $balance->annual_total) * 100 : 0 }}%">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="small fw-medium">Sick Leaves</span>
                                <span class="small fw-bold">{{ $balance->sick_total - $balance->sick_used }} /
                                    {{ $balance->sick_total }}</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 6px;">
                                <div class="progress-bar bg-info"
                                    style="width: {{ $balance->sick_total > 0 ? (($balance->sick_total - $balance->sick_used) / $balance->sick_total) * 100 : 0 }}%">
                                </div>
                            </div>
                        </div>
                        <div class="mb-0">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="small fw-medium">Casual Leaves</span>
                                <span class="small fw-bold">{{ $balance->casual_total - $balance->casual_used }} /
                                    {{ $balance->casual_total }}</span>
                            </div>
                            <div class="progress rounded-pill" style="height: 6px;">
                                <div class="progress-bar bg-warning"
                                    style="width: {{ $balance->casual_total > 0 ? (($balance->casual_total - $balance->casual_used) / $balance->casual_total) * 100 : 0 }}%">
                                </div>
                            </div>
                        </div>
                    @else
                        <p class="text-muted small text-center mb-0">No balance info found for this year.</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white p-0 border-0">
                    <ul class="nav nav-pills p-3" id="profileTabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#attendance">
                                <i class="bi bi-clock-history me-2"></i> Attendance
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="pill" data-bs-target="#leaves">
                                <i class="bi bi-calendar-event me-2"></i> Leave Requests
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="pill" data-bs-target="#settings">
                                <i class="bi bi-shield-lock me-2"></i> Security
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body p-4 pt-2">
                    <div class="tab-content">
                        <!-- Attendance Tab -->
                        <div class="tab-pane fade show active" id="attendance">
                            <h6 class="fw-bold mb-3 mt-2">Recent Attendance Logic (Last 30 Days)</h6>
                            <div class="table-responsive">
                                <table class="table table-hover align-middle datatable">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Date</th>
                                            <th>In</th>
                                            <th>Out</th>
                                            <th>Total</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($user->attendances as $att)
                                            <tr>
                                                <td class="small fw-medium">{{ $att->date->format('d M, Y') }}</td>
                                                <td class="small">
                                                    {{ $att->check_in ? $att->check_in->format('h:i A') : '-' }}</td>
                                                <td class="small">
                                                    {{ $att->check_out ? $att->check_out->format('h:i A') : '-' }}</td>
                                                <td class="small">
                                                    {{ floor($att->total_work_minutes / 60) }}h
                                                    {{ $att->total_work_minutes % 60 }}m
                                                </td>
                                                <td>
                                                    <span
                                                        class="badge bg-{{ $att->status == 'present' ? 'success' : 'danger' }}-subtle text-{{ $att->status == 'present' ? 'success' : 'danger' }} px-2">
                                                        {{ ucfirst($att->status) }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Leaves Tab -->
                        <div class="tab-pane fade" id="leaves">
                            <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
                                <h6 class="fw-bold mb-0">Leave Applications</h6>
                                <a href="{{ route('leaves.create') }}" class="btn btn-sm btn-primary">Apply Leave</a>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>From/To</th>
                                            <th>Type</th>
                                            <th>Days</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($user->leaves as $lv)
                                            <tr>
                                                <td class="small">
                                                    <div class="fw-bold text-dark">{{ $lv->from_date->format('d M') }} -
                                                        {{ $lv->to_date->format('d M') }}</div>
                                                    <div class="text-muted smaller text-truncate"
                                                        style="max-width: 200px;">{{ $lv->reason }}</div>
                                                </td>
                                                <td class="small">{{ ucfirst($lv->leave_type) }}</td>
                                                <td class="small">{{ $lv->total_days }}</td>
                                                <td>
                                                    <span
                                                        class="badge bg-{{ $lv->status == 'approved' ? 'success' : ($lv->status == 'pending' ? 'warning' : 'danger') }}-subtle text-{{ $lv->status == 'approved' ? 'success' : ($lv->status == 'pending' ? 'warning' : 'danger') }} px-2">
                                                        {{ ucfirst($lv->status) }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="text-center py-4 text-muted small">No leave
                                                    requests found.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Security Tab -->
                        <div class="tab-pane fade" id="settings">
                            <h6 class="fw-bold mb-4 mt-2">Change Password</h6>
                            <form action="#" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">Current Password</label>
                                    <input type="password" class="form-control" name="current_password" required>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label small fw-bold">New Password</label>
                                            <input type="password" class="form-control" name="new_password" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label small fw-bold">Confirm Password</label>
                                            <input type="password" class="form-control" name="new_password_confirmation"
                                                required>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary px-4 fw-bold">Update Password</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .nav-pills .nav-link {
            border-radius: 0.5rem;
            padding: 0.6rem 1.25rem;
            color: #64748b;
            font-weight: 500;
            transition: all 0.2s;
        }

        .nav-pills .nav-link.active {
            background-color: #f1f5f9;
            color: var(--bs-primary);
        }

        .profile-header {
            border-bottom: 0;
        }
    </style>
@endpush