@extends('layouts.app')

@section('title', 'Leave Requests')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">Leave Requests</span>
    </div>
@endsection

@section('content')
<div class="space-y-5 animate-fade-up" x-data="{ showApproveModal: false, showRejectModal: false, selectedId: null, selectedName: '' }">

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Leave Requests</h1>
            <p class="text-sm text-gray-500 mt-1">Manage employee leave requests</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('leave.calendar') }}" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                Calendar
            </a>
            <a href="{{ route('leave.balances') }}" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                Balances
            </a>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="stat-card">
            <div class="stat-icon bg-warning-100 text-warning-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-value">{{ $pendingCount }}</div>
            <div class="stat-label">Pending Requests</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-success-100 text-success-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div class="stat-value">{{ $approvedThisMonth }}</div>
            <div class="stat-label">Approved This Month</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-primary-100 text-primary-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
            </div>
            <div class="stat-value">{{ $onLeaveToday }}</div>
            <div class="stat-label">On Leave Today</div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card">
        <div class="card-body">
            <form method="GET" action="{{ route('leave.requests') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search employee..."
                           class="form-input pl-10">
                </div>
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                    <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
                <select name="leave_type_id" class="form-select">
                    <option value="">All Leave Types</option>
                    @foreach($leaveTypes as $type)
                        <option value="{{ $type->id }}" {{ request('leave_type_id') == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn-secondary">Filter</button>
                @if(request()->hasAny(['search', 'status', 'leave_type_id', 'employee_id']))
                    <a href="{{ route('leave.requests') }}" class="btn-ghost text-center">Clear</a>
                @endif
            </form>
        </div>
    </div>

    {{-- Requests Table --}}
    <div class="card">
        @if($requests->isEmpty())
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-full h-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
                <div class="empty-state-title">No leave requests found</div>
                <div class="empty-state-text">Leave requests from employees will appear here.</div>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Dates</th>
                            <th>Days</th>
                            <th>Status</th>
                            <th>Submitted</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($requests as $leaveReq)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2.5">
                                        <div class="avatar avatar-sm bg-gradient-to-br from-primary-600 to-accent-500">
                                            {{ strtoupper(substr($leaveReq->employee->first_name ?? '?', 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-800 text-sm">{{ $leaveReq->employee->first_name }} {{ $leaveReq->employee->last_name }}</div>
                                            <div class="text-xxs text-gray-400">{{ $leaveReq->employee->employee_code }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="flex items-center gap-2">
                                    <div class="w-2.5 h-2.5 rounded-full" style="background-color: {{ $leaveReq->leaveType?->color ?? '#64748B' }}"></div>
                                    <span class="text-sm">{{ $leaveReq->leaveType?->name ?? 'Unknown' }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-sm">{{ $leaveReq->start_date->format('d M Y') }}</div>
                                    @if(!$leaveReq->start_date->eq($leaveReq->end_date))
                                        <div class="text-xxs text-gray-400">to {{ $leaveReq->end_date->format('d M Y') }}</div>
                                    @endif
                                </td>
                                <td>
                                    <span class="text-sm font-medium">{{ $leaveReq->duration_label }}</span>
                                </td>
                                <td>
                                    <span class="badge {{ $leaveReq->status_badge_class }}">
                                        <span class="badge-dot"></span>
                                        {{ ucfirst($leaveReq->status) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-xs text-gray-500">{{ $leaveReq->created_at->format('d M Y') }}</span>
                                </td>
                                <td class="text-right">
                                    @if($leaveReq->isPending())
                                        <div class="flex items-center justify-end gap-1">
                                            <button type="button" class="btn-icon text-success-600 hover:bg-success-50"
                                                    title="Approve"
                                                    @click="selectedId = {{ $leaveReq->id }}; selectedName = '{{ $leaveReq->employee->first_name }} {{ $leaveReq->employee->last_name }}'; showApproveModal = true">
                                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                            </button>
                                            <button type="button" class="btn-icon text-danger-500 hover:bg-danger-50"
                                                    title="Reject"
                                                    @click="selectedId = {{ $leaveReq->id }}; selectedName = '{{ $leaveReq->employee->first_name }} {{ $leaveReq->employee->last_name }}'; showRejectModal = true">
                                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                            </button>
                                        </div>
                                    @elseif($leaveReq->reviewer)
                                        <span class="text-xxs text-gray-400">by {{ $leaveReq->reviewer->name }}</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($requests->hasPages())
                <div class="px-5 py-4 border-t border-gray-100">
                    {{ $requests->links() }}
                </div>
            @endif
        @endif
    </div>

    {{-- Approve Modal --}}
    <template x-if="showApproveModal">
        <div class="modal-backdrop" @click.self="showApproveModal = false">
            <div class="modal">
                <div class="modal-header">
                    <h3 class="font-display text-lg font-semibold text-gray-800">Approve Leave Request</h3>
                </div>
                <form :action="'/leave/' + selectedId + '/approve'" method="POST">
                    @csrf
                    <div class="modal-body">
                        <p class="text-sm text-gray-600 mb-4">Approve leave request for <strong x-text="selectedName"></strong>?</p>
                        <label class="form-label">Notes (optional)</label>
                        <textarea name="review_notes" class="form-input" rows="3" placeholder="Any notes for the employee..."></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-secondary" @click="showApproveModal = false">Cancel</button>
                        <button type="submit" class="btn-primary bg-success-600 hover:bg-success-700">Approve</button>
                    </div>
                </form>
            </div>
        </div>
    </template>

    {{-- Reject Modal --}}
    <template x-if="showRejectModal">
        <div class="modal-backdrop" @click.self="showRejectModal = false">
            <div class="modal">
                <div class="modal-header">
                    <h3 class="font-display text-lg font-semibold text-gray-800">Reject Leave Request</h3>
                </div>
                <form :action="'/leave/' + selectedId + '/reject'" method="POST">
                    @csrf
                    <div class="modal-body">
                        <p class="text-sm text-gray-600 mb-4">Reject leave request for <strong x-text="selectedName"></strong>?</p>
                        <label class="form-label">Reason for rejection <span class="text-danger-500">*</span></label>
                        <textarea name="review_notes" class="form-input" rows="3" placeholder="Please provide a reason..." required></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-secondary" @click="showRejectModal = false">Cancel</button>
                        <button type="submit" class="btn-danger">Reject</button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>
@endsection