@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">{{ translate('Import App Translations') }}</h4>

        <a href="{{ route('admin.translation.export') }}"
            class="btn btn-success btn-sm w-100 w-md-auto text-center">
            <i class="fas fa-download"></i> {{ translate('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> {{ translate('Instructions') }}
            </h5>
            <ul class="mb-0 ps-3">
                <li><strong>{{ translate('Column A (Page)') }} ({{ translate('Required') }}):</strong> {{ translate('The page or group where the label belongs (e.g., "Home", "Profile").') }}</li>
                <li><strong>{{ translate('Column B (Type)') }} ({{ translate('Required') }}):</strong> {{ translate('The type of translation. Allowed: TEXT, BUTTON, FILTER, DROP DOWN, MESSAGE, RADIO BUTTON, CHECK BOX, TEXT BOX.') }}</li>
                <li><strong>{{ translate('Column C (Label name)') }}:</strong> {{ translate('The unique key for the translation (e.g., "Welcome Text").') }}</li>
                <li><strong>{{ translate('Subsequent Columns') }}:</strong> {{ translate('Each column header should be a language code (e.g., "EN", "AR").') }}</li>
                <li>{{ translate('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">{{ translate('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.translation.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">{{ translate('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> {{ translate('Import Excel') }}
                    </button>
                </div>

            </div>
        </form>

    </div>
</div>

@endsection

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