@extends('layouts.app')

@section('content')

<div class="container p-0 px-md-3">
    <div class="row justify-content-center">
        <div class="col-11 col-md-12 px-2 px-md-0">

            <div class="container pb-xl-2">
                <div class="row">
                    <div class="col-12 col-xl-6 mb-4 mb-xl-0 p-0 px-md-3">
                        <div class="card" style="height: 100%;">
                            <div class="card-header">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12 pl-0">{{ __('Aktív ekáer') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">                    
                                @if (session('status'))
                                    <div class="alert alert-success" role="alert">
                                        {{ session('status') }}
                                    </div>
                                @endif

                                @if($show_datatable)
                                <table class="table data-table display responsive tablewrapping" style="width: 100% !important">
                                    <thead>
                                        <tr>
                                            @if(!empty($action_replicate))
                                            <th></th>
                                            @endif
                                            @foreach($data as $key => $value)
                                            <th>{{__($value)}}</th>
                                            @endforeach
                                            @if(!empty($action))
                                            <th></th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @else
                                <div class="d-flex justify-content-center" style="height: 100%">
                                    <a class="btn-orange align-self-center" href="{{route('tcn.create')}}"><i class="fa-solid fa-truck-front mr-2"></i>{{ __('Új Ekáer feladás') }}</a>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6 mb-4 mb-xl-0 p-0 px-md-3">
                        <div class="card" style="height: 100%">
                            <div class="card-header">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12 pl-0">{{ __('Csoportos feladás') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">    
                                <div class="container p-0">
                                    <div class="row">
                                        <div class="col-6"><a href="/excel/ekaer_minta.xlsx" style="margin-top: 6px !important;" class="float-left mb-4">Minta letöltése</a></div>
                                        <div class="col-6"><a href="/excel/ekaer_pelda_3.xlsx" style="margin-top: 6px !important;" class="float-right mb-4">Példa letöltése</a></div>
                                    </div>
                                </div>

                                <div style="position:relative;overflow:hidden;">
                                    <form id="excel_file_upload" action="{{ route('tcn.import') }}" method="post" enctype="multipart/form-data" style="height:100%">
                                        @csrf
                                        <div class="drag-area" style="height:100%">
                                            <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
                                            <header>Húzz ide egy excel fájlt</header>
                                            <span>vagy</span>
                                            <button class="btn-orange createNewBtn">Tallózás</button>
                                            <input type="file" name="file" id="file" ondrop="console.log('drop')" style="top:-80px;width: 100%;height: 125%;z-index: 1;position: absolute;cursor: pointer;"> <!--hidden-->
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container mt-xl-4">
                <div class="row">
                    <div class="col-12 col-xl-6 mb-4 mb-xl-0 p-0 px-md-3">
                        <div class="card" style="height: 100%;">
                            <div class="card-header">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12 pl-0">{{ __('Térkép') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                
                                @if(!empty($maps))
                                <select id="map_select" name="map_select" onchange="$('#map').attr('src',$(this).val())" class="form-control custom-select mb-3">
                                    <option value="https://maps.google.com/maps?q=Magyarország&t=&z=7&ie=UTF8&iwloc=&output=embed">Válassz kérlek</option>
                                    @foreach ($maps as $map)
                                    <option value="{{$map['url']}}">{{$map['tcn']}} {{--( {{$map['plate_number']}} )--}}</option>
                                    @endforeach
                                </select>
                                @endif
                                
                                <!-- ***** Google Maps Start ***** -->
								<iframe id="map" src="https://maps.google.com/maps?q=Magyarország&t=&z=7&ie=UTF8&iwloc=&output=embed" width="100%" height="@if(empty($maps)) 450 @else 400 @endif" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
								<!-- ***** Google Maps End ***** -->
 
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6 mb-4 mb-xl-0 p-0 px-md-3">
                        <div class="card" style="height: 100%;">
                            <div class="card-header">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12 pl-0">{{ __('Statisztika') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">        
                                
                                @foreach ($stats as $stat)
                                    @if($loop->index == 0)
                                    <div class="mt-1 mb-3" style="border-bottom: 1px solid #CED4DA;">
                                        <div class="pl-2 pb-2">{{$stat['label']}} {{$stat['value']}}</div>
                                    </div>
                                    @else
                                    <div class="skillbar-wrap mb-4 pb-4">
                                        <div class="clearfix">
                                            {{$stat['label']}}
                                        </div>
                                        <div class="skillbar" data-percent="{{$stat['value']}}%">
                                            <div class="skillbar-percent">{{$stat['value']}}%</div>
                                            <div class="skillbar-bar" style="width: {{$stat['value']}}%;"></div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                                <div style="font-size: 12px">{{ __('tcn.sync') }}</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>            
            
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready( function () {

        window.table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: "{{ route('tcn.active_list') }}",
            order: [[ 3, 'desc' ]],
            dom: 't',
            language: { 
                url: '/js/datatable/lang/hu.json',
                search: "", "searchPlaceholder": "Keresés", 
            },
            columns: [
                @if(!empty($action_replicate))
                {data: 'replicate', name: 'replicate', orderable: false, searchable: false},
                @endif
                @foreach($data as $key => $value)
                {data: '{{$key}}', {{$key}}: '{{$key}}'},
                @endforeach
                @if(!empty($action))
                {data: 'actions', name: 'actions', orderable: false, searchable: false},
                @endif
            ],
            columnDefs: [
                { responsivePriority: 5, targets: 0 },
                { responsivePriority: 1, targets: 1 },
                { responsivePriority: 5, targets: 2 },
                { responsivePriority: 1, targets: 3 },
                { responsivePriority: 5, targets: 4 }
            ],
            pageLength: 5,
            drawCallback : function( settings )
            {
                $('.data-table').off('click').on('click', 'button', function() { 
                    var action = $(this).data('action');
                    var status = $(this).data('status');
                    var tr     = $(this).parents('tr');
                    var row    = window.table.row( tr.hasClass('child') ? $(this).parents('tr').prev() : $(this).parents('tr') );
                    var data   = row.data();

                    @include('tables.js.actions')
                });
            },
        });

        @if($login_error)
        $(function(){
            formModal( 
                '{{ route('tcn.xml_key') }}', 
                '{{ __('tcn.xml.key') }}', 
                '{{ __('button.go') }}', 
                function () {}, 
                function () {}, 
                function () { location.reload(); } 
            );
        });
       @endif
    });
</script>
@endpush

@endsection