@extends('seller.layout.index')

@section('title')
    پرسنل
@endsection

@section('style')
    <style>
        .personnel-table {
            width: 100%;
        }

        .personnel-table th,
        .personnel-table td {
            padding: 12px 15px;
            vertical-align: middle;
        }

        .personnel-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        .action-buttons {
            white-space: nowrap;
        }

        .action-buttons a {
            margin: 0 3px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid py-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">لیست پرسنل</h2>
                    <div>
                        <a href="{{ route('seller.personnel.create') }}" class="btn btn-primary ms-2">
                            <i class="fas fa-plus ms-2"></i> افزودن پرسنل
                        </a>
                        <button type="button" class="btn btn-success"
                                onclick="document.getElementById('importFile').click()">
                            <i class="fas fa-file-excel ms-2"></i> افزودن اکسل
                        </button>

                        <form action="{{ route('seller.personnel.excel') }}" method="POST" enctype="multipart/form-data"
                              style="display: none">
                            @csrf
                            <input type="file" name="file" id="importFile" onchange="this.form.submit()"
                                   accept=".xlsx,.xls,.csv">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover personnel-table">
                        <thead>
                        <tr>
                            <th width="20%">نام و نام خانوادگی</th>
                            <th width="15%">موبایل</th>
                            <th width="15%">کد ملی</th>
                            <th width="15%">نام پدر</th>
                            <th width="15%">تاریخ تولد</th>
                            <th width="15%">وضعیت</th>
                            <th width="20%">عملیات</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($personnels as $person)
                            <tr>
                                <td>{{ $person->first_name . ' ' . $person->last_name }}</td>
                                <td>{{ $person->cellphone }}</td>
                                <td>{{ $person->national_code }}</td>
                                <td>{{ $person->father_name }}</td>
                                <td>{{ $person->birth_date }}</td>
                                <td>{{ $person->personnel_activation == 1 ?'فعال' : 'غیرفعال' }}</td>
                                <td class="action-buttons">
                                    <a class="btn btn-sm btn-warning text-white"
                                       href="{{route('seller.personnel.edit',['personnel'=>$person->id])}}"
                                       title="ویرایش">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form action="{{ route('seller.personnel.active', ['personnel' => $person->id]) }}"
                                          method="POST" style="display:inline;">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-secondary" title="غیرفعال‌سازی">
                                            <i class="fas fa-toggle-off"></i>
                                        </button>
                                    </form>

                                    <form action="{{ route('seller.personnel.remove', ['personnel' => $person->id]) }}"
                                          method="POST" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-danger" title="حذف"
                                                onclick="return confirm('آیا از حذف این آیتم مطمئن هستید؟')">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>

                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- SweetAlert نمایش پیام‌ها --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @if(session('import_failures'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    icon: 'error',
                    title: 'خطا در آپلود اکسل',
                    html: `
                        <p>برخی ردیف‌های اکسل دارای اشکال بودند:</p>
                        <ul style="text-align: right; max-height: 200px; overflow-y: auto;">
                            @foreach(session('import_failures') as $failure)
                    <li>سطر {{ $failure->row() }} — {{ implode('، ', $failure->errors()) }}</li>
                            @endforeach
                    </ul>
`,
                    confirmButtonText: 'باشه'
                });
            });
        </script>
    @endif

    @if(session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    icon: 'success',
                    title: '{{ session('success') }}',
                    confirmButtonText: 'باشه'
                });
            });
        </script>
    @endif
@endsection