@extends('voyager::master')

@section('page_title', 'Import Users')

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-upload"></i>
        Import Users
    </h1>
@stop

@section('content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">Upload CSV File</h3>
                    </div>
                    <div class="panel-body">
                        @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if(session('duplicates'))
                            <div class="alert alert-warning">
                                <strong>Duplicate Entries Skipped:</strong>
                                <ul>
                                    @foreach(session('duplicates') as $duplicate)
                                        <li>{{ $duplicate }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('users.import') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="file">Select CSV File</label>
                                <input type="file" name="file" class="form-control" required>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="voyager-upload"></i> Import
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="panel panel-bordered panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">Instructions</h3>
                    </div>
                    <div class="panel-body">
                        <p>Please upload a CSV file in the following format:</p>
                        <p><strong>CSV Format:</strong></p>
                        <ul>
                            <li><code>role_id, name, firstname, surname, email, country_code, phone, password, nif_cnpj, paypal_email, iban, company_name, address, postal_code, city</code></li>
                            <li>The first row should contain column headers.</li>
                            <li>Passwords will be encrypted automatically.</li>
                            <li>Role IDs should match the existing roles in the database:</li>
                            <ul>
                                <li>1 - Administrator</li>
                                <li>2 - Normal User</li>
                                <li>3 - Staff</li>
                            </ul>
                        </ul>
                        <a href="{{ asset('sample_users.csv') }}" class="btn btn-info btn-sm">
                            <i class="voyager-download"></i> Download Sample CSV
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            $('.toggleswitch').bootstrapToggle();
        });
    </script>
@stop