@extends('Admin.layouts.app')
@section('content')

    <div class="row">
        <div class="col-12">
            <h1>Employee</h1>
            <div class="top-right-button-container">            
                <a href="{{route('employee.create')}}" class="btn btn-secondary mb-1">Add Employee</a>            
            </div>
            <div class="separator mb-5"></div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-body">
                    <table class="data-table data-table-employee-list">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Phone</th>
                                <th>Country</th>
                                <th>Status</th>
                                <th>Action</th>                  
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($employeeList as $key=>$employee)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$employee->name}}</td>
                                    <td>{{$employee->username}}</td>
                                    <td>{{$employee->phone}}</td>
                                    <td>{{$employee->country}}</td>
                                    <td>
                                        @switch($employee->status)

                                        @case(1)
                                            <span class="badge badge-pill badge-outline-primary mb-1">Unblock</span>
                                        @break

                                        @default
                                            <span class="badge badge-pill badge-outline-warning mb-1">Block</span>
                                        @endswitch
                                    </td>
                                    <td>                                    
                                        <!--Edit Icon-->
                                        <a href="{{ URL::to('admin/employee/'. $employee->id.'/edit') }}">     
                                            <i class="glyph-icon iconsminds-folder-edit btn btn-primary" title="Edit this data" style="padding: 5px 10px"></i>          
                                        </a> 

                                        <a>
                                            <i class="glyph-icon iconsminds-securiy-remove btn btn-danger" data-toggle="modal" data-target=".deletePopup{{$employee->id}}" title="Delete this data" style="padding: 5px 10px"></i>
                                            <div class="modal fade bd-example-modal-md deletePopup{{$employee->id}} " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">    
                                                <div class="modal-dialog modal-dialog-centered modal-md">    
                                                    <div class="modal-content">    
                                                        <div class="modal-header">    
                                                            <h5 class="modal-title mt-0">Employee</h5>    
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>    
                                                        </div>    

                                                        <div class="modal-body">    
                                                            <p>Are you sure want to delete this?</p>    
                                                        </div>
        
                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-outline-primary default mb-1" data-dismiss="modal">No</button>
                                                            {{ Form::open(array('url' => 'admin/employee/' . $employee->id)) }}    
                                                            {{ Form::hidden('_method', 'DELETE') }}    
                                                                <button type="submit" class="btn btn-outline-secondary default mb-1">Yes</button>    
                                                            {{ Form::close() }}
                                                        </div>    
                                                    </div>    
                                                </div>    
                                            </div>    
                                        </a> 
                                    </td>   
                                </tr>
                            @endforeach                       
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <script>

        $(document).ready(function () {
            $(".data-table-employee-list").DataTable({
                sDom: '<"row view-filter"<"col-sm-12"<"float-right"l><"float-left"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                "columns": [
                    { "data": "No" },
                    { "data": "Name" },
                    { "data": "Username" },
                    { "data": "Phone" },
                    { "data": "Country" },
                    { "data": "Status" },
                    { "data": "Action" },
                ],
                drawCallback: function () {
                $($(".dataTables_wrapper .pagination li:first-of-type"))
                    .find("a")
                    .addClass("prev");
                $($(".dataTables_wrapper .pagination li:last-of-type"))
                    .find("a")
                    .addClass("next");

                $(".dataTables_wrapper .pagination").addClass("pagination-sm");
                },
                language: {
                paginate: {
                    previous: "<i class='simple-icon-arrow-left'></i>",
                    next: "<i class='simple-icon-arrow-right'></i>"
                },
                search: "_INPUT_",
                searchPlaceholder: "Search...",
                lengthMenu: "Items Per Page _MENU_"
                },
            });
        });
        
    </script>

@endsection