@extends('layouts.app', ['title' => __('Employee Management')])

@section('content')
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5 mt--4">
    @isset($breadcrumbs)
        @include('general.breadcrumbs')
    @endisset
</div>

<style>
    .btn-focus {
        background-color: #007bff;
        color: white;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    .toggle-badge {
        cursor: pointer;
        transition: 0.2s ease;
        padding: 6px;
        color: white !important;
    }
    .toggle-badge:hover {
        opacity: 0.8;
        transform: scale(1.05);
    }
    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
       background-color: #05A9C5;
    color: #fff;
    border-color: #05A9C5 #05A9C5 #fff;
}
</style>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <form>
                        <div class="row">
                            <div class="col-md-2">
                                <h3 class="mb-0">Employee Lists</h3>
                            </div>
                            <div id="form-group-search" class="form-group col-md-4">
                                <input type="text" name="search" id="search" class="form-control" placeholder="Search employee" value="">
                            </div>
                            <div class="col-md-2 form-group">
                                <button type="submit" class="btn btn-primary btn-md btn-block">Filter</button>
                            </div>
                            <div class="col-2"></div>
                            <div class=" form-group">
                                <a href="{{ route($setup['webroute_path'].'create') }}" class="btn btn-sm btn-primary">Add</a>
                            </div>
                            <div class=" form-group" style="margin-left:10px;">
                                <button id="editBtn" type="button" class="btn btn-sm btn-primary">Edit</button>
                            </div>
                            <div class=" form-group" style="margin-left:10px;">
                                <button id="deleteBtn" type="button" class="btn btn-sm btn-danger">Delete</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-12">
                    @include('partials.flash')
                </div>

                @if(count($setup['items']))
                    <!-- Tabs Navigation -->
                    <ul class="nav nav-tabs mb-3" id="employeeTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button style="cursor: pointer;" class="nav-link active" id="active-tab" data-bs-toggle="tab" data-bs-target="#active" type="button" role="tab" aria-controls="active" aria-selected="true">
                                Active Employees
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button style="cursor: pointer;" class="nav-link" id="inactive-tab" data-bs-toggle="tab" data-bs-target="#inactive" type="button" role="tab" aria-controls="inactive" aria-selected="false">
                                Inactive Employees
                            </button>
                        </li>
                    </ul>

                    <!-- Tabs Content -->
                    <div class="tab-content" id="employeeTabsContent">
                        <!-- Active Employees Table -->
                       <!-- Active Employees Table -->
<div class="tab-pane fade show active" id="active" role="tabpanel" aria-labelledby="active-tab">
    <div class="table-responsive">
        @if($setup['items']->where('active', 1)->count())
            <table class="table align-items-center table-flush">
                <thead class="thead-light">
                    <tr>
                        <th><input type="checkbox" id="select-all-active"></th>
                        <th>First Name</th>
                        <th>MI</th>
                        <th>Last Name</th>
                        <th>Job Type</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Pay Hour Rate</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                        <th>Created At</th>
                        <th>Access Code</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($setup['items']->where('active', 1) as $item)
                        @php
                            $parts = explode(' ', $item->name);
                            $first = $parts[0] ?? '';
                            $middle = $parts[1] ?? '';
                            $last = $parts[2] ?? '';
                            $digits = preg_replace('/\D/', '', $item->phone);
                        @endphp
                        <tr>
                            <td><input type="checkbox" class="row-check" value="{{ $item->id }}"></td>
                            <td>{{ $first }}</td>
                            <td>{{ $middle }}</td>
                            <td>{{ $last }}</td>
                            <td>{{ $item->job_type }}</td>
                            <td>
                                @if(strlen($digits) === 10)
                                    ({{ substr($digits, 0, 3) }}) {{ substr($digits, 3, 3) }}-{{ substr($digits, 6) }}
                                @else
                                    {{ $item->phone }}
                                @endif
                            </td>
                            <td>{{ $item->email }}</td>
                            <td>{{ $item->per_hour_pay_rate }}</td>
                            <td>{{ $item->address ?? 'N/A' }}</td>
                            <td>{{ $item->city ?? 'N/A' }}</td>
                            <td>{{ $item->state ?? 'N/A' }}</td>
                            <td>{{ $item->zip_code ?? 'N/A' }}</td>
                            <td>{{ $item->created_at ? $item->created_at->format('d-m-Y') : 'N/A' }}</td>
                            <td>{{ $item->access_code }}</td>
                            <td>
                                <a href="{{ route('staff.toggle', $item->id) }}" class="badge toggle-badge bg-success">Active</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="text-center py-5">
                <h5>No active employees found.</h5>
            </div>
        @endif
    </div>
</div>


<!-- Inactive Employees Table -->
<div class="tab-pane fade" id="inactive" role="tabpanel" aria-labelledby="inactive-tab">
    <div class="table-responsive">
        @if($setup['items']->where('active', 0)->count())
            <table class="table align-items-center table-flush">
                <thead class="thead-light">
                    <tr>
                        <th><input type="checkbox" id="select-all-active"></th>
                        <th>First Name</th>
                        <th>MI</th>
                        <th>Last Name</th>
                        <th>Job Type</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Pay Hour Rate</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                        <th>Created At</th>
                        <th>Access Code</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($setup['items']->where('active', 0) as $item)
                        @php
                            $parts = explode(' ', $item->name);
                            $first = $parts[0] ?? '';
                            $middle = $parts[1] ?? '';
                            $last = $parts[2] ?? '';
                            $digits = preg_replace('/\D/', '', $item->phone);
                        @endphp
                        <tr>
                            <td><input type="checkbox" class="row-check" value="{{ $item->id }}"></td>
                            <td>{{ $first }}</td>
                            <td>{{ $middle }}</td>
                            <td>{{ $last }}</td>
                            <td>{{ $item->job_type }}</td>
                            <td>
                                @if(strlen($digits) === 10)
                                    ({{ substr($digits, 0, 3) }}) {{ substr($digits, 3, 3) }}-{{ substr($digits, 6) }}
                                @else
                                    {{ $item->phone }}
                                @endif
                            </td>
                            <td>{{ $item->email }}</td>
                            <td>{{ $item->per_hour_pay_rate }}</td>
                            <td>{{ $item->address ?? 'N/A' }}</td>
                            <td>{{ $item->city ?? 'N/A' }}</td>
                            <td>{{ $item->state ?? 'N/A' }}</td>
                            <td>{{ $item->zip_code ?? 'N/A' }}</td>
                            <td>{{ $item->created_at ? $item->created_at->format('d-m-Y') : 'N/A' }}</td>
                            <td>{{ $item->access_code }}</td>
                           <td>
                        <a href="{{ route('staff.toggle', $item->id) }}" class="badge toggle-badge bg-danger">Inactive</a>
                    </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="text-center py-5">
                <h5>No Inactive employees found.</h5>
            </div>
        @endif
    </div>
</div>

                    </div>
                @endif

                <div class="card-footer py-4">
                    @if(count($setup['items']))
                        <nav class="d-flex justify-content-end" aria-label="...">
                            {{ $setup['items']->links() }}
                        </nav>
                    @else
                        <h4>{{ __('crud.no_items',['items'=>__('Employees')]) }}</h4>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@include('layouts.footers.auth')

<!-- Bootstrap JS (required for tabs to work) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Select all checkboxes
    document.getElementById("select-all-active")?.addEventListener("change", function() {
        document.querySelectorAll("#active .row-check").forEach(c => c.checked = this.checked);
    });
    document.getElementById("select-all-inactive")?.addEventListener("change", function() {
        document.querySelectorAll("#inactive .row-check").forEach(c => c.checked = this.checked);
    });

    function getSelectedId() {
        const selected = Array.from(document.querySelectorAll(".row-check:checked"));
        if (selected.length === 0) { alert("Please select a record first."); return null; }
        if (selected.length > 1) { alert("Please select only one record."); return null; }
        return selected[0].value;
    }

    document.getElementById("editBtn").addEventListener("click", function() {
        let id = getSelectedId();
        if (id) window.location.href = "/staff/" + id + "/edit";
    });

    document.getElementById("deleteBtn").addEventListener("click", function() {
        let id = getSelectedId();
        if (id && confirm("Are you sure you want to delete this item?")) {
            window.location.href = "/staff/del/" + id;
        }
    });
</script>

@endsection