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

@section('main-theme')
<div id="personal-details" class="">
    <div class="container-personal-d1">
        <img src='{{asset("media/images/user.png")}}'>
        <section>
            @if(Auth::user()->role == 'admin') Administrator @elseif(Auth::user()->role == 'sales') Sales Officer @endif
        </section>
    </div>
    <div class="container-personal-d2">
        <h2>Staff Name</h2>
        <p>{{ Auth::user()->name }}</p>
    </div>
    <div class="container-personal-d2">
        <h2>Position</h2>
        <p>@if(Auth::user()->role == 'admin') Administrator @elseif(Auth::user()->role == 'sales') Sales Officer @endif</p>
    </div>
    <div class="container-personal-d2">
        <h2>Address</h2>
        <p>{{ Auth::user()->address }}</p>
    </div>
    <div class="container-personal-d2">
        <h2>Region</h2>
        <p>{{ $region->name }}</p>
    </div>
    <div class="container-personal-d2">
        <h2>District</h2>
        <p>{{ $district->name }}</p>
    </div>
    <div class="container-personal-d2">
        <h2>Email</h2>
        <p>{{ Auth::user()->email }}</p>
    </div>
    <div class="container-personal-d2">
        <h2>Phone Number</h2>
        <p>{{ Auth::user()->phone }}</p>
    </div>

    <div class="container-personal-d2">
        <h2>Account Created At</h2>
        <p>
           {{ Auth::user()->created_at->format('d m Y') }} </p>
    </div>
</div>

<div id="settings-container-changes">
    <div class="change-personal-details">
        <h2>Update personal details</h2>
        <form action="{{route('update-staff-details')}}" method="POST">
          @csrf
          <h4 class="required-fields">Staff Name</h4>
          <input type="text" name="name" class="form-control form-control-sm" id="chaemail" data-id="chaemail" value="{{ Auth::user()->name}}" required>
          <h4 class="required-fields">Address</h4>
          <input type="text" name="address" class="form-control form-control-sm" id="staff" data-id="staffname" value="{{ Auth::user()->address}}" required>
          <h4 class="required-fields">Email Address</h4>
          <input type="email" name="email" class="form-control form-control-sm" id="chaemail" data-id="chaemail" value="{{ Auth::user()->email}}" required>
          <input type="hidden" name="id" value="{{ Auth::user()->id}}">
          <h4 class="required-fields">Phone Number</h4>
          <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" value="{{ substr(Auth::user()->phone,3)}}" pattern="[1-9]{1}[0-9]{8}" maxlength="9" minlength="9" required>
          </div>
          <br/>
          <button type="submit" class="btn bg-success text-white">Update</button>
        </form>
    </div>

    <div class="change-personal-details">
        <h2>Reset password</h2>
        <form action="{{route('update-staff-password')}}" method="POST">
          @csrf
          <h4 class="required-fields">New password</h4>
          <input type="password" name="passworda" minlength="6" class="form-control form-control-sm" id="newppass" data-id="newppass" required>
          <input type="hidden" name="id" value="{{Auth::user()->id}}">
          <h4 class="required-fields">Re-enter password</h4>
          <input type="password" name="passwordb" minlength="6" class="form-control form-control-sm" id="renewppass" data-id="renewppass" required>
          <span class="error-password"></span>
          <br>
          <button type="submit" class="btn bg-success text-white">Reset</button>
          <!-- disabled='false' -->
        </form>
    </div>
</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