@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 Notify -->
    <link href="{{ URL::asset('assets/plugins/notify/css/notifIt.css') }}" rel="stylesheet" />

    <style>
        /* ==========================================================
           Users 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: 13px !important;
            font-weight: 700 !important;
            padding: 12px 10px !important;
            border: none !important;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
        }

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

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

        /* شارات الحالة (نشط / غير نشط) */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
        }

        .badge-active {
            background-color: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .badge-active .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #22c55e;
        }

        .badge-inactive {
            background-color: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .badge-inactive .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #ef4444;
        }

        /* شارة الفرع والصلاحية */
        .badge-branch {
            background-color: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
        }

        .badge-role {
            background-color: #ede9fe;
            color: #6d28d9;
            border: 1px solid #ddd6fe;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            display: inline-block;
            margin: 1px 2px;
        }

        /* أزرار العمليات */
        .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;
        }

        /* زر إضافة مستخدم بالهيدر */
        .btn-create-user {
            background: linear-gradient(135deg, #1e293b, #0f172a) !important;
            color: #ffffff !important;
            border: none;
            border-radius: 9px;
            padding: 9px 20px;
            font-weight: 700;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
            transition: all 0.2s ease;
            text-decoration: none !important;
        }

        .btn-create-user:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
            color: #ffffff !important;
        }
    </style>
@endsection

@section('title')
    {{ __('users.usersList') }}
@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-users-cog" style="font-size: 22px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('users.usersList') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">إدارة حسابات المستخدمين وصلاحيات الوصول وتعيين الفروع</span>
                </div>
            </div>
        </div>

        @can('Create a vendor')
        <div class="d-flex my-xl-auto right-content">
            <a class="btn-create-user" href="{{ route('users.create') }}">
                <i class="fa fa-user-plus"></i>
                <span>{{ __('users.adduser') }}</span>
            </a>
        </div>
        @endcan
    </div>
</div>
@endsection

@section('content')

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم بنجاح:</strong> {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- row opened -->
<div class="row">
    <div class="col-xl-12">
        <div class="invoices-main-card">

            <div class="card-header">
                <i class="fa fa-list-alt 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: 5%;">#</th>
                                <th style="width: 20%;">{{ __('users.username') }}</th>
                                <th style="width: 20%;">{{ __('users.email') }}</th>
                                <th style="width: 12%;">{{ __('users.status') }}</th>
                                <th style="width: 15%;">{{ __('users.branch') }}</th>
                                <th style="width: 18%;">{{ __('users.userType') }}</th>
                                <th style="width: 10%;">{{ __('users.Operations') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @foreach ($data as $key => $user)
                                                                @if (!empty($user->roles_name) && !in_array("Admin", $user->roles_name))
                                    <tr>
                                        <!-- الرقم -->
                                        <td style="font-weight: 700; color: #64748b;">
                                            {{ $i }}
                                        </td>

                                        <!-- اسم المستخدم -->
                                        <td style="font-weight: 800; color: #0f172a; font-size: 14px;">
                                            {{ $user->name }}
                                        </td>

                                        <!-- البريد الإلكتروني -->
                                        <td dir="ltr" style="font-weight: 600; color: #475569;">
                                            {{ $user->email }}
                                        </td>

                                        <!-- الحالة -->
                                        <td>
                                            @if ($user->active == 1)
                                                <span class="status-badge badge-active">
                                                    <span class="status-dot"></span>
                                                    <span>{{ __('users.active') }}</span>
                                                </span>
                                            @else
                                                <span class="status-badge badge-inactive">
                                                    <span class="status-dot"></span>
                                                    <span>{{ __('users.notactive') }}</span>
                                                </span>
                                            @endif
                                        </td>

                                        <!-- الفرع -->
                                        <td>
                                            <span class="badge-branch">
                                                <i class="fa fa-building-o ml-1 text-primary"></i> {{ $user->branch->name ?? 'غير محدد' }}
                                            </span>
                                        </td>

                                        <!-- نوع المستخدم والصلاحيات -->
                                        <td>
                                            @if (!empty($user->roles_name))
                                                @foreach ($user->roles_name as $v)
                                                    <span class="badge-role">{{ $v }}</span>
                                                @endforeach
                                            @else
                                                <span class="text-muted">---</span>
                                            @endif
                                        </td>

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

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

<!-- Modal حذف المستخدم -->
<div class="modal fade" id="modaldemo8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header bg-danger-transparent">
                <h6 class="modal-title font-weight-bold text-danger">
                    <i class="fa fa-exclamation-triangle ml-1"></i> حذف المستخدم
                </h6>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('users.destroy', 'test') }}" method="post">
                {{ method_field('delete') }}
                {{ csrf_field() }}
                <div class="modal-body p-4 text-center">
                    <p class="font-weight-bold mb-3" style="font-size: 15px;">هل أنت متأكد من رغبتك في حذف هذا المستخدم نهائياً؟</p>
                    <input type="hidden" name="user_id" id="user_id" value="">
                    <input class="form-control text-center font-weight-bold bg-light" name="username" id="username" type="text" readonly style="border-radius: 8px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-danger px-4 font-weight-bold">تأكيد الحذف</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('js')
<!-- Internal Datatable js -->
<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 Notify js -->
<script src="{{ URL::asset('assets/plugins/notify/js/notifIt.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/notify/js/notifit-custom.js') }}"></script>

<script>
    $('#modaldemo8').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var user_id = button.data('user_id');
        var username = button.data('username');
        var modal = $(this);
        modal.find('.modal-body #user_id').val(user_id);
        modal.find('.modal-body #username').val(username);
    });

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