@extends('layouts.user')
@section('page-title', 'Staff Details')
@section('page-title-body', 'Staff Details')
@section('active-link-8', 'active-link')

@section('main-theme')
    <div id="dashboard-container-view">
        <h2>
            <span>Staff Details</span>

            <button type="button" class="btn-h2" id="btnaddstaff"><i class="far fa-plus-square" style="margin:0px 8px 0px 0px"></i>Add Staff</button>
            <button type="button" class="btn-h2 btn-h2-active" id="btnstafflist"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Staff List</button>

        </h2>
        <div class="block-cont"></div>
        <article class="display-block" id="staff-list">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="table-first">
                    <thead class="thead-light">
                        <tr><th>Staff Name</th><th>Address</th><th>Email</th><th>Phone</th><th>Role</th><th>Region</th> <th>District</th><th>Status</th><th></th></tr>
                    </thead>
                    <tbody>
                        @foreach($staff as $data)
                        
                            <tr>
                                <td>{{$data->name}}</td><td>{{$data->address}}</td><td>{{$data->email}}</td>
                                <td>{{$data->phone}}</td>
                                <td>
                                    @if($data->role == 'admin') Administrator @elseif($data->role == 'sales') Sales Officer @endif
                                </td><td>{{$data->region}}</td>
                                <td>{{$data->district}}</td><td>
                                    @if($data->status == 0)
                                        <span class="status-active"><i class="fas fa-exclamation-circle" style="margin: 0px 3px 0px 0px"></i> Active</span>
                                    @else
                                        <span class="status-unactive"><i class="fas fa-exclamation-circle" style="margin: 0px 3px 0px 0px"></i> Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    @if(Auth::user()->id != $data->id)
                                    <a href="{{route('delete-staff', [$data->id])}}"><button class="btntrash tablebtn">
                                        <i class="fa fa-trash"></i>
                                    </button></a>
                                    @if($data->status == 0)
                                        <a href="{{route('ban-staff', [$data->id, 1])}}"><button class="btnbanunactive tablebtn">
                                            <i class="fa fa-ban"></i>
                                        </button></a>
                                    @else
                                        <a href="{{route('ban-staff', [$data->id, 0])}}"><button class="btnbanactive tablebtn">
                                            <i class="fa fa-ban"></i>
                                        </button></a>
                                    @endif
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </article>

        <article class="display-none" id="add-staff">
            <form action="{{route('create-staff')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <section class="view-col-half-left">
                    <h5>Staff Name</h5>
                    <input type="text" name="name" class="form-control" required placeholder="Staff full name">
                </section>
                <section class="view-col-half-right">
                    <h5>Address</h5>
                    <input type="text" name="address" class="form-control" required placeholder="Staff address">
                </section>
                <section class="view-col-half-left">
                    <h5>Phone Number</h5>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="basic-addon1">255</span>
                        </div>
                        <input type="text" class="form-control" placeholder="*********" name="phone" id="chaphone" data-id="chaphone" pattern="[1-9]{1}[0-9]{8}" maxlength="9" minlength="9" required>
                      </div>
                </section>
                <section class="view-col-half-right">
                    <h5>Email</h5>
                    <input type="email" name="email" class="form-control" required placeholder="Staff email address">
                </section>
                <section class="view-col-full"></section>
                <section class="view-col-half-left">
                    <h5>Staff Position</h5>
                    <select name="role" class="form-control">
                        {{-- <option value="staff">Staff</option>
                        <option value="manager">Manager</option> --}}
                        <option value="sales">Sales Officer</option>
                        <option value="admin">Administrator</option>
                    </select>
                </section>
                <section class="view-col-half-right">
                    <h5>Account Status</h5>
                    <input type="text" name="status" value="Active" class="form-control" readonly>
                </section>
                <section class="view-col-full">
                    <h5>Password</h5>
                    <input type="password" name="password" minlength="8" class="form-control" required>
                </section>
                <section class="view-col-half-left">
                    <h5>Region</h5>
                    <select name="region" id="region" class="form-control">
                        <option value="0">Select Region</option>
                        @foreach($region as $data)
                          <option value="{{$data->id}}">{{$data->name}}</option>
                        @endforeach
                    </select>
                </section>
                <section class="view-col-half-right">
                    <h5>District</h5>
                    <select name="district" id="district" class="form-control">
                    </select>
                </section>
                <section class="view-col-full">
                    <br>
                    <button type="submit" class="btn btn-success text-white w-25 p-10">Add Staff</button>
                </section>
            </form>
        </article>

        
        <div class="block-cont"></div>
    </div>


@endsection

<!-- js script -->
@push('scripts')
<script>
    $(function(){

        //add-staff

        $(document).on('click', '#btnaddstaff', function(){
            $('#add-staff').css({"display":"block"});
            $('#staff-list').css({"display":"none"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("New Aifola Express staff");
        });

        
        $(document).on('click', '#btnstafflist', function(){
            $('#add-staff').css({"display":"none"});
            $('#staff-list').css({"display":"block"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Staff Details");
        });

        $(document).on('change', '#region', function(){

            let region_id = $(this).val();
            $.ajax({
                url:"../get-districts/"+region_id,
                method:"get",
                dataType:"text",
                success:function(data){
                    //console.log(data);
                    var json = $.parseJSON(data);
                    $('#district').empty();
                    $('#district').append("<option value='invalid-1'>Select district</option>");
                    for (var i = 0; i < json.length; ++i) {
                        $('#district').append("<option value=" + json[i].id + ">" + json[i].name + "</option>");
                    }
                }
            });

        });




        var db = $('#table-first').dataTable({
            columnDefs: [ 
            { 
                type: 'date',
                'targets':[1]
            }],
        order: [[ 1, 'desc' ]]
        });
    });

</script>
@endpush