@extends('layouts.master')

@section('css')
    <link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/jquery-nice-select/css/nice-select.css') }}" rel="stylesheet" />
    
    <style>
        /* تحسينات بصرية للجدول */
        .main-employee-table thead th {
            background-color: #f8f9fa;
            color: #495057;
            font-weight: 700;
            border-bottom: 2px solid #dee2e6 !important;
            vertical-align: middle;
        }
        .employee-name {
            font-weight: 600;
            color: #2c3e50;
        }
        .badge-role {
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 11px;
        }
        .btn-edit {
            border-radius: 8px;
            transition: all 0.3s;
        }
        .btn-edit:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }
    </style>
@endsection

@section('title')
    {{ __('hr.show_employees') }}
@stop

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between parent-heading">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">{{ __('hr.show_employees') }}</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ إدارة الموارد البشرية</span>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            @if (count($errors) > 0)
                <div class="alert alert-danger shadow-sm">
                    <button aria-label="Close" class="close" data-dismiss="alert" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <strong>خطأ:</strong> تحقق من البيانات المدخلة.
                </div>
            @endif

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover main-employee-table text-center" id="employeeTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('home.date') }}</th>
                                    <th>{{ __('hr.name') }}</th>
                                    <th>{{ __('home.supervisor') }}</th>
                                    <th>{{ __('hr.Id') }}</th>
                                    <th>{{ __('hr.phone') }}</th>
                                    <th>{{ __('hr.department') }}</th>
                                    <th>{{ __('hr.nationality') }}</th>
                                    <th>{{ __('home.operations') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (App\Models\employee::with('departments')->get() as $index => $employee)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td class="text-muted tx-13">{{ $employee->created_at->format('Y-m-d') }}</td>
                                        <td class="employee-name">
                                            {{ App::getLocale() == 'ar' ? $employee->name_ar : $employee->name_en }}
                                        </td>
                                        <td>
                                            @if($employee->supervisor == 1)
                                                <span class="badge badge-primary-light badge-role">{{ __('home.supervisor') }}</span>
                                            @else
                                                <span class="badge badge-secondary-light badge-role">{{ __('home.driver') }}</span>
                                            @endif
                                        </td>
                                        <td class="font-weight-bold text-primary">{{ $employee->personal_identification }}</td>
                                        <td>{{ $employee->phone }}</td>
                                        <td>
                                            <span class="text-info font-weight-500">
                                                {{ App::getLocale() == 'ar' ? $employee->departments->name_ar : $employee->departments->name_en }}
                                            </span>
                                        </td>
                                        <td>{{ $employee->nationality }}</td>
                                        <td>
                                            <a href="{{ url('updateEmployee/' . $employee->id) }}" 
                                               class="btn btn-sm btn-info btn-edit shadow-sm"
                                               style="background-color: #419BB2;">
                                                <i class="las la-pen"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>

<script>
    $(document).ready(function() {
        // تفعيل محرك البحث والترتيب لجدول الموظفين
        $('#employeeTable').DataTable({
            language: {
                searchPlaceholder: 'ابحث عن موظف...',
                sSearch: '',
                lengthMenu: '_MENU_',
                info: "عرض _START_ إلى _END_ من أصل _TOTAL_ موظف",
                paginate: {
                    next: "التالي",
                    previous: "السابق"
                }
            },
            responsive: true,
            pageLength: 50,
            order: [[0, 'asc']] // الترتيب حسب الرقم التسلسلي
        });

        // إخفاء التنبيهات تلقائياً
        setTimeout(function() {
            $('.alert').fadeOut(500);
        }, 4000);
    });
</script>
@endsection