@extends('layouts.app')

<style>
    .page-item.active .page-link{
      color: #fff;
      background-color: #001d40 !important;
      border:none !important;
    }
    .page-link{
      color: #000 !important;
    }
    .page-item.active .page-link{
     color: #fff !important;
    }
    .sidebar .sidebar-brand{
      background-color: #ffffff4d;
    }
     .sidebar .sidebar-brand {
      padding: 1rem;
      font-size: 1.2rem;
      text-align: center;
      background-color: #0B2C53;
      margin-bottom: 10px;
    }
    .sidebar .sidebar-brand img{
        max-width: 130px !important;
    }
    .sidebar a i{
       margin-right: 10px;  
    }
    .sidebar .sidebar-brand{
      background-color: #ffffff4d;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: #001d40 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
   
    background: #fff !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
        color: #000 !important;
        background: #f8f9fa !important;
    }
    .dataTables_wrapper .dataTables_paginate{
        margin:10px 0px;
    }
    .dataTables_wrapper .dataTables_info{
        margin:10px 0px; 
    }
</style>

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">MANAGE USER</h5>
        <a href="{{ route('manage_users.export') }}" class="btn btn-success btn-sm">
            <i class="fa fa-download"></i> Export CSV
        </a>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <table id="usersTable" class="table table-bordered table-striped" style="width:100%;">
            <thead>
                <tr>
                    <th>S.No.</th>
                    <th>Date</th>
                    <th>Full Name</th>
                    <th>Company Name</th>
                    <th>Email</th>
                    <th>Password</th>
                    <th>Phone Number</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $index => $user)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $user->create_date }}</td>
                        <td>{{ $user->full_name }}</td>
                        <td>{{ $user->comp_name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->pass }}</td>
                        <td>{{ $user->mobile }}</td>
                        <td>
                            <a href="{{ route('manage-users.show', $user->user_id) }}" class="btn btn-info btn-sm">
                                <i class="fa fa-eye"></i>
                            </a>
                            <a href="{{ route('manage-users.edit', $user->user_id) }}" class="btn btn-primary btn-sm mb-1 mt-1">
                                <i class="fa fa-edit"></i>
                            </a>
                            <form action="{{ route('manage-users.destroy', $user->user_id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?');">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </form>
                             <a href="{{ route('manage-users.toggleStatus', $user->user_id) }}">
                                @if($user->status == 1)
                                    <i class="fa fa-check-circle text-success"></i> {{-- Active --}}
                                @else
                                    <i class="fa fa-times-circle text-danger"></i> {{-- Inactive --}}
                                @endif
                             </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            pageLength: 10, 
            lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        });
    });
</script>
@endsection