@extends('layouts.app')
@section('content')
<div class="ngramTool-container">

    <div class="row">
        <div class="col-lg-10 col-md-9 col-sm-6">
            Ngram Tool
        </div>
        <div class="col-lg-2 col-md-3 col-sm-6">
            <!-- <div class="row"> -->
            <!-- <div class="col-lg-4 col-sm-4 col-md-4 account pull-right"> -->
            <!-- <button class="btn btn-outline-secondary activity-btn pull-right" id="ngramv21">Previous nGram Jobs</button> -->
            <button class="btn btn-outline-secondary activity-btn pull-right" style="margin-bottom:10px;float:right;" id="ngramv2">NGram Tool V2</button>
            <!-- <a href="./listNgramsProcesses.php"><button class="btn btn-default activity-btn pull-right" id="ngramlist" style="margin-right: 5px;">Previous nGram Jobs</button></a> -->
            <!-- </div> -->
            <!-- </div> -->
        </div>
    </div>
    <!-- <input id="impbigquery_csrf_token" type="hidden" value="{{ csrf_token() }}"> -->
    <!-- <div class="row">
        <h5 class="account col-lg-4 col-sm-4 col-md-4">Ngram Tool</h5>
        <div class="col-lg-4 col-sm-4 col-md-4 account">
            <button class="btn btn-default activity-btn pull-right" id="ngramv2">nGram Tool V2</button>
            
            <a href="./listNgramsProcesses.php"><button class="btn btn-default activity-btn pull-right" id="ngramlist" style="margin-right: 5px;">Previous nGram Jobs</button></a>
        </div>
    </div> -->
    <div class="container bg-white border border-3 border-dark px-4 py-2" id="loadSettings">

        <!-- loading div start-->
        <div class="row border border-1 border-dark my-2 p-3">
            <div class="row">
                <div class="col-lg-1  col-md-1 col-lg-1"><b>Sl No</b></div>
                <div class="col-sm-2 col-md-2 col-lg-2"><b>Started At</b></div>
                <div class="col-sm-2 col-md-2 col-lg-2"><b>Finished At</b></div>
                <div class="col-sm-2 col-md-2 col-lg-2"><b>Input File Name</b></div>
                <div class="col-sm-3 col-md-3 col-lg-3"><b>Output File Name</b></div>
                <div class="col-sm-2 col-md-2 col-lg-1"><b>Status</b></div>
            </div>
        </div>

        <div class='load-more-container_firstdata'>
        @if($ngramSettingsData)
        @foreach($ngramSettingsData as $key=>$setting)
                <div class="row border border-1 border-dark my-2 p-3">
            <div class="row">

                                <div class="col-lg-1  col-md-1 col-lg-1 text-uppercase"><b>{{$slNo}}</b></div>
                <div class="col-sm-2 col-md-2 col-lg-2"><b>{{$setting->uploadStarted}}</b></div>
                <div class="col-sm-2 col-md-2 col-lg-2"><b>{{$setting->uploadFinished}}</b></div>
                <div class="col-sm-2 col-md-2 col-lg-2" style="word-wrap: break-word;">
                    <b> @if($setting->upload_name)
                        <a href="{{ route('ngramTool.inputFile', $setting->upload_name) }}" download>{{$stripInputFilename}}</a>
                    @endif
                </b>
                </div>
                <div class="col-sm-2 col-md-2 col-lg-3" style="word-wrap: break-word;">
                <b>
                        @if($setting->output_file_name)

                        <a  class="text-wrap" href="{{ route('ngramTool.outputFile', $setting->output_file_name) }}" download>{{$stripOutputFilename}}</a>

                        @endif
                   
                
                </b>
                </div>
    
                <div class="col-sm-2 col-md-2 col-lg-2">
                    <span class='badge rounded-pill bg-danger badgecl'>Process Not Started</span>                </div>
            </div>
        </div>
                @endforeach
        @endif
    </div>      

        <div id="load-more-container">
    
            <!-- Items will be dynamically appended here -->
        </div>
        <div class="row border border-1 border-dark my-2 p-3">
            <div class="col-sm-5 col-md-4 col-lg-5">
            </div>
            <div class="col-sm-4 col-md-4 col-lg-2 d-flex align-items-center text-center">
                <button type="button"  class="btn btn-sm btn-outline-secondary load_more" data-id="0" data-operation="save" data-username="" data-useremail="">Load More

                    <span style="width: 1rem; height: 1rem;" class="loadmoreLoader" role="status" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </button>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-5">
            </div>
        </div>

        <!-- loading div end-->
    </div>
</div>

@include('ngramTool.modals.modal_ngramTool')
@include('ngramTool.js.js_modal_ngramTool')
@endsection