@extends('admin.layout.master')

@section('content')

<style>
      /* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 10px;
}

#message p {
    padding: 0px 10px;
    font-size: 14px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}
</style>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Import Export</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Import Export</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if(Session::has('alert-' . $msg))

            <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </p>
            @endif
        @endforeach

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <p id="importSuccess" style="display: none;  padding: 20px; background-color: #28a745; color: white;">Import Successfully</p>
        <p id="importFail" style="display: none;  padding: 20px; background-color: #dd3545; color: white;"></p>


        <p id="exportSuccess" style="display: none;  padding: 20px; background-color: #28a745; color: white;">has completed, Please see downloads</p>
        <p id="exportFail" style="display: none;  padding: 20px; background-color: #dd3545; color: white;">Your query resulted in no records</p>

        <div class="row">
            <div class="col-12 col-sm-8">
                <div class="card card-primary card-tabs">
                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link {{ (empty(Session::get('tabId')) || Session::get('tabId') == 'import') ? 'active' : '' }}" id="custom-tabs-one-home-tab" data-toggle="pill"
                                    href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home"
                                    aria-selected="true">Import</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ Session::get('tabId') == 'export' ? 'active' : '' }}" id="custom-tabs-one-profile-tab" data-toggle="pill"
                                    href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile"
                                    aria-selected="false">Export</a>

                            </li>

                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade {{ (empty(Session::get('tabId')) || Session::get('tabId') == 'import') ? 'active show' : '' }}" id="custom-tabs-one-home" role="tabpanel"
                                aria-labelledby="custom-tabs-one-home-tab">
                                <form id="customerImportdForm" action="#" method="post" enctype="multipart/form-data">
                                    @csrf

                                     <div class="card-body">
                                         {{-- <div class="form-group">
                                             <div class="mb-3">
                                             <label for="import-export" class="col-form-label">Import Export</label>
                                             <textarea class="form-control" rows="7" id="import-export" name="import_export">{{ !empty(request()->import_export) ? request()->import_export : "" }}</textarea>
                                             </div>
                                         </div> --}}
                                         <div class="row">
                                             <div class="col-6">
                                                 <div class="form-group">
                                                     <label for="Queries">Import to</label>
                                                     <select name="table" id="import_table" data-palcehoder="Select Saved Queries"  class="form-control" required>
                                                        <option value="" selected disabled>Select Import Table</option>
                                                        @foreach ($dbData as $dbName => $tables)
                                                            <optgroup label="{{ $dbName }}">
                                                                @foreach ($tables as $table => $columns)
                                                                    <option value="{{ $table }}">{{ $table }}</option>
                                                                @endforeach
                                                            </optgroup>
                                                        @endforeach

                                                     </select>
                                                     <input type="hidden" name="db" id="import_database" value="">
                                                 </div>
                                             </div>
                                             <div class="col-6" id="showPrograssImport" style="display: none; color:red;">
                                                <div class="form-group">
                                                    <label for="showPrograssImport"></label>
                                                    <h4>Import File Processing....</h4>
                                                </div>
                                             </div>
                                         </div>

                                         <div class="row">
                                             <div class="col-6">
                                                 <div class="form-group">
                                                     <label>File Name</label>
                                                     <div class="custom-file">
                                                        <input type="file" name="filename" class="custom-file-input" id="fileName1" required>
                                                        <label class="custom-file-label" for="fileName1">Choose file</label>
                                                        </div>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="row">
                                            <div class="col-8">
                                                <div class="form-group">
                                                    <label>Overwrite Existing Data?</label>
                                                    <div class="custom-control custom-radio mt-2">
                                                       <input class="custom-control-input" type="radio" id="doChangeAlreadyInDB" name="action" value="insert" checked="">
                                                       <label for="doChangeAlreadyInDB" class="custom-control-label">Upload new data, but do not change any records already in my database.</label>
                                                    </div>
                                                    <div class="custom-control custom-radio mt-2">
                                                        <input class="custom-control-input" type="radio" id="doReplaceAlreadyInDB" name="action" value="update">
                                                        <label for="doReplaceAlreadyInDB" class="custom-control-label">Upload new data and replace any existing data already in my database.</label>
                                                     </div>
                                                </div>
                                            </div>
                                        </div>


                                     </div>
                                     <!-- /.card-body -->

                                     <div class="text-right">

                                         <button type="submit" id="importBtn" class="btn btn-primary">Import</button>


                                     </div>
                                 </form>
                            </div>
                            <div class="tab-pane fade {{ Session::get('tabId') == 'export' ? 'active show' : '' }}" id="custom-tabs-one-profile" role="tabpanel"
                                aria-labelledby="custom-tabs-one-profile-tab">
                                <form id="customerAddForm" action="#">

                                     <div class="card-body">
                                         {{-- <div class="form-group">
                                             <div class="mb-3">
                                             <label for="import-export" class="col-form-label">Import Export</label>
                                             <textarea class="form-control" rows="7" id="import-export" name="import_export">{{ !empty(request()->import_export) ? request()->import_export : "" }}</textarea>
                                             </div>
                                         </div> --}}
                                         <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label for="querybank_category">Querybank Category</label>
                                                   <select name="querybank_category" class="form-control querybank_category" id="querybank_category">
                                                        <option value="">Select Category</option>
                                                        @foreach ($querybank_category as $qc)
                                                            <option value="{{ $qc->id }}">{{ $qc->name }}</option>
                                                        @endforeach
                                                   </select>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <a href="{{ route('admin.importexport-add-new') }}">Add New Query</a> | &nbsp; <a href="{{ route('admin.importexport') }}">List All Queries</a> | &nbsp; <a href="{{ route('admin.category') }}">List All Category</a> | &nbsp; <a href="{{ route('admin.export-histories') }}">Export Histories</a>
                                            </div>

                                         </div>
                                         <div class="row">

                                             <div class="col-6">
                                                 <div class="form-group">
                                                     <label for="Queries">Saved Queries</label>
                                                     <select name="import_table" id="queries" data-palcehoder="Select Saved Queries"  class="form-control queries" required disabled>
                                                         <option value="" disabled  selected>Select Saved Queries</option>
                                                         @foreach ($querybank as $c)
                                                             <option data-id="{{ $c->qb_id }}"  value="{{ $c->qb_id }}" >{{ $c->qb_title }}</option>
                                                         @endforeach
                                                     </select>
                                                 </div>
                                             </div>
                                             <div class="col-md-6" id="showPrograss" style="display: none; color:red;">
                                                <div class="form-group">
                                                    <label for="showPrograss"></label>
                                                    <h4>Your Query is now running....</h4>
                                                </div>
                                             </div>

                                         </div>

                                         <div class="row">
                                             <div class="col-6">
                                                 <div class="form-group">
                                                     <label for="Queries">File Format</label>
                                                     <select name="file_format" id="file_format" data-palcehoder="Select File Format"  class="form-control file_format" disabled>
                                                         <option value="1" selected>CSV - Comma Delimited Text File</option>
                                                         <option value="2" >CSV - PIPE Delimited Text File</option>
                                                         <option value="3" >CSV - TAB Delimited Text File</option>
                                                     </select>
                                                 </div>
                                             </div>
                                         </div>


                                     </div>
                                     <!-- /.card-body -->

                                     <div class="text-right">
                                         <a href="{{ route('admin.importexport-add') }}" class="btn btn-primary" id="clearBtn">Clear</a>
                                         <button type="submit" class="btn btn-primary" id="exportBtn">Export</button>
                                         {{-- <a href="{{ route('admin.user') }}" class="btn btn-info">Back</a> --}}

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

                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div><!-- /.container-fluid -->
</section>
<script>

    $(document).ready(function (e) {
        $("#customerImportdForm").on('submit', (function (e) {
            e.preventDefault();

            $('#showPrograssImport').show();

            $("#importBtn").prop('disabled', true);

            $('#importBtn').text('Processing...');
            $.ajax({
                url: "{{ route('admin.importexport-import-process') }}",
                type: "POST",
                data: new FormData(this),
                dataType: 'json',
                contentType: false,
                cache: false,
                processData: false,

                success: function (data) {
                    if(data.status == false){
                        $('#importFail').show();
                        $('#importFail').text(data.message);
                        $("#importBtn").text('Import');
                        setTimeout(function() {
                            $("#importFail").hide();
                        }, 5000);

                        $("#showPrograssImport").hide();
                        $("#importBtn").prop('disabled', false);
                    }else{
                        $('#importSuccess').show();
                        $('#importBtn').text('Import');
                        setTimeout(function() {
                            $("#importSuccess").hide();
                        }, 5000);

                        $("#showPrograssImport").hide();
                        $("#importBtn").prop('disabled', false);
                        $("#customerImportdForm")[0].reset()

                    }

                },
                error: function (e) {

                }
            });
        }));
    });
    $("#import_table").change(function(){
        var label=$('#import_table :selected').parent().attr('label');
        $('#import_database').val(label);
      });
    $('#customerAddForm').on('submit',function(e){

        $('#showPrograss').show();

        $("#exportBtn").prop('disabled', true);
        $('#clearBtn').hide();

        $('#exportBtn').text('Running...');


        e.preventDefault();
       var querybank_category = $('.querybank_category').val();
       var queries = $('.queries').val();
       var file_format = $('.file_format').val();
       $.ajax({
           type: "POST",
           url: "{{ route('admin.importexport-save') }}",
           data: {"_token": "{{ csrf_token() }}",querybank_category:querybank_category,queries:queries,file_format:file_format},

           success: function( result, status, xhr ) {
                var disposition = xhr.getResponseHeader('content-disposition');
                var matches = /"([^"]*)"/.exec(disposition);
                var filename = (matches != null && matches[1] ? matches[1] : 'empty.xlsx');


                if(filename != 'empty.xlsx'){
                     // The actual download
                     var blob = new Blob([result], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    });
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = filename;

                    document.body.appendChild(link);

                    link.click();
                    document.body.removeChild(link);

                    $('#exportSuccess').show();
                    $('#exportBtn').text('Export');
                    setTimeout(function() {
                        $("#exportSuccess").hide();
                    }, 5000);

                    $("#showPrograss").hide();
                    $('#clearBtn').show();
                    $("#exportBtn").prop('disabled', false);
                }else{

                    $('#exportFail').show();
                    $('#exportBtn').text('Export');
                    setTimeout(function() {
                        $("#exportFail").hide();
                    }, 5000);

                    $("#showPrograss").hide();
                    $('#clearBtn').show();
                    $("#exportBtn").prop('disabled', false);
                }

           }
       });
   });
</script>

<script>

    $(document).ready(function(){

        $('#queries').select2({
            theme: 'bootstrap4'
        });
        $('#querybank_category').select2({
            theme: 'bootstrap4'
        });

   // $(".alert").delay(5000).slideUp(300);
    });


$('#querybank_category').change(function(){
    var category = $(this).val();
    $('#queries').prop('disabled', true);
    $('#file_format').prop('disabled', true);
    $('#queries').html('<option value="" disabled  selected>Select Saved Queries</option>');
    $.ajax({
        type: 'POST',
        url: "{{ route('admin.importexport-category-wise-query') }}",
        data: {"_token": "{{ csrf_token() }}",category:category},
        dataType: "json",
        success: function(resultData) {
            $('#queries').prop('disabled', false);
            $('#file_format').prop('disabled', false);
            $.each(resultData, function(key, value) {
                $('#queries')
                    .append($("<option></option>")
                               .attr("value", value.qb_id)
                               .text(value.qb_title));
           });
           $('#queries').select2({
            theme: 'bootstrap4'
        });
        }
   });
});

</script>
@endsection