@extends('layouts.customer')

@section('content')
<style type="text/css">
    div.btn-group{
            width: 100%;
            border-radius: 0.1rem;
            border: 1px solid #d7d7d7;
    }
    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 90%;
    }
    ul.multiselect-container.dropdown-menu.show {
    width: 100%;
}
.dropdown-toggle::after{
    margin-top: 7px;
    font-size: 17px;
}
</style>
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Staff</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                             <li class="breadcrumb-item">
                                <a href="{{url('/')}}/dashboard">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{url('/')}}/staff">Staff List</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Edit Staff</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    @if ($errors->any())
                        <div class="alert alert-danger w-100">
                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Edit Staff</h5>
                            
                            <form id="EditStaff" action="{{ route('staffs.update',['account'=>$account,'staff'=>$staff->id]) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="first_name">First Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" value="{{ old('first_name') ?? ($staff->first_name ?: '') }}" name="first_name" id="first_name" placeholder="Enter your first name" required="">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="last_name">Last Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" value="{{ old('last_name') ?? ($staff->last_name ?: '') }}" name="last_name" id="last_name" placeholder="Enter your last name" required="">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="email">Email 
                                            <!-- <span class="text-danger">*</span> -->
                                        </label>
                                        <input type="email" class="form-control" value="{{ old('email') ?? ($staff->email ?: '') }}" name="email" id="email" placeholder="Enter your email">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="username">Username 
                                            <!-- <span class="text-danger">*</span> -->
                                        </label>
                                        <input type="text" class="form-control" value="{{ old('username') ?? ($staff->username ?: '') }}" name="username" id="username" placeholder="Enter username">
                                    </div>
                                </div>

                                @can('user_role_edit')
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="password">Role <span class="text-danger">*</span></label>
                                        <select class="form-control select2-single" name="role_id" data-width="100%" required>
                                            <option value="">SELECT ROLE</option>
                                            @php 
                                                if(!empty(old('role_id'))){
                                                    $old_role = old('role_id');
                                                }else{
                                                  $old_role = $staff->role_id;
                                                }
                                             @endphp
                                            @foreach( $roles as $key => $role )
                                                {{-- <option value="{{ $role->id }}" {{ ( if($role->id == $staff->role_id)selected @endif >{{ $role->name }}</option>  --}}                       
                                                <option value="{{ $role->id }}" @if( $role->id !='5' && in_array($role->id, $staffRoles) ) {{ 'selected' }} @endif>{{ $role->name }}</option>                         
                                            @endforeach
                                        </select>
                                    </div>
                                @endcan
                                    <div class="form-group col-md-6">
                                        <label for="password">Locations <span class="text-danger">*</span></label>
                                        <select class="form-control" name="locations[]" data-width="100%"  id="multiple-checkboxes" multiple="multiple">
                                            @foreach( $locations as $key => $loc )
                                                <option value="{{ $loc->id }}" {{ ( collect(old('locations'))->contains($loc->id) ? 'selected' : ( in_array( $loc->id, $locationIds ) ? 'selected' : '' )) }}>{{ $loc->name }}</option>                         
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="address">Address 
                                        <!-- <span class="text-danger">*</span> -->
                                    </label>
                                    <input type="text" class="form-control" value="{{ old('address') ?? ( $staff->user_meta->address ?? '') }}" name="address" id="address" placeholder="1234 Main St">
                                </div>
                                <div class="form-group">
                                    <label for="apartment">Address 2</label>
                                    <input type="text" class="form-control" value="{{ old('apartment') ?? ( $staff->user_meta->apartment ?? '') }}" name="apartment" id="apartment" placeholder="Apartment, studio, or floor">
                                </div>
                                {{--<div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="city">City <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" value="{{ old('city') ?? ( $staff->user_meta->city ?? '') }}" name="city" id="city">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="state">State</label>
                                        <select id="state" value="" name="state" class="form-control">
                                            <option selected>Choose...</option>
                                            <option>...</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label for="postal_code">Zip <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" value="{{ old('postal_code') ?? ( $staff->user_meta->postal_code ?? '') }}" name="postal_code" id="postal_code">
                                    </div>
                                </div>--}}
                                 <!-- new code  -->
                                   <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="state">State 
                                            <!-- <span class="text-danger">*</span> -->
                                        </label>
                                        <select name="state" class="form-control states order-alpha select2-state" id="stateId">
                                            <option value="">Select State</option>
                                          @if(isset($state) && !empty($state))  
                                            <option value="{{$state->code}}" selected="">{{$state->name}}</option>
                                          @endif  
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="city">City 
                                            <!-- <span class="text-danger">*</span> -->
                                        </label>
                                        <select name="city" class="form-control cities order-alpha select2-city" id="cityId">
                                            <option value="">Select City</option>
                                          @if(isset($city) && !empty($city))     
                                            <option value="{{$city->id}}" selected="">{{$city->name}}</option>
                                          @endif  
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label for="postal_code">Zip 
                                            <!-- <span class="text-danger">*</span> -->
                                        </label>
                                        <input type="text" class="form-control" value="{{ old('postal_code') ?? ( $staff->user_meta->postal_code ?? '') }}" name="postal_code" id="postal_code">
                                        
                                    </div>
                                </div>
                                <!-- end new code -->

                                <button type="submit" class="btn btn-primary d-block mt-3">Save</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            <hr>

            
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Timesheet Visibility</h5>

                            <form id="update-visibility" action="{{ route('staffs.visibility.update',['account'=>$account,'staff'=>$staff->id]) }}" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="form-group row mb-1">
                                    <label class="col-12 col-form-label">Is visible on timesheet?</label>
                                    <div class="col-12">
                                        <div class="custom-switch custom-switch-secondary mb-2">
                                            <input class="custom-switch-input" id="timeline_visibility" type="checkbox" @if( $staff->timeline_visibility == 1 ) checked @endif>
                                            <label class="custom-switch-btn" for="timeline_visibility"></label>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="timeline_visibility" value="{{ $staff->timeline_visibility }}">
                                <button type="submit" id="saveButton" class="btn btn-primary d-block mt-3">Save</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div> <!-- ./Change visibility -->

            <hr>
            <div class="row">
                  <div class="col-12">
                       <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="mb-2">Payroll Settings</h5>

                                <form method="post" action="{{ route('staffs.payroll.update', ['account'=> $account, 'staff' => $staff->id]) }}"> {{-- secure_url('staff-payroll-setting/'.$staff->id) --}}
                                    @csrf
                                    <div class="form-check" style="float: left;width: 100px;">
                                        <input type="radio" class="custom-radio form-check-input __radioBox" id="defaultRadio" name="payroll_type" value="default" @if($staff->payroll_type == 'default') checked @endif>
                                        <label class="form-check-label" for="defaultRadio">Default</label>
                                    </div>
                                    <div class="form-check" style="float: left;width: 100px;">
                                        <input type="radio" class="custom-radio form-check-input __radioBox" id="customRadio" name="payroll_type" value="custom"  @if($staff->payroll_type == 'custom') checked @endif>
                                        <label class="form-check-label" for="customRadio">Custom</label>
                                    </div>
                                    
                                    <div id="customOptions" @if( $staff->payroll_type == 'default' ) style="display: none;" @endif>
                                        <hr>
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input custom-control custom-radio" id="dailyRadio" name="custom_payroll_type" value="daily" @if(isset($staff->custom_payroll_type) && $staff->custom_payroll_type == 'daily') checked @endif>
                                            <label class="form-check-label" for="dailyRadio">Daily</label>
                                        </div>
                                        <div class="form-check custom-control custom-radio">
                                            <input type="radio" class="form-check-input" id="weeklyRadio" name="custom_payroll_type" value="weekly"  @if(isset($staff->custom_payroll_type) && $staff->custom_payroll_type == 'weekly') checked @endif>
                                            <label class="form-check-label" for="weeklyRadio">Weekly</label>
                                        </div>
                                        <div class="form-check custom-control custom-radio">
                                            <input type="radio" class="form-check-input" id="biweeklyRadio" name="custom_payroll_type" value="biweekly"  @if(isset($staff->custom_payroll_type) && $staff->custom_payroll_type == 'biweekly') checked @endif>
                                            <label class="form-check-label" for="biweeklyRadio">Biweekly</label>
                                        </div>
                                        <div class="form-check custom-control custom-radio">
                                            <input type="radio" class="form-check-input" id="monthlyRadio" name="custom_payroll_type" value="monthly"  @if(isset($staff->custom_payroll_type) && $staff->custom_payroll_type == 'monthly') checked @endif>
                                            <label class="form-check-label" for="monthlyRadio">Monthly</label>
                                        </div>
                                    </div>

                                    <!-- payment_type=>hourly, fixed => amount -->
                                    

                                    <div class="form-row" style="width: 100%;margin: 30px 0px 10px 0px;float: left;">
                                    <h5 class="mt-2" style="width: 100%;">Payment Type</h5>                               
                                        <div class="form-group col-md-4 position-relative error-l-100">
                                            <!-- <h6></h6> -->
                                            <div class="mb-2">
                                                <div class="custom-control custom-radio" style="float: left;width: 100px;">
                                                    <input type="radio" id="hourly" value="0" name="payment_type" class="custom-control-input" required="" aria-describedby="payment_type-error" @if($staff->payment_type == '0') checked @endif>
                                                    <label class="custom-control-label" for="hourly">Hourly</label>
                                                </div>
                                                <div class="custom-control custom-radio" style="float: left;width: 100px;">
                                                    <input type="radio" id="fixed" value="1" name="payment_type" class="custom-control-input" required="" aria-describedby="payment_type-error" @if($staff->payment_type == '1') checked @endif>
                                                    <label class="custom-control-label" for="fixed">Fixed</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-row payment_type-hourly @if( '0' != $staff->payment_type ) d-none @endif">
                                        <div class="form-group col-md-4 position-relative error-l-75">
                                            <h6>Amount per hour</h6>
                                            <input type="text" class="form-control hourly float_num" name="payment_type_hourly" id="hourly" value="{{ $staff->payment_type_hourly ?? '' }}" aria-describedby="hourly-error">
                                        </div>
                                    </div>

                                    <div class="form-row payment_type-fixed @if( '1' != $staff->payment_type ) d-none @endif">   
                                        <div class="form-group col-md-4 position-relative error-l-75">
                                            <h6>Fixed amount</h6>
                                            <input type="text" class="form-control fixed float_num" name="payment_type_fixed" id="fixed" value="{{ $staff->payment_type_fixed ?? '' }}" aria-describedby="fixed-error">
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-2" style="padding-left: 0;"><button style="" type="submit" class="btn btn-primary">Save Changes</button></div>
                                </form>
                            </div>
                        </div>
                  </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Change Password</h5>

                            <style>
                                .red-error-color { margin: 0; padding: 0; list-style: none; color: #dc3545; } .form-control.error { border-color: #dc3545; } .password-messages .red-error-color li.active { color: green; }
                                ul.red-error-color li.active::before {
                                    content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMjhhNzQ1IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMC42IDAuNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMC40NjggMC4xOGEwLjAyNSAwLjAyNSAwIDAgMCAtMC4wMzUgMGwtMC4xODYgMC4xODYgLTAuMDc4IC0wLjA3OUEwLjAyNSAwLjAyNSAwIDEgMCAwLjEzMiAwLjMyNWwwLjA5NiAwLjA5NmEwLjAyNSAwLjAyNSAwIDAgMCAwLjAzNSAwbDAuMjA0IC0wLjIwNGEwLjAyNSAwLjAyNSAwIDAgMCAwIC0wLjAzNyIvPjwvc3ZnPg==") !important;
                                }

                                ul.red-error-color li::before {
                                    content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZGMzNTQ1IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMC40NSAwLjQ1IiBpZD0iY3Jvc3MiIGRhdGEtbmFtZT0iRmxhdCBDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iaWNvbiBmbGF0LWNvbG9yIj48cGF0aCBpZD0icHJpbWFyeSIgZD0iTTAuMjUyIDAuMjI1IDAuMzcgMC4xMDZBMC4wMTkgMC4wMTkgMCAxIDAgMC4zNDQgMC4wOEwwLjIyNSAwLjE5OCAwLjEwNiAwLjA4YTAuMDE5IDAuMDE5IDAgMCAwIC0wLjAyNyAwLjAyN0wwLjE5OCAwLjIyNSAwLjA4IDAuMzQ0YTAuMDE5IDAuMDE5IDAgMCAwIDAgMC4wMjcgMC4wMTkgMC4wMTkgMCAwIDAgMC4wMjcgMEwwLjIyNSAwLjI1MmwwLjExOCAwLjExOGEwLjAxOSAwLjAxOSAwIDAgMCAwLjAyNyAwIDAuMDE5IDAuMDE5IDAgMCAwIDAgLTAuMDI3WiIgc3R5bGU9ImZpbGw6IHJnYigyMjAsIDUzLCA2OSk7Ii8+PC9zdmc+");
                                }
                            </style>

                            <form id="update-password" action="{{ route('staffs.password.update',['account'=>$account,'staff'=>$staff->id]) }}" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label for="pass">Password <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" name="password" id="pass" placeholder="Password" required />
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="password_confirmation">Confirm Password <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm Password" required />
                                    </div>
                                </div>

                                <div class="password-messages" style="display:none;">
                                    <p>Password must meet the following requirements:</p> 
                                    <ul class="red-error-color">
                                        <li class="confirmed">The password confirmation does not match.</li>
                                        <li class="min-length">The password must be at least 8 characters.</li>
                                        <li class="number">The password must contain at least one number.</li>
                                        <li class="letter">The password must contain at least one letter.</li>
                                        <li class="symbol">The password must contain at least one symbol.</li>
                                        <li class="upper-and-lower">The password must contain at least one uppercase and one lowercase letter.</li>
                                    </ul>
                                </div>

                                <button type="submit" id="saveButton" class="btn btn-primary d-block mt-3 disabled" disabled>Save</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div> <!-- ./password -->

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Change Passcode</h5>

                            <form action="{{ route('staffs.passcode.update',['account'=>$account,'staff'=>$staff->id]) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label for="passcode">Passcode <span class="text-danger">*</span></label>
                                        <input type="password" onkeypress="return isNumber(event)" class="form-control" value="{{ old('passcode')}}" name="passcode" id="passcode"
                                            placeholder="Passocde" required="">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="passcode">Confirm Passcode <span class="text-danger">*</span></label>
                                        <input type="password" onkeypress="return isNumber(event)" class="form-control" value="{{ old('confirm_passcode')}}" name="confirm_passcode" id="confirm_passcode"
                                            placeholder="Passocde" required="">
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary d-block mt-3">Save</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div> <!-- ./passcode -->
        </div>
@endsection
 <link rel="stylesheet" href="{{ secure_url('css/bootstrap-multiselect.css')}}">
@section('script')
@include('partials.js._statecity')
 <script src="{{ secure_url('js/bootstrap-multiselect.min.js')}}"></script>
 <script type="text/javascript">
        $('#multiple-checkboxes').multiselect({
          includeSelectAllOption: true,
          nonSelectedText:'Choose Location'
        });
        $('#passcode, #confirm_passcode').on('keydown', function(event) {
            if( event.which !== 8 && $(this).val().length === 6 ) {
                return false;
            }
        });
        function isNumber(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
         $(document).ready(function() {
            $('.__radioBox').change(function() {
                if ($(this).val() === 'custom') {
                    $('#customOptions').show();
                } else {
                    $('#customOptions').hide();
                }
            });

            $("#timeline_visibility").change(function() {
                if( this.checked ) {
                    $('input[name="timeline_visibility"]').val(1);
                } else {
                    $('input[name="timeline_visibility"]').val(0);
                }
            });

            $(document).on('change', 'input[type=radio][name=payment_type]', function() {
                if( this.value == '0' ) {
                    // Add required
                    $('.hourly').prop("required",true);

                    // Remove required
                    $('.fixed').removeAttr("required");

                    // Remove class
                    $('.payment_type-hourly').removeClass('d-none');

                    // Reset select value
                    $('.fixed').val('');

                    // Add class
                    if( !$('.payment_type-fixed').hasClass('d-none') ) {
                        $('.payment_type-fixed').addClass('d-none');
                    }
                } else if( this.value == '1' ) {
                    // Add required
                    $('.fixed').prop("required",true);

                    // Remove required
                    $('.hourly').removeAttr("required");

                    // Remove class
                    $('.payment_type-fixed').removeClass('d-none');

                    // Reset select value
                    $('.hourly').val('');

                    // Add class
                    if( !$('.payment_type-hourly').hasClass('d-none') ) {
                        $('.payment_type-hourly').addClass('d-none');
                    }
                } else {
                    // Reset select value
                    $('.hourly, .fixed').val('');

                    // Reset required
                    $('.hourly, .fixed').removeAttr("required");

                    // Reset or toggle class for both
                    $('.payment_type-hourly, .payment_type-fixed').removeClass('d-none').addClass('d-none');
                }
            });
        });
   </script>
 @endsection