@extends('ctrl.app')

@section('content')

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-header">
                        <div class="row justify-content-between">
                            <div class="mt-2 ml-3">General Import</div>

                            <div>
                                <a class="btn btn-primary mr-3" href="{{route('dashboard')}}">Back</a>
                            </div>
                        </div>
                    </div>


                    <div class="card-body">
                        @include('ctrl.common.i_error_notification')
                        <br>
                        <form action="{{ route('ctrl.import', ['import'=>$import]) }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row">
                                <div class="col-md-6 custom-file ml-3">
                                    <input type="file" class="custom-file-input" id="customFile" name="uploadedFile">
                                    <label class="custom-file-label" for="customFile"></label>
                                </div>

                                <div class="col-md-5">
                                    <button type="submit" class="btn btn-success">Upload</button>
                                </div>
                            </div>

                        </form>
                        <br>
                        <div class="table-responsive-md">
                            @if(session('failures'))
                                <table class="table table-striped">
                                @foreach(session('failures') as $failure )
                                    @foreach($failure as $category => $errors)
                                            <tr>
                                                <th scope="col" class="text-center">#</th>
                                                <th scope="col" class="text-center">{{$category}}</th>
                                                <th scope="col" class="text-center">Detected in Rows</th>
                                            </tr>
                                            @foreach($errors as $error => $rows)
                                                <tr>
                                                    <td scope="row"
                                                        class="text-center align-middle">{{$loop->iteration}}</td>
                                                    <td class="text-center align-middle">{{$error}}</td>
                                                    <td class="text-center align-middle">{{join(", ",$rows)}}</td>
                                                </tr>
                                            @endforeach


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

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

@endsection

@section('footer-script')
    <script>
        let fileUploader = $(".custom-file-input");
        if(fileUploader[0]['multiple']){
            fileUploader.siblings(".custom-file-label").html('Choose one file or many');
        } else {
            fileUploader.siblings(".custom-file-label").html('Choose a file');
        }
        fileUploader.on("change", function() {
            let isMultiple = $(this)[0]['multiple'];
            let element = $(this)[0]['files'];
            var fileName;

            if(element.length > 1){
                fileName =  element.length + ' files '+ 'are selected';
            } else if(element.length === 1) {
                fileName = element[0]['name'];
            } else if(isMultiple) {
                fileName = 'Choose one file or many';
            } else {
                fileName = 'Choose a file';
            }
            $(this).siblings(".custom-file-label").html(fileName);
        });
    </script>
@endsection