@extends('layouts.app')
@section('title', $title)
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="#">Payroll</a></li>
    <li class="breadcrumb-item active">{{ $title }}</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="bi {{ $icon }} me-2 text-primary"></i>{{ $title }}</h1>
        <p class="page-subtitle">{{ $stats['total'] }} total &nbsp;·&nbsp; <span class="text-success">{{ $stats['active'] }} active</span></p>
    </div>
    @if(auth()->user()->hasPermission('payroll','edit'))
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#lookupAddModal">
        <i class="bi bi-plus-lg me-1"></i>New {{ $singular }}
    </button>
    @endif
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 mb-3">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger alert-dismissible mb-3">
    @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card mb-3">
    <div class="card-body py-2 px-3">
        <form method="GET">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-sm-5">
                    <input type="text" name="search" class="form-control form-control-sm" placeholder="Search name…" value="{{ request('search') }}">
                </div>
                <div class="col-6 col-sm-2">
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-3 col-sm-1">
                    <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search"></i></button>
                </div>
                <div class="col-3 col-sm-1">
                    <a href="{{ route($route . '.index') }}" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-x-lg"></i></a>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" style="min-width:520px">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">Name</th>
                        <th style="width:120px">Status</th>
                        <th class="text-end pe-4" style="width:140px">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($records as $record)
                    <tr class="{{ !$record->is_active ? 'table-secondary' : '' }}">
                        <td class="ps-4 fw-semibold" style="font-size:13.5px">{{ $record->name }}</td>
                        <td>
                            <span class="badge" style="font-size:11px;background:{{ $record->is_active ? '#d1e7dd' : '#e9ecef' }};color:{{ $record->is_active ? '#0a3622' : '#495057' }}">
                                {{ $record->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td class="text-end pe-3">
                            @if(auth()->user()->hasPermission('payroll','edit'))
                            <div class="d-flex justify-content-end gap-1">
                                <button type="button" class="btn btn-outline-secondary btn-sm btn-edit-lookup"
                                        data-name="{{ $record->name }}"
                                        data-active="{{ $record->is_active ? '1' : '0' }}"
                                        data-url="{{ route($route . '.update', $record) }}"
                                        title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form method="POST" action="{{ route($route . '.toggle', $record) }}">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="btn btn-sm {{ $record->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                                            title="{{ $record->is_active ? 'Mark inactive' : 'Mark active' }}">
                                        <i class="bi bi-{{ $record->is_active ? 'eye-slash' : 'eye' }}"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route($route . '.destroy', $record) }}" onsubmit="return confirm('Delete {{ addslashes($record->name) }}?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center py-5 text-muted">
                            <i class="bi {{ $icon }} display-5 d-block mb-2"></i>
                            No {{ strtolower($title) }} found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($records->hasPages())
        <div class="px-4 py-3 border-top">{{ $records->links() }}</div>
        @endif
    </div>
</div>

@if(auth()->user()->hasPermission('payroll','edit'))
<div class="modal fade" id="lookupAddModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">New {{ $singular }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route($route . '.store') }}">
                @csrf
                <div class="modal-body pt-2">
                    <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required maxlength="120" autofocus>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="lookupEditModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Edit {{ $singular }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="lookupEditForm">
                @csrf @method('PUT')
                <div class="modal-body pt-2">
                    <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" id="lookupEditName" class="form-control" required maxlength="120">
                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="lookupEditActive">
                        <label class="form-check-label fw-semibold" for="lookupEditActive">Active</label>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
document.querySelectorAll('.btn-edit-lookup').forEach(function (btn) {
    btn.addEventListener('click', function () {
        document.getElementById('lookupEditForm').action = this.dataset.url;
        document.getElementById('lookupEditName').value = this.dataset.name;
        document.getElementById('lookupEditActive').checked = this.dataset.active === '1';
        if (typeof bootstrap !== 'undefined') {
            bootstrap.Modal.getOrCreateInstance(document.getElementById('lookupEditModal')).show();
        }
    });
});
</script>
@endpush