@extends('layouts.main')

@section('side_bar')
    @include('layouts.side_bar')
@endsection

@section('profile')
    @include('layouts.profile')
@endsection

@section('page_title')
    <div class="mb-4">
        <h1 class="mb-2">Bulk User Upload</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Bulk User Upload</li>
            </ol>
        </nav>
    </div>
@endsection

@section('main_div')
    <div class="container-fluid px-0">
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 py-3">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="mb-0">Upload Employees</h5>
                            </div>
                            <div class="col text-end">
                                <a href="{{ route('admin.users.bulk-upload.template') }}" class="btn btn-outline-primary btn-sm">
                                    <i class="ph ph-download me-1"></i> Download Template
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        @if(session('errors') && count(session('errors')) > 0)
                            <div class="alert alert-warning">
                                <p><strong>The following errors occurred during import:</strong></p>
                                <ul class="mb-0">
                                    @foreach(session('errors') as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('admin.users.bulk-upload.process') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-4">
                                <label for="csv_file" class="form-label">Upload CSV File</label>
                                <div class="input-group">
                                    <input type="file" class="form-control @error('csv_file') is-invalid @enderror" id="csv_file" name="csv_file" accept=".csv">
                                    <button class="btn btn-primary" type="submit">Upload</button>
                                </div>
                                @error('csv_file')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text mt-2">
                                    Please upload a CSV file containing employee information. Download the template to see the required format.
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">Format Instructions</h6>
                                </div>
                                <div class="card-body">
                                    <p>The CSV file should contain the following columns:</p>
                                    <ul>
                                        <li><strong>name</strong> - Full name of the employee</li>
                                        <li><strong>email</strong> - Email address (must be unique)</li>
                                        <li><strong>department</strong> - Department the employee belongs to</li>
                                        <li><strong>employee_id</strong> - Employee ID number (must be unique)</li>
                                        <li><strong>credit_limit</strong> - The credit limit allocated to this employee</li>
                                        <li><strong>role</strong> - (Optional) Role of the employee (admin, employee, manager)</li>
                                        <li><strong>phone</strong> - (Optional) Contact phone number</li>
                                        <li><strong>position</strong> - (Optional) Job position</li>
                                    </ul>
                                    <p class="mb-0 text-muted">The system will automatically create accounts for each employee and send invitation emails with temporary passwords.</p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection