@extends('crudbooster::admin_template')


@push("head")
    <link rel="stylesheet" href="{{ asset('/css/application.css') }}">
    <link rel="stylesheet" href="{{ asset('css/select2.css') }}">
    <!-- Dependencies -->
    <style>
    .select2-container {
        width: 100% !important;
    }  
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #000;
        border: none;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #fff;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 2px 5px 5px;
        width: 100%;
    }

    .select2-container .select2-selection--single {
        height: 36px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 26px;
        position: absolute;
        top: 7px !important;
        right: 4px !important;
        width: 20px;
    }
    .pl-0{
        padding-left: 0px;
    }
    .pr-0{
        padding-right: 0px;
    }
    .mb-2{
        margin-bottom: 6px !important;
    }
        .panel-heading{
            padding: 8px 15px;
        }
        .sameFile_downloadBtn {
            position: absolute;
            content: '';
            right: 16px;
            border-color: #8897AA;
            background: transparent;
            color: #8897AA;
        }
        .sameFile_downloadBtn:hover {
            border-color: transparent;
            background: #8897AA;
            color: #fff;
            transition: .5s;
        }
    </style>
@endpush

@section('content')
<section class="analysis-ExportImport-section">
    <div class="container-fluide">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="box box-orange mt-4">
                    <!-- card header -->
                    <div class="box-header">
                        <h3 class="box-title">{{__('action.trans_expo_impo')}}</h3>
                    </div>
                    <!-- card section -->
                    <div class="box-body" style="padding-top:20px;">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <!-- basic information -->
                                <div class="box mb-4 slBox activebox" style="border-top: 3px solid #2fab66;">
                                    <div class="box-header" style="border-radius: 0 !IMPORTANT;">
                                        <h2 class="box-title">{{__('action.trans_impo')}}</h2>
                                    </div>
                                    <div class="box-body">
                                        <form action="{{CRUDBooster::mainpath('import')}}" method="post" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                
                                                {{--<div class="form-group col-md-12" style="margin-bottom: 35px">
                                                    <a href="{{ asset('demofile') }}/analysis-import-demo.xlsx">
                                                    <button type="button" class="btn btn-sm btn-outline-secondary sameFile_downloadBtn"><i class="fa fa-download" aria-hidden="true"></i> {{ __('action.download_sample') }}</button>
                                                    </a>
                                                </div>--}}                                   
                                                <div class="form-group col-md-6" id="selectfield">
                                                    <label class="form-label l-100 mb-2 col-md-12 pl-0" >Choose Group</label>
                                                    <select class="selectpicker col-md-12" id="groupids" name="groupid" style="opacity: 0;" data-style="btn-default" name="submenuid" data-live-search="true" tabindex="null" required>  
                                                        <option value="">Choose Group</option>
                                                            @if(!empty($groups))
                                                                @foreach ($groups as $group)                                                            
                                                                    <option value="{{$group->id}}">{{$group->group_name}}</option>                                                             
                                                                @endforeach
                                                            @endif
                                                    </select>
                                                </div>
                                                <div class="form-group col-md-6" id="selectfield">
                                                    <label class="form-label l-100 mb-2 col-md-12 pl-0" >Choose Language</label>
                                                    <select class="selectpicker col-md-12" id="langids" name="lang" style="opacity: 0;" data-style="btn-default" data-live-search="true" tabindex="null" required>  
                                                        <option value="">Select Language</option>
                                                            @if(!empty($languages))
                                                                @foreach ($languages as $lang)                                                            
                                                                    <option value="{{$lang->id}}">{{$lang->name}}</option>                                                             
                                                                @endforeach
                                                            @endif
                                                    </select>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <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">{{__('action.import')}}</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div> 
                                </div>
                                
                            </div>
                        
                            <div class="col-md-6 col-sm-12">
                                <!-- basic information -->
                                <div class="box mb-4 slBox" style="border-top: 3px solid #2fab66;">
                                    <div class="box-header" style="border-radius: 0 !IMPORTANT;">
                                        <h2 class="box-title">{{__('action.trans_expo')}}</h2>
                                    </div>
                                    <div class="box-body">
                                    <form action="{{CRUDBooster::mainpath('export')}}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                        
                                            <div class="form-group col-md-6" id="selectfield">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0">Choose Group</label>
                                                <select class="selectpicker col-md-12" id="groupids2" data-style="btn-default" name="groupid" data-live-search="true" tabindex="null" style="opacity: 0;" required>  
                                                    <option value="">Choose Group</option>
                                                        @if(!empty($groups))
                                                            @foreach ($groups as $group)
                                                                <option value="{{$group->id}}">{{$group->group_name}}</option>
                                                            @endforeach
                                                        @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6" id="selectfield">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0" >Choose Language</label>
                                                <select class="selectpicker col-md-12" id="langids2" name="lang" style="opacity: 0;" data-style="btn-default" data-live-search="true" tabindex="null" required>  
                                                    <option value="">Select Language</option>
                                                        @if(!empty($languages))
                                                            @foreach ($languages as $lang)                                                            
                                                                <option value="{{$lang->id}}">{{$lang->name}}</option>                                                             
                                                            @endforeach
                                                        @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-md-12" id="selectfield">
                                                <label class="form-label l-100 mb-2 col-md-12 pl-0">{{__('action.select_format')}}</label>
                                                <select class="selectpicker col-md-12" id="filetype" data-style="btn-default" name="filetype" data-live-search="true" tabindex="null" style="opacity: 0;" required>  
                                                    <option value="">{{__('action.select_format')}}</option>
                                                    <option value="xlsx">Excel</option>                                               
                                                    <option value="csv">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">{{__('action.export')}}</button>
                                            </div>
                                        </div>
                                    </div>                                  
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- card section /-->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push("bottom")
    <script src="{{ asset('js/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');
            });
        });
    </script>
@endpush