@extends('layouts.app')

@php

$action = Request::segments()[1];

$moduleName = __('lang.service');

$createItemName = __('lang.bulk_upload') . $moduleName;
$breadcrumbCurrentName = __('lang.bulk_upload');


$breadcrumbMainName = $moduleName;

$breadcrumbMainIcon = 'account_balance_wallet';
$breadcrumbCurrentIcon = 'add_box';

@endphp

@section('title') 
    {{ $moduleName }}->{{ $createItemName }} 
@stop 

@section('top-bar') 
    @include('includes.top-bar') 
@stop 

@section('left-sidebar') 
    @include('includes.left-sidebar') 
@stop 

@section('content')
    <style>
        .slimScrollDiv {
            height: 100% !important;
        }
    </style>
    <section class="content">
        <div class="container-fluid">
             
            <div class="card">
                <br>
                <div class="body">
                    <div class="" style="background-color: #24576A; height:40px">
                        <h4 class="text-center" style="color:#fff; padding:10px;font-weight: 100">
                            {{ __('lang.service_bulk_upload') }}
                        </h4>
                    </div>
                    <br>
                    <form name="excel-import" action="{{ route('service.bulk_import') }}" id="frmFileUpload" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="dz-message text-center">
                            <input onchange="checkfile(this);" accept=".xlsx, .xls" required name="file" type="file" class="form-control">
                            <br>
                            <button type="submit" class="btn btn-primary">{{__('lang.proceed')}}</button>
                        </div>

                    </form>
                    <hr>
                    <p class="text-center">{{__('lang.please_check_sample_file')}}<a style="margin-left: 10px" href="{{url('/downloads/sample-service-upload.xlsx')}}" target="_self" download>{{__('lang.download')}}</a> </p>
                    <hr>
                </div>
            </div>

            @if (count($data ?? []) > 0)
                <div class="row" >
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="card">
                            <form name="data-import" class="actionForm" action="{{ route('service.bulk_store') }}" method="POST">
                                <div class="row body">
                                    <div class="margin-bottom-0 col-md-2 col-lg-2 col-sm-2">
                                        <div class="form-group">
                                            <input class="btn btn-sm btn-info waves-effect" type="submit" style="margin-top: 12px" value="{{ __('lang.create_selected') }} {{__('lang.items')}}" id="confirmButton" name="ApplyButtom">
                                        </div>
                                    </div>
                                </div>

                                <div class="body ">
                                    {{ csrf_field() }}
                                    <table class="table  table-bordered  ">
                                        <thead>
                                            <tr>
                                                <th class="checkbox_custom_style text-center" width="10%">
                                                    <input name="selectTop" type="checkbox" id="md_checkbox_p" class="chk-col-cyan" />
                                                    <label for="md_checkbox_p"></label>
                                                </th>
                                                <th>{{ __('lang.name') }}</th>
                                                <th>{{ __('lang.group_name') }}</th>
                                                <th>{{ __('lang.sub_group_name') }}</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @php  unset($data[0]) @endphp
                                            @foreach ($data as $item)
                                                @php
                                                    $item_name      = $item[0];
                                                    $group_name     = $item[1];
                                                    $sub_group_name = $item[2];
                                                    
                                                    $data_arr = [
                                                        'row'               => $loop->iteration + 1,
                                                        'item_name'         => $item_name,
                                                        'group_name'        => $group_name,
                                                        'sub_group_name'    => $sub_group_name,
                                                    ];
                                                @endphp
                                                <tr>
                                                    <th class="text-center">
                                                        <input name="items[]"  type="checkbox" value="{{ json_encode($data_arr)}}" class="chk-col-cyan selects " id="md_checkbox_{{ $loop->iteration }}" />
                                                        <label for="md_checkbox_{{ $loop->iteration }}"></label>
                                                    </th>
                                                    <td>{{ $item_name }}</td>
                                                    <td>{{ $group_name }}</td>
                                                    <td>{{ $sub_group_name }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th class="checkbox_custom_style text-center">
                                                    <input name="selectBottom" type="checkbox" id="md_checkbox_footer" class="chk-col-cyan" />
                                                    <label for="md_checkbox_footer"></label>
                                                </th>
                                                <th>{{ __('lang.name') }}</th>
                                                <th>{{ __('lang.group_name') }}</th>
                                                <th>{{ __('lang.sub_group_name') }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>                                
                            </form>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>

    @include('layouts.components.error_modal' , ['erro_heading' => __('lang.service')])

@endsection


@push('include-css')
    <!-- Wait Me Css -->
    <link href="{{ loadAsset('asset/plugins/waitme/waitMe.css') }}" rel="stylesheet" />

    <!-- Colorpicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

    <!-- Dropzone Css -->
    <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

    <!-- Multi Select Css -->
    <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" /> 
@endpush 

@push('include-js')
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>
    <!-- Autosize Plugin Js -->

    <script src="{{ loadAsset('asset/js/dataTable.js')  }}"></script>

    <script>
        toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": 0,
        "extendedTimeOut": 0,
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut",
        "tapToDismiss": false
        }

        @if(Session::has('success'))
            toastr.success('{{ Session::get('success') }}')
        @endif
        
    </script>
     

    <script>
        let action =  "{{$action}}";

        function checkfile(sender) {
            var validExts = new Array(".xlsx", ".xls", ".csv");
            var fileExt = sender.value;
            fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
            if (validExts.indexOf(fileExt) < 0) {
                alert("Invalid file selected, valid files are of " +
                    validExts.toString() + " types.");
                return false;
            } else return true;
        }
        $(document).ready(function() {
            var boxes = $('.chk-col-cyan');
            boxes.on('change', function() {
                $('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
            }).trigger('change');

            $('.dropdown-submenu a.test').on("click", function(e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>
   
    <script>
        BaseController.init();
    </script>
@endpush