@extends('admin::layouts.master')

@section('content')

<div class="card">

    {{-- Header --}}
    <div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
        <h4 class="card-title mb-0">Import Translations</h4>

        <a href="{{ route('admin.webTranslation.exportTemplate') }}"
            class="btn btn-success btn-sm w-100 w-md-auto text-center">
            <i class="fas fa-download"></i> Download Sample Template
        </a>
    </div>

    <div class="card-body">

        {{-- Instructions --}}
        <div class="alert alert-info border-left-blue">
            <h5 class="mb-2">
                <i class="fas fa-info-circle"></i> Instructions
            </h5>
            <ul class="mb-0 ps-3">
                <li><strong>Column A (Page):</strong> The page or group where the label belongs (e.g., "Home", "Profile").</li>
                <li><strong>Column B (Label name):</strong> The unique key for the translation (e.g., "Welcome Text").</li>
                <li><strong>Subsequent Columns:</strong> Each column header should be a language code (e.g., "EN", "AR").</li>
                <li>Fill the translation values in the respective language columns.</li>
            </ul>
        </div>

        {{-- Success Message --}}
        @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
        @endif

        {{-- Error Message --}}
        @if(session('danger'))
        <div class="alert alert-danger">
            {{ session('danger') }}
        </div>
        @endif

        {{-- Import Errors --}}
        @if(session('import_errors'))
        <div class="alert alert-danger">
            <h5 class="alert-heading">The following rows failed to import:</h5>
            <ul class="mb-0 ps-3">
                @foreach(session('import_errors') as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        {{-- Import Form --}}
        <form action="{{ route('admin.webTranslation.import') }}"
            method="POST"
            enctype="multipart/form-data">
            @csrf

            <div class="row g-3 align-items-end">

                {{-- File Input --}}
                <div class="col-12 col-md-6">
                    <label class="form-label">Select Excel File</label>
                    <input type="file"
                        name="file"
                        class="form-control"
                        accept=".xlsx,.xls"
                        required>
                </div>

                {{-- Button --}}
                <div class="col-12 col-md-6">
                    <button class="btn btn-primary w-100 w-md-auto my-2 my-md-0">
                        <i class="fas fa-upload"></i> Import Excel
                    </button>
                </div>

            </div>
        </form>

    </div>
</div>

@endsection

@section('script')
@include('translation::webTranslation.scripts.index_scripts')
@endsection