@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <div class="page-header">
            <h4 class="page-title">Employees</h4>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title ">Employees List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <div class="mx-auto d-flex">
                                <a href="{{ route('employees.create')}}" class="btn btn-outline-success btn-sm waves-effect waves-light mx-auto d-block w-25 mb-6" data-bs-toggle="tooltip" data-bs-original-title="Add New Department">
                                    Add New Employee <i class="fa fa-plus pagination-right"></i>
                                </a>
                                <a href="{{ route('employees.export')}}" class="btn btn-outline-primary btn-sm waves-effect waves-light mx-auto d-block w-25 mb-6" data-bs-toggle="tooltip" data-bs-original-title="Export Excel">
                                    Export <i class="fa fa-file-excel-o pagination-right"></i>
                                </a>
                            </div>
                            <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="employees-table">
                                <thead>
                                    <tr>
                                        <th style="text-align: center;">id</th>
                                        <th style="text-align: center;">name</th>
                                        <th style="text-align: center;">phone</th>
                                        <th style="text-align: center;">email</th>
                                        <th style="text-align: center;">department name</th>
                                        <th style="text-align: center;">Job title</th>
                                        <th style="text-align: center;">Job Type</th>
                                        <th style="text-align: center;">basic salary</th>
                                        <th style="text-align: center;">compansation</th>
                                        <th style="text-align: center;">total salary</th>
                                        <th style="text-align: center;">Bank status</th>
                                        <th></th>
                                        <th style="text-align: center;">action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                       $count=0
                                    @endphp
                                    @foreach ($employees as $employee)
                                        <tr class="text-center">
                                            <td>{{++$count}}</td>
                                            <td>{{$employee->name}}</td>
                                            <td>{{$employee->phone}}</td>
                                            <td>{{$employee->email}}</td>
                                            @if ($employee->job_title && $employee->job_title->department)
                                            <td>{{$employee->job_title->department->name}}</td>
                                            @else
                                            <td>Null</td>
                                            @endif
                                            @if ($employee->job_title)
                                            <td>{{$employee->job_title->name}}</td>
                                            @else
                                            <td>Null</td>
                                            @endif
                                            @if ($employee->job_type)
                                            <td>{{$employee->job_type->name}}</td>
                                            @else
                                            <td>Null</td>
                                            @endif
                                            <td>{{$employee->basic_salary}} EGP</td>
                                            <td>{{$employee->compansation}} EGP</td>
                                            <td>{{$employee->total_salary}} EGP</td>
                                            <td>
                                                <i class="mdi mdi-information-outline leading-loose" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="top" title=""data-bs-original-title="bank name: {{$employee->bank_name}}<br> bank account: {{$employee->bank_account}}"></i>
                                            </td>
                                            <td>

                                                <label class="form-swich">
                                                    <input type="checkbox" value="{{$employee->is_active ? '1' : '0'}}" data-emid={{ $employee->emid }} id="is_active_{{$employee->emid}}" name="is_active" class="form-switch-input status-checkbox" {{$employee->is_active ? "checked":""}}>
                                                    <span class="form-switch-indicator"></span>
                                                    <span class="form-switch-description" id="status_{{ $employee->emid }}">{{ $employee->is_active ? 'active' : 'inactive' }}</span>
                                                </label>
                                            </td>
                                            <td style="text-align: center;">
                                                <a href="{{route('employees.edit',$employee->emid)}}" class="btn btn-outline-light btn-sm waves-effect waves-light edit" data-bs-toggle="tooltip" data-bs-original-title="Edit" >
                                                    <i class="fa fa-edit fs-16"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="center-block text-center">
                            {{-- {{ $transactions->links('inc.paginate') }} --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('admin-js')
<script>
    $('#employees-table').dataTable( {

        "drawCallback": function( settings ) {
            // update course offering status
            $('.status-checkbox').on('change', function () {
                $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
                });
                const employee_id = $(this).attr('data-emid');
                var url = "{{ route('updateEmployeeStatus', ":employee_id") }}";
                url = url.replace(':employee_id', employee_id);
                var formData = new FormData();
                var checkbox_value=jQuery('#is_active_'+employee_id).val()
                var status=jQuery('#status_'+employee_id);

                if(checkbox_value == 1){
                    checkbox_value = 0
                    status.text('inactive')
                }else{
                    checkbox_value = 1
                    status.text('active')

                }

                formData.append('is_active', checkbox_value);

                $.ajax({
                    url: url,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formData,
                    enctype: 'multipart/form-data',
                    success: function (data) {
                        notif({
                            type: "success",
                            msg: "The Status Updated Successfully",
                            position: "center",
                            opacity: 0.8,
                            autohide: true
                            });
                            setTimeout(location.reload.bind(location), 1000);
                    }
                });
            });
        }
    });

</script>
@endsection