@extends('mainlayout.layout')

@section('title')
@endsection

@push('css')
@endpush

@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">Import Users</h4>
            <div class="page-title-right">
                <a href="/users/view_user" class="btn btn-secondary btn-sm">
                    <i class="bx bx-arrow-back"></i> Back to Users
                </a>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title mb-3 text-uppercase"
                    style="background-color:#f8f8fb;padding:0.5em 0.25em;">Upload File</h4>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="/users/import_users" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="users_file">File <span class="text-danger">*</span></label>
                                <input type="file" class="form-control @error('users_file') is-invalid @enderror"
                                    name="users_file" id="users_file" accept=".xlsx,.xls,.csv">
                                <small class="text-muted">Accepted formats: .xlsx, .xls, .csv &mdash; Max 10MB</small>
                                @error('users_file')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="role">Assign Role <span class="text-danger">*</span></label>
                                <select name="role" id="role"
                                    class="form-control @error('role') is-invalid @enderror">
                                    @foreach ($allowed_roles as $r)
                                        <option value="{{ $r }}" {{ old('role') === $r ? 'selected' : '' }}>
                                            {{ ucwords($r) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('role')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-lg-4">
                            <button type="submit" class="btn btn_blck w-100">
                                <i class="bx bx-upload"></i> Import Users
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">File Format Guide</h4>
                <p class="text-muted mb-2">
                    The file must have a <strong>header row</strong> as the first row, followed by one user per row.
                    Columns must be in the following order:
                </p>
                <div class="table-responsive">
                    <table class="table table-bordered table-sm">
                        <thead class="thead-light">
                            <tr>
                                <th>Column</th>
                                <th>Field</th>
                                <th>Required</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>A</td><td>first_name</td><td><span class="text-danger">Yes</span></td></tr>
                            <tr><td>B</td><td>middle_name</td><td>No</td></tr>
                            <tr><td>C</td><td>last_name</td><td><span class="text-danger">Yes</span></td></tr>
                            <tr><td>D</td><td>email</td><td><span class="text-danger">Yes</span></td></tr>
                            <tr><td>E</td><td>phone</td><td><span class="text-danger">Yes</span></td></tr>
                        </tbody>
                    </table>
                </div>
                <p class="text-muted mt-2 mb-0">
                    <i class="bx bx-info-circle text-info"></i>
                    Each imported user will receive an invitation email to set their own password.
                    Rows with duplicate emails or missing required fields will be skipped.
                </p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
@endpush