@extends('adminlte::page')

{{-- @section('content_header')
    <h1>@lang('global.Import') @lang('global.Uos')</h1>
@endsection --}}

@section('content')

    <div class="row">
        <div class="col-md-6">
            <header class="my-2 bg-primary shadow rounded">
                <h4 class="text-white">@lang('global.Import') @lang('global.Countries')/@lang('global.Cities')</h4>
            </header>
            <x-card class="card-outline-tabs">

                <x-slot name="header" class="p-0 border-bottom-0">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a href="#countries" data-toggle="pill" role="tab" class="nav-link active">@lang('global.Import Countries')</a>
                        </li>

                        <li class="nav-item">
                            <a href="#cities" data-toggle="pill" role="tab" class="nav-link">@lang('global.Import Cities')</a>
                        </li>
                    </ul>
                </x-slot>

                <div class="tab-content" id="import-tabs">
                    <div class="tab-pane fade active show" id="countries">
                        {{-- <x-slot name='title'>@lang('global.Import') @lang('global.Uos')</x-slot> --}}
                        <form action="{{ route('countries.process-import') }}" method="post" enctype="multipart/form-data">
                            @csrf
        
                            <div class="card card-outline">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="file">@lang('global.File')</label>
                                        <input type="file" name="file" id="file" class="form-control @error('file') is-invalid @enderror" accept=".csv">
                                        @error('file')
                                            <span class="invalid-feedback">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>
        
                                <div class="card-footer text-center">
                                    <button name="import_contries" type="submit" class="btn btn-primary btn-sm">@lang('global.Import')</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade" id="cities">
                        {{-- <x-slot name='title'>@lang('global.Import') @lang('global.Uos')</x-slot> --}}
                        <form action="{{ route('countries.cities.process-import') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="card card-outline">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="file">@lang('global.File')</label>
                                        <input type="file" name="file" id="file" class="form-control @error('file') is-invalid @enderror" accept=".csv">
                                        @error('file')
                                            <span class="invalid-feedback">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>
        
                                <div class="card-footer text-center">
                                    <button name="import_cities" type="submit" class="btn btn-primary btn-sm">@lang('global.Import')</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </x-card>
        </div>
    </div>

@endsection