@extends('layouts.metronic', ['title' => 'TRADUCERI'])

@section('content')

<div id="kt_content_container" class="container-xxl">
    <!--begin::Card-->
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-toolbar">
                <form action="{{ route('translations.uploadFile') }}"  enctype="multipart/form-data" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">  
                    <div class="row"> 
                        <div class="col-md-6">
                            <input id="uploaded_file" name="uploaded_file" type="file" class="form-control form-control-solid mb-3 mb-lg-0" required>
                        </div>

                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_upload">
                                Urcă fișierul
                            </button>
                        </div>
                        <div class="col-md-3">                                
                            <a href="assets\media\translations.xlsx" style="display: table-cell;vertical-align: bottom;padding: 10px;">
                                Descarcă exemplu
                            </a>
                        </div>
                    </div> 
                </form>                                 
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <!--begin::Table-->
            <div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                <div class="card h-md-100">
                    <!--begin::Header-->
                    <div class="card-header align-items-center border-0">
                        <!--begin::Title-->
                        
                        <!--end::Title-->
                        
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body pt-2">
                        <!--begin::Nav-->
                        <ul class="nav nav-pills nav-pills-custom mb-3">
                            @foreach($languages as $language)
                            <li class="nav-item mb-3 me-3 me-lg-6">
                                <a class="nav-link d-flex justify-content-between flex-column flex-center overflow-hidden w-80px h-85px py-4 {{($language['code'] == 'en')?'active':''}}" data-bs-toggle="pill" href="#language_{{$language['code']}}">
                                    <div class="nav-icon">
                                        <img src="assets/media/flags/{{$language['code']}}.svg" style="border-radius: 4px" alt="">
                                    </div>
                                    <span class="nav-text text-gray-700 fw-bolder fs-6 lh-1">{{$language['name']}}</span>
                                    <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-primary"></span>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                        <!--end::Nav-->
                        <!--begin::Tab Content-->
                        @if ($translations != null)
                        <div class="tab-content">
                            @foreach($languages as $language)
                            
                            <div class="tab-pane fade {{($language['code'] == 'en')?'active show':''}}" id="language_{{$language['code']}}">
                                <!--begin::Table container-->
                                @if ($translations[$language['code']] != null)
                                @foreach($translations[$language['code']] as $page_title => $translation)
                                <div class="card card-flush h-xl-100">
                                    <div class="card-header pt-7 mb-3">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bolder text-gray-800">{{$page_title}}</span>
                                        </h3>
                                    </div>
                                    <div class="card-body pt-4">
                                        <div class="table-responsive">
                                            <table class="table table-row-dashed align-middle gs-0 gy-4 my-0">
                                                <tbody>
                                                    
                                                    
                                                    @foreach($translation as $key => $value)
                                                    <tr>
                                                        
                                                        <td>
                                                            <span class="text-gray-800 fw-bolder d-block fs-6 ps-0">{{$key}}</span>
                                                        </td>
                                                        <td class="text-end pe-0">
                                                            <span class="text-gray-800 fw-bolder d-block fs-6">{{$value}}</span>
                                                        </td>
                                                        
                                                    </tr>

                                                    @endforeach
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                @endif
                            </div>
                            
                            @endforeach                            
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection





@section('menuVariables')
<script>
    var menuItemName = "menuTranslations";
</script>
@endsection