@extends('layouts.admin')
@section('title','User List || Admin Dashboard')
@section('styles')
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
@endsection
@section('script')
<script src="{{ asset('js/jquery.sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/pdfmake.min.js') }}"></script>
<script src="{{ asset('js/vfs_fonts.js') }}"></script>
<script src="{{ asset('js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('js/buttons.print.min.js') }}"></script>


<style>
    .button {
        background-color: #2C5F2D;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .button:hover {
        background-color: #97BC62FF;
    }

    .buttond {
        background-color: #db1709;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .buttond:hover {
        background-color: #e68524;
    }

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
        border-color: #80d8ff;
    }
</style>

<script>
  
        dom: 'Bfrtip',
        buttons: [


            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                }
            },

            // 'copy',
            // 'excel',
            // 'csv',
            // 'pdf',
            // 'print'
        ]
    });
</script>

<script>
 

      $('.getusers').click(function() {

        var auser_id = $(this).data('userid');
       
        $.ajax({
            url: "{{ route('get-user-dataentry')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token()}}",
                auserid: auser_id
            },
            success: function(response) {

                if (typeof(response) != "object") {
                    response = JSON.parse(response);
                }

                var tbody_html = "";

                if (response.status) {
                    // map done

                    $.each(response.data, function(key, value) {

                        tbody_html += "<tr>";
                        tbody_html += "<td>";
                        tbody_html += "<input type='text' name='approverid' value='" + auser_id + "'>";
                        tbody_html += "<input type='hidden' name='_token' value='{{ csrf_token() }}'>";
                        tbody_html += "<input type='checkbox' name='equip[" + key + "][cid]' value='" + value.cid + "' class='select_equip' data-id='" + value.cid + "'>";
                        tbody_html += "<input type='hidden' name='equip[" + key + "][name]' value='" + value.name + "'>";
                        tbody_html += "<input type='hidden' name='equip[" + key + "][email]' value='" + value.email + "'>";
                        tbody_html += "<input type='hidden' name='equip[" + key + "][id]' value='" + value.id + "'>";
                        tbody_html += "</td>";

                        tbody_html += "<td>" + value.cid + "</td>";
                        tbody_html += "<td>" + value.name + "</td>";
                        tbody_html += "<td>" + value.email + "</td>";
                        

                        tbody_html += "</tr>";
                    });
                    $('#equip-table').html(tbody_html);
                    $('#content-modal').modal('show');
                    $('#equipmentallocationdetails').dataTable();
                } else {
                    Swal.fire('error!', response.msg, 'error').then(function() {
                        document.location.href = document.location.href;
                    });
                }
            }
        });
    });


    $('#submit_allocated').bind('click', function() {
        var form_data = new FormData($('#allocate_form')[0]);

        $.ajax({
            url: "{{ route('save-usermapapprover') }}",
            type: "post",
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            data: form_data,
            success: function(response) {

                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }
                if (response.status) {
                    if (response.data) {

                        $('#content-modal').modal('hide');
                    }
                }
            }
        })
    });


</script>


@endsection

@section('content')

<div class="modal" tabindex="-1" role="dialog" id="content-modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Equipment Detail</h5>
                <button type="button" class="" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fa fa-times-circle" aria-hidden="true" style="color: crimson;"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <form action="" id="allocate_form">

                    <table id="equipmentallocationdetails" class="equipmentallocationdetails table-striped table-hover">
                        <thead class="thead-dark">
                            <th>Sl. No</th>
                            <th>CID</th>
                            <th>Name</th>
                            <th>Email</th>
                          
                        </thead>
                        <tbody id="equip-table">

                        </tbody>
                    </table>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn button" id="submit_allocated">
                    <i class="fa fa-plus"></i> Add
                </button>
            </div>

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


<div class="page-content fade-in-up">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">
                        User List
                    </div>
                    <a href="{{ route('user.create') }}" class="btn button">
                        <i class="fa fa-plus"></i> Add User
                    </a>
                </div>
                <div class="container">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="thead-light">
                            <th>SL. No.</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>EID</th>
                                <th>CID</th>
                                <th>Role</th>
                                <th>Contact</th>
                                <th>Ministry</th>
                                <th>Department</th>
                                <th>Division</th>
                                <th>Field Regional</th>
                                <th>Action</th>
                            </thead>
                            <tbody>
                                @if($user_data)
                                @foreach($user_data as $key => $user_detail)
                                <tr>
                                <td>{{ $count }}</td>
                                    <td>{{ @$user_detail->name }}</td>
                                    <td>{{ @$user_detail->email }}</td>
                                    <td>{{ @$user_detail->eid }}</td>
                                    <td>{{ @$user_detail->cid }}</td>
                                    <td>{{ @$user_detail->user_role }}</td>
                                    <td>{{ @$user_detail->contact }}</td>
                                    <td>{{ @$user_detail->agency_info['agency_name'] }}</td>
                                    <td>{{ @$user_detail->department_info['dept_dzo_name'] }}</td>
                                    <td>{{ @$user_detail->division_info['division_name'] }}</td>
                                    <td>{{ @$user_detail->field_info['field_regional_name'] }}</td>
                                    <td>
                                        <div class="dropdown">
                                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                                Action button &nbsp;<i class="fa fa-sort-down"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                
                                                <a class="dropdown-item getusers" href="javascript:;" data-userid="{{ $user_detail->id}}">Map</a>
                                                
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
@endsection