@extends('layouts.master')

@section('css')
    <!-- Internal Data table css -->
    <link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/buttons.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/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <!-- Internal Nice-select css -->
    <link href="{{ URL::asset('assets/plugins/jquery-nice-select/css/nice-select.css') }}" rel="stylesheet" />

    <style>
        /* ==========================================================
           Employees List Modern UI
           ========================================================== */
        body {
            background-color: #f1f5f9;
            font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
        }

        /* كروت الصفحة */
        .invoices-main-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
            margin-bottom: 24px;
            overflow: hidden;
        }

        .invoices-main-card .card-header {
            background-color: #ffffff;
            border-bottom: 1px solid #f1f5f9;
            padding: 16px 20px;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* تنسيقات الجدول العصري */
        #example1 {
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 0;
            width: 100% !important;
        }

        #example1 thead th {
            background: #1e293b !important;
            color: #f8fafc !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
            padding: 12px 8px !important;
            border: none !important;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
        }

        #example1 tbody td {
            vertical-align: middle !important;
            padding: 10px 6px !important;
            font-size: 13px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.15s ease;
            text-align: center;
        }

        #example1 tbody tr:hover td {
            background-color: #f8fafc;
        }

        /* شارات الأقسام والفروع والجنس */
        .badge-dept {
            background-color: #ede9fe;
            color: #6d28d9;
            border: 1px solid #ddd6fe;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 700;
        }

        .badge-branch {
            background-color: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 700;
        }

        .badge-gender {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
        }

        .gender-male {
            background-color: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .gender-female {
            background-color: #fce7f3;
            color: #be185d;
            border: 1px solid #fbcfe8;
        }

        /* أزرار العمليات */
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            transition: all 0.2s ease;
            border: none;
            color: white !important;
            text-decoration: none !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
        }

        .btn-edit {
            background: linear-gradient(135deg, #0284c7, #0369a1) !important;
        }
    </style>
@endsection

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

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px; border-radius: 10px !important;">
                    <i class="las la-user-tie" style="font-size: 22px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('hr.show_employees') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">دليل وسجل بيانات الموظفين، الأقسام، الفروع والرواتب</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
            <button aria-label="Close" class="close" data-dismiss="alert" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
            <strong>خطأ</strong>
            <ul class="mb-0 mt-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- row -->
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="invoices-main-card">

                <div class="card-header">
                    <i class="fa fa-users text-primary"></i>
                    <span>قائمة الموظفين المسجلين بالنظام</span>
                </div>

                <div class="card-body p-3">
                    <div class="table-responsive hoverable-table">
                        <table class="table text-md-nowrap text-center our-table table-hover" id="example1" data-page-length='50' width="100%">
                            <thead>
                                <tr>
                                    <th style="width: 4%;">#</th>
                                    <th style="width: 10%;">{{ __('home.date') }}</th>
                                    <th style="width: 14%;">{{ __('hr.name') }}</th>
                                    <th style="width: 10%;">{{ __('hr.Id') }}</th>
                                    <th style="width: 11%;">{{ __('hr.email') }}</th>
                                    <th style="width: 10%;">{{ __('hr.phone') }}</th>
                                    <th style="width: 9%;">{{ __('hr.department') }}</th>
                                    <th style="width: 8%;">{{ __('home.branch') }}</th>
                                    <th style="width: 8%;">{{ __('hr.salary') }}</th>
                                    <th style="width: 5%;">{{ __('hr.age') }}</th>
                                    <th style="width: 6%;">{{ __('hr.sex') }}</th>
                                    <th style="width: 5%;">{{ __('home.operations') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                                                @foreach (App\Models\employee::get() as $employee)
                                                                        <tr>
                                        <!-- الرقم -->
                                        <td style="font-weight: 700; color: #64748b;">
                                            {{ $i }}
                                        </td>

                                        <!-- تاريخ التعيين -->
                                        <td style="font-size: 12px; color: #475569;">
                                            {{ \Carbon\Carbon::parse($employee->created_at)->format('Y-m-d') }}
                                        </td>

                                        <!-- اسم الموظف -->
                                        <td style="font-weight: 800; color: #0f172a; font-size: 13.5px; text-align: right; padding-right: 12px !important;">
                                            {{ __('hr.phone') == 'رقم الجوال' ? $employee->name_ar : ($employee->name_en ?? $employee->name_ar) }}
                                        </td>

                                        <!-- رقم الهوية -->
                                        <td dir="ltr" style="font-weight: 700; color: #1e40af;">
                                            {{ $employee->personal_identification ?: '---' }}
                                        </td>

                                        <!-- البريد الإلكتروني -->
                                        <td dir="ltr" style="font-size: 12px; color: #475569;">
                                            {{ $employee->email ?: '---' }}
                                        </td>

                                        <!-- رقم الهاتف -->
                                        <td dir="ltr" style="font-weight: 600; color: #0f172a;">
                                            {{ $employee->phone ?: '---' }}
                                        </td>

                                        <!-- القسم -->
                                        <td>
                                            @if($employee->departments)
                                                <span class="badge-dept">
                                                    {{ __('hr.phone') == 'رقم الجوال' ? $employee->departments->name_ar : ($employee->departments->name_en ?? $employee->departments->name_ar) }}
                                                </span>
                                            @else
                                                <span class="text-muted">---</span>
                                            @endif
                                        </td>

                                        <!-- الفرع -->
                                        <td>
                                            <span class="badge-branch">
                                                {{ __('hr.phone') == 'رقم الجوال' ? ($employee->branch->name_ar ?? $employee->branch->name ?? '—') : ($employee->branch->name_en ?? $employee->branch->name ?? '—') }}
                                            </span>
                                        </td>

                                        <!-- الراتب -->
                                        <td style="font-weight: 800; color: #047857;">
                                            {{ number_format($employee->salary, 2) }}
                                        </td>

                                        <!-- العمر -->
                                        <td style="font-weight: 700;">
                                            {{ $employee->old ?: '---' }}
                                        </td>

                                        <!-- الجنس -->
                                        <td>
                                            @if($employee->sex == 'male')
                                                <span class="badge-gender gender-male">
                                                    {{ __('hr.male') }}
                                                </span>
                                            @else
                                                <span class="badge-gender gender-female">
                                                    {{ __('hr.female') }}
                                                </span>
                                            @endif
                                        </td>

                                        <!-- العمليات -->
                                        <td>
                                            <div class="d-flex align-items-center justify-content-center">
                                                <a href="{{ url('updateEmployee/' . $employee->id) }}" class="action-btn btn-edit" title="تعديل">
                                                    <i class="las la-pen" style="font-size: 16px;"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- row closed -->

@endsection

@section('js')
    <!-- Internal Data tables -->
    <script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/responsive.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ URL::asset('assets/js/table-data.js') }}"></script>

    <!-- Internal Nice-select js -->
    <script src="{{ URL::asset('assets/plugins/jquery-nice-select/js/jquery.nice-select.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/jquery-nice-select/js/nice-select.js') }}"></script>

    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('.alert').fadeOut(500);
            }, 4000);
        });
    </script>
@endsection