@extends('admin.adminpanel')

@section('content')

<style>
    .client-toggle {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: bold;
        text-decoration: none;
        margin-right: 8px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    /* Active button */
    .client-toggle.active {
        background-color: green;
        color: white;
        border-color: darkgreen;
        box-shadow: 0px 3px 6px rgba(0, 128, 0, 0.3);
    }

    /* Inactive button */
    .client-toggle.inactive {
        background-color: #cce5ff;
        color: #004085;
        border-color: #99ccff;
    }

    /* Hover on inactive → look active */
    .client-toggle.inactive:hover {
        background-color: green;
        color: white;
        border-color: darkgreen;
        box-shadow: 0px 3px 6px rgba(0, 128, 0, 0.3);
    }
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Employee List</li>
                        </ol>
                    </div>
                    <h2> Employee List</h2> 
                </div>
                <a href="{{ url('/employee-list') }}" class="client-toggle {{ request()->is('employee-list') ? 'active' : 'inactive' }}">
                             Active Employee List
                </a>
                    
                <a href="{{ url('/deactivated-employee-list') }}"  class="client-toggle {{ request()->is('deactivated-employee-list') ? 'active' : 'inactive' }}">
                                Deactivated Employees List
                           
                 </a>               
           
        </div><!-- /.container-fluid -->
    </section>


        @if(session('update-successfull'))
        <div class="container mt-4">
            <div class="alert alert-success">
                {{ session('update-successfull') }}
            </div>
        </div>
        @elseif (session('update-failed'))
        <div class="container mt-4">
            <div class="alert alert-danger">
                {{ session('update-failed') }}
            </div>
        </div>
        @endif

        @if(session('deactivate-successfull'))
        <div class="container mt-4">
            <div class="alert alert-success">
                {{ session('deactivate-successfull') }}
            </div>
        </div>
        @elseif (session('deactivate-failed'))
        <div class="container mt-4">
            <div class="alert alert-danger">
                {{ session('deactivate-failed') }}
            </div>
        </div>
        @endif

        @if(session('activate-successfull'))
        <div class="container mt-4">
            <div class="alert alert-success">
                {{ session('activate-successfull') }}
            </div>
        </div>
        @elseif (session('activate-failed'))
        <div class="container mt-4">
            <div class="alert alert-danger">
                {{ session('activate-failed') }}
            </div>
        </div>
        @endif


    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12">
                    <table id="tbl-datatbl" class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Full Name</th>
                                
                                <th>E-mail</th>
                                <th>Phone Number</th>
                                <th>Role</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($deactivated_employees as $employee)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $employee->full_name }}</td>
                                    
                                    <td>{{ $employee->email }}</td>
                                    <td>{{ $employee->phone_number }}</td>
                                    <td>
                                        <span class="badge bg-danger">{{ $employee->role }}</span>
                                    </td>

                                    <td>
                                        <a href="{{ url('/activate_employee', $employee->user_id) }}" class="btn btn-success btn-sm">Activate</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection