@extends('master.app')
@section('title', 'Employees')

@section('body')
    <main class="app-content">
        <section class="gradient-custom-2">
            <div class="card shadow-sm">
                <div class="card-body">

                    {{-- Header --}}
                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                        <div>
                            <h4 class="mb-0">Employees</h4>
                            <small class="text-muted">Manage employees, search & filter</small>
                        </div>

                        <div class="d-flex gap-2">
                            @can('emp_reporting')
                                <a href="{{ route('employee.report_show') }}" class="btn btn-outline-primary btn-sm">
                                    <i class="fa fa-file"></i> Report
                                </a>
                            @endcan

                            <a href="{{ route('employees.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fa fa-refresh"></i> Reset
                            </a>

                            <a href="{{ route('employees.create') }}" class="btn btn-primary btn-sm">
                                <i class="fa fa-plus"></i> Add
                            </a>
                        </div>
                    </div>

                    @include('general.valert')

                    {{-- Filters --}}
                    <form method="GET" action="{{ route('employees.index') }}" class="row g-2 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label mb-1">Search</label>
                            <input type="text" name="keyword" value="{{ request('keyword') }}" class="form-control"
                                placeholder="Search name / phone / address / email / position">
                        </div>

                        <div class="col-md-2">
                            <label class="form-label mb-1">Status</label>
                            <select name="status" class="form-select">
                                <option value="">All</option>
                                <option value="1" @selected(request('status') === '1')>Active</option>
                                <option value="0" @selected(request('status') === '0')>In-Active</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label mb-1">From</label>
                            <input type="date" name="from" value="{{ request('from') }}" class="form-control">
                        </div>

                        <div class="col-md-2">
                            <label class="form-label mb-1">To</label>
                            <input type="date" name="to" value="{{ request('to') }}" class="form-control">
                        </div>

                        <div class="col-md-1 d-grid">
                            <button class="btn btn-dark">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </form>

                    {{-- Table --}}
                    <div class="table-responsive mt-3">
                        <table class="table table-striped table-hover align-middle text-center">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:70px">#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Address</th>
                                    <th>Salary</th>
                                    <th>Status</th>
                                    <th style="width:120px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($employees as $row)
                                    <tr>
                                        <td>{{ ($employees->currentPage() - 1) * $employees->perPage() + $loop->iteration }}
                                        </td>
                                        <td class="fw-semibold">{{ $row->name }}</td>
                                        <td>{{ $row->email }}</td>
                                        <td>{{ $row->phone }}</td>
                                        <td class="text-truncate" style="max-width:220px">{{ $row->address }}</td>
                                        <td>{{ number_format((float) $row->basic_salary, 2) }}</td>

                                        <td>
                                            <a href="{{ route('employee.status', $row->id) }}"
                                                class="text-decoration-none">
                                                @if ($row->status)
                                                    <span class="badge bg-success">Active</span>
                                                @else
                                                    <span class="badge bg-secondary">In-Active</span>
                                                @endif
                                            </a>
                                        </td>

                                        <td class="text-nowrap">
                                            <a href="{{ route('employees.show', $row->id) }}"
                                                class="btn btn-sm btn-light border shadow-0 me-1" data-mdb-toggle="tooltip"
                                                title="View">
                                                <i class="fa-solid fa-eye text-primary"></i>
                                            </a>

                                            <a href="{{ route('employees.edit', $row->id) }}"
                                                class="btn btn-sm btn-light border shadow-0" data-mdb-toggle="tooltip"
                                                title="Edit">
                                                <i class="fa-solid fa-pen-to-square text-success"></i>
                                            </a>
                                        </td>

                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-muted py-4">
                                            No employees found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div class="mt-3">
                        {{ $employees->links('pagination::bootstrap-4') }}
                    </div>

                </div>
            </div>
        </section>
    </main>
@endsection