@extends('dashboard.layouts.app')
@push('headScripts')
    <link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">@endpush
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="form-group col-4 float-end">
            <select name="hr_id_filter" style="width:100%" class="select2" id="hr_id_filter">
                <option value="all">{{ __('All') }}</option>
                <option value="has_hr_id">{{ __('Has HR ID') }}</option>
                <option value="not_has_hr_id">{{ __('Not Has HR ID') }}</option>
            </select>
        </div>
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">{{ __('Users & Roles') }} /</span> {{ __('Users') }}</h4>
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <h5 class="card-header">{{ __('Users') }}</h5>
                        <div class="m-4 mb-0 mt-0">
                            @if(PerUser('users.export'))
                                <div class="btn-group float-end ms-1 me-1" role="group">
                                    <button id="exportSelectedUsers" type="button" class="btn btn-primary dropdown-toggle export-selected" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fadeIn animated bx bx-export"></i>
                                        {!! __('Export Selected :type',['type'=>__('User')]) !!}
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="exportSelectedUsers">
                                        <a class="dropdown-item export-type" data-type="csv">{{ __('CSV') }}</a>
                                        <a class="dropdown-item export-type" data-type="excel">{{ __('Excel') }}</a>
                                        <a class="dropdown-item export-type" data-type="pdf">{{ __('PDF') }}</a>
                                    </div>
                                    <form action="{{ route('users.export') }}" method="POST" id="exportData" class="d-inline-block">
                                        <input type="hidden" id="exportIDS" name="IDS">
                                        <input type="hidden" name="export_type" value="excel">
                                        @csrf
                                        {{--                            <button class="btn btn-info export-selected"><i class="fadeIn animated bx bx-export"></i> {!! __('Export Selected :type',['type'=>__('User')]) !!}</button>--}}
                                    </form>
                                </div>
                                <div class="btn-group float-end ms-1 me-1" role="group">
                                    <button id="exportUsers" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fadeIn animated bx bx-export"></i>
                                        {{ __('Export') }}
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="exportUsers">
                                        <a class="dropdown-item export-type" data-type="csv">{{ __('CSV') }}</a>
                                        <a class="dropdown-item export-type" data-type="excel">{{ __('Excel') }}</a>
                                        <a class="dropdown-item export-type" data-type="pdf">{{ __('PDF') }}</a>
                                    </div>
                                    <form action="{{ route('users.export') }}" method="POST" class="d-inline-block">
                                        <input type="hidden" name="export_type" value="excel">
                                        @csrf
                                        {{--                            <button class="btn btn-info "><i class="fadeIn animated bx bx-export"></i> {{ __('Export') }}</button>--}}
                                    </form>
                                </div>
                            @endif
                                @if(PerUser('users.import'))
                                    <button onclick="$('#importFile').trigger('click')" class="btn btn-success  float-end ms-1 me-1">
                                        <span id="import-btn-title">
                                             <i class="fadeIn animated bx bx-import"></i>

                                        {{ __('Import') }}
                                        </span>
                                        <div id="importProgress" style="height: 25px;width: 73px;" class="progress d-none"> <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> </div>
                                    </button>
                                    <input type="file" class="d-none" id="importFile" accept=".csv,.xlsx,.xls">
                                @endif
                            @if(PerUser('users.destroy'))
                                <a href="#" class="btn btn-danger delete-selected float-end ms-1 me-1"><i class="fadeIn animated bx bx-trash-alt"></i> {!! __('Delete Selected :type',['type'=>__('User')]) !!}</a>
                            @endif
                            @if(PerUser('users.create'))
                                <a href="{{ route('users.create') }}" class="btn btn-primary float-end ms-1 me-1"><i class="fadeIn animated bx bx-message-square-add"></i> {{ __('Create :type',['type'=>__('User')]) }}</a>
                            @endif

                        </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            {{ $dataTable->table(['class' => 'table table-bordered table-striped mb-0']) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footerScripts')
    <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    <script>
        $(document).on('change','#hr_id_filter',function(){
            window.LaravelDataTables["users"].draw();
        });
        $(document).on('change','#importFile',function(){
            let el=$(this);
            let file = this.files[0];
            let fileType = file.type;
            var match= [
                /*excel*/
                'application/vnd.ms-excel',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
                /*csv*/
                'text/csv'
            ];
            if(match.includes(fileType)){
                data=new FormData();
                data.append('file',file);
                let oldTitle=$('title').text();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('users.import') }}',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data:data,
                    beforeSend: function() {
                        console.log('beforeSend');
                        $("#importProgress .progress-bar").attr('aria-valuenow',0).css({"width":0+'%'}).html(0+'%');
                        $("#importProgress").removeClass('d-none');
                        $("#import-btn-title").addClass('d-none');
                        $("#importBtn").addClass('loading').attr('disabled','disabled');
                        $('title').html('0%'+' upload file '+' |'+oldTitle);
                    },
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                                console.log(percentComplete);
                                $("#importProgress .progress-bar").attr('aria-valuenow',percentComplete).css({"width":percentComplete+'%'}).html(percentComplete+'%');
                                /*Do something with upload progress here*/
                                $('title').html(percentComplete+'%'+' upload file '+' |'+oldTitle);
                            }
                        }, false);
                        return xhr;
                    },
                    success: function (data) {
                        console.log('success');
                        console.log(data);
                        $("#importProgress").addClass('d-none');
                        $("#import-btn-title").removeClass('d-none');
                        $("#importBtn").removeClass('loading').removeAttr('disabled');
                        $.notify(data.message, {blur: 0.2, delay: 0,close: true,color: "#fff", background: (data.success?"#20D67B":"#D44950"),animationType:"drop"});
                        el.val('');
                        $('title').html(data.message+' | '+oldTitle);
                        if(data.success){
                            window.LaravelDataTables["users"].draw();
                        }
                    }
                });
            }else{
                $.notify("Please Select Valid file must be csv or excel!", {blur: 0.2, delay: 0,close: true,color: "#fff", background: "#D44950",animationType:"drop"});
            }
        });
        $(document).on('click','.export-type',function(e){
            e.preventDefault();
            let form=$(this).parent().parent().find('form')
            form.find('[name="export_type"]').val($(this).attr('data-type'));
            form.submit();
        })
        function checkMultiDeleteButton(){
           if($(".user-checkbox").is(':checked')){
               $(".delete-selected").removeClass('disabled');
               $(".export-selected,.export-types").removeClass('disabled');
           }else{
               $(".delete-selected").addClass('disabled')
               $(".export-selected,.export-types").addClass('disabled')

           }
        }
        checkMultiDeleteButton();
        $(document).on('click','.delete-selected',function(){
            let IDS=[];
            $('.user-checkbox:checked').each(function(){
                IDS.push($(this).val());
            })
            Swal.fire({
                title: '{{ __('Do you really want to delete this?') }}',
                showCancelButton: true,
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "DELETE",
                        url: "{{ route('users.multi_destroy') }}",
                        data:{IDS},
                        success: function (msg) {
                            window.LaravelDataTables["users"].draw();
                            Swal.fire(msg.message, '', msg.success?'success':'error')
                            $(".delete-selected").addClass('disabled').find('.selectedCount').text(0)
                        }
                    });

                }
            })
        })
        function addSelectedCount(){
            $(".selectedCount").text($(".user-checkbox:checked").length)
            let IDS=[];
            $('.user-checkbox:checked').each(function(){
                IDS.push($(this).val());
            })
            $("#exportIDS").val(IDS);
        }
        $(document).on('change','#selectAllCheckbox',function(){
            $('table#users tbody input[type="checkbox"].user-checkbox').prop('checked',$(this).is(':checked'))
            checkMultiDeleteButton();
            addSelectedCount()
        });
        $(document).on('change','.user-checkbox',function (){
            checkMultiDeleteButton();
            addSelectedCount()
        })
        @if(PerUser('users.destroy'))
        $(document).on('click','.delete-selected',function(){

        });
        $(document).on('click','.delete-this',function(e){
            e.preventDefault()
            let el=$(this);
            let url=el.attr('data-url')
            let id=el.attr('data-id')
            Swal.fire({
                title: '{{ __('Do you really want to delete this?') }}',
                showCancelButton: true,
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}',
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        type: "DELETE",
                        url: url,
                        success: function (msg) {
                            window.LaravelDataTables["users"].draw();
                            Swal.fire(msg.message, '', msg.success?'success':'error')
                        }
                    });

                }
            })
        })
        @endif
    </script>
@endpush