@extends('Frontend.partials.layout')

@section('styles')
    <!-- <link rel="stylesheet" href="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.css') }}"> -->
    <link rel="stylesheet" href="{{ asset('/vendor/libs/select2/select2.css') }}">
@endsection

@section('content')

<section class="analysis-ExportImport-section">
    <div class="container-fluide">
        <div class="row">
            <div class="col-md-6">
                <div class="analysis-content-header d-flex align-items-center">
                    <div class="logo">
                        <i class="fas fa-home primary-color"></i>
                    </div>
                    <div class="heading primary-color">
                        <h2>{{__('action.analysis_export_import')}}</h2>
                        <p>{{ brandName() }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">

            <div class="col-md-12">
                <div class="card mt-4">
                    <!-- card header -->
                    <div class="card-header">
                        <h4>{{__('action.analysis_export_import')}}</h4>
                    </div>
                    <!-- card section -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <!-- basic information -->
                                <div class="box mb-4 slBox activebox" >
                                    <div class="box-header">
                                        <h2>{{__('action.import_analysis')}}</h2>
                                    </div>
                                    <div class="box-body">
                                    <form  action="{{ route('ownAnalysis.import') }}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="form-group col-md-12" style="margin-bottom: 2rem">
                                                <div class="sameFile_downloadBtn">
                                                    <span class="d-inline-block info mr-2" id="fileDownload_btn"  data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content=""><i class="fas fa-info-circle"></i></span>
                                                    <a href="{{ asset('demofile') }}/analysis-import-demo-own.xlsx"><button type="button" class="btn btn-sm btn-outline-secondary "><i class="fa fa-download" aria-hidden="true"></i> {{ __('action.download_sample') }}</button></a>
                                                </div>
                                                <script>
                                                    $(function ($) {
                                                        $('#fileDownload_btn').popover({
                                                            html:true,
                                                            content: function(){
                                                                return $('#popover-content-file').html();
                                                            }
                                                        });
                                                    });
                                                </script>
                                                <div id="popover-content-file" style="display:none;">
                                                  <ul>
                                                    <li class="mb-2">{{ __('action.ei_note1') }}</li>
                                                    <li class="mb-2">{{ __('action.ei_note2') }}</li>
                                                  </ul>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6" style="width:100%" id="selectfield">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0" >{{ __('action.select_submenu') }}</label>
                                                <select class="selectpicker col-md-12" id="submenuid" name="submenuid" style="opacity: 0;" data-style="btn-default" name="submenuid" data-live-search="true" tabindex="null" required>
                                                    <option value="">{{ __('action.select_submenu') }}</option>
                                                    @if(!empty($subMenus))
                                                    @foreach ($subMenus as $subMenu)
                                                        <option value="{{$subMenu->id}}">{{$subMenu->name}}</option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0">{{__('action.upload_file')}}</label>
                                                <input type="file" name="importfile" accept=".xlsx, .xls, .csv" required>
                                                <small class="form-text text-muted">{{__('action.up_csv_excel')}}</small>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <button type="submit" class="btn btn-default activeSubmit_btn"><i class="fas fa-file-import">&nbsp;</i>{{__('action.import')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <!-- basic information -->
                                <div class="box mb-4 slBox" >
                                    <div class="box-header">
                                        <h2>{{__('action.export_analysis')}}</h2>
                                    </div>
                                    <div class="box-body">
                                    <form  action="{{ route('ownAnalysis.export') }}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">

                                            <div class="form-group col-md-6" style="width:100%" id="selectfield">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0">{{ __('action.select_submenu') }}</label>
                                                <select class="selectpicker col-md-12" id="submenuid2" data-style="btn-default" name="submenuid" data-live-search="true" tabindex="null" style="opacity: 0;" required>
                                                    <option value="">{{ __('action.select_submenu') }}</option>
                                                    @if(!empty($subMenus))
                                                    @foreach ($subMenus as $subMenu)
                                                        <option value="{{$subMenu->id}}">{{$subMenu->name}}</option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6" style="width:100%" id="selectfield">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0">{{__('action.select_format')}}</label>
                                                <select class="custom-select col-md-12" id="filetype" data-style="btn-default" name="filetype" required>
                                                    <option value="">{{__('action.select_format')}}</option>
                                                    <option value="xlsx"><i class="fas fa-file-excel">&nbsp;</i>Excel</option>
                                                    <option value="csv"><i class="fas fa-file-csv">&nbsp;</i>CSV</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <!-- <label class="form-label l-100 mb-4 col-md-12 pl-0"></label> -->
                                                <button type="submit" class="btn btn-default activeSubmit_btn"><i class="fas fa-file-export">&nbsp;</i>{{__('action.export')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- card section /-->
                </div>
            </div>
        </div>
    </div>
</section>

@endsection


@section('scripts')

    <!-- Dependencies -->
    <script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>

    <script>
    $( document ).ready(function() {
        $(".selectpicker").select2();

        $('.slBox input , .slBox select').focus(function(){
            $('.slBox').removeClass('activebox');
            $(this).closest('.slBox').addClass('activebox');
        });
        $('.slBox span.select2-selection.select2-selection--single').on('click', function(){
            $('.slBox').removeClass('activebox');
            $(this).closest('.slBox').addClass('activebox');
        });
    });

    $(function () {
        $('[data-toggle="popover"]').popover()
    });

    $('body').on('click', function (e) {
        $('[data-toggle=popover]').each(function () {

            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });

    </script>

@endsection