@extends('layouts.app')

@section('content')

<!-- Content wrapper scroll start -->
<div class="content-wrapper-scroll">

<!-- Content wrapper start -->
<div class="content-wrapper">

    <!-- Row start -->
    <div class="row gutters">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

            <div class="profile-header">
            <h1>Account! {{$userprofile->name}}</h1>
                <div class="profile-header-content">
                    <div class="profile-header-tiles">
                        <div class="row gutters">
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                <div class="profile-tile">
                                    <span class="icon">
                                        <i class="icon-user1"></i>
                                    </span>
                                    <h6>Name - <span>{{$userprofile->name}}</span></h6>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                <div class="profile-tile">
                                    <span class="icon">
                                        <i  class="icon-verified_user"></i>
                                    </span>
                                    <h6>Role - <span>{{$userprofile-> role}}</span></h6>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                <div class="profile-tile">
                                    <span class="icon">
                                        <i class="icon-trending_down"></i>
                                    </span>
                                    <h6>Category - <span>{{$userprofile->sales_person_category}}</span></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="profile-avatar-tile">
                        <img id="uploadedImage" src="/assets/img/{{empty($userprofile->image) ? 'user1.png' : $userprofile->image }}" class="img-fluid" alt="User Profile" accept="image/png, image/jpeg" />
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Row end -->
    
    <!-- Row start -->
    <div class="row gutters">
        <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
            <!-- Row start -->
            <div class="row gutters">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <!-- Card start -->
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Update User Profile</div>
                        </div>
                        <div class="card-body">
                        <div class="table-responsive">
                        <form action="{{route('updateUserProfile', $userprofile->id)}}" method="POST" enctype="multipart/form-data">
                            @csrf
                        <div class="form-group">
                                    <!-- Field wrapper start -->
                                    <div class="field-wrapper">
                                        <input type="text" class="form-control" name="name" value="{{$userprofile->name}}">
                                        <div class="field-placeholder">Full Name</div>
                                    </div>
                                    <!-- Field wrapper end -->
                                </div>
                                <div class="form-group">
                                    <!-- Field wrapper start -->
                                    <div class="field-wrapper">
                                        <select name="branch" id="">
                                            <option value="{{$userprofile->branch}}">{{$userprofile->branch}}</option>
                                            @foreach($all_branch as $branch)
                                            <option>{{$branch}}</option>
                                            @endforeach
                                        </select>
                                        <div class="field-placeholder">Assigned Branch</div>
                                    </div>
                                    <!-- Field wrapper end -->
                                </div>
                                <div class="form-group">
                                    <!-- Field wrapper start -->
                                    <div class="field-wrapper">
                                        <input type="email" name="email" class="form-control" value="{{$userprofile->email}}">
                                        <div class="field-placeholder">Email</div>
                                    </div>
                                    <!-- Field wrapper end -->
                                </div>
                                <div class="form-group">
                                    <!-- Field wrapper start -->
                                    <div class="field-wrapper">
                                    <select name="sales_person_category" id="">
                                            <option value="{{$userprofile->sales_person_category}}">{{$userprofile->sales_person_category}}</option>
                                            <option value="Counter">Counter</option>
                                            <option value="Delivery">Delivery</option>
                                            <option value="Drive Thru">Drive Thru</option>
                                        </select>
                                        <div class="field-placeholder">Sales category</div>
                                    </div>
                                    <!-- Field wrapper end -->


                                    <div class="form-group">
                                    <!-- Field wrapper start -->
                                    <div class="field-wrapper">
                                    <select name="role" id="">
                                        <option value="{{$userprofile->role}}">{{$userprofile->role}}</option>
                                        <option value="Accountant">Accountant</option>
                                        <option value="W Manager">Warehouse Manager</option>
                                        <option value="C Manager">Central Kitchen Manager</option>
                                        <option value="S Manager">Satellite Station Manager</option>
                                        <option value="Sales Person">Sales Person</option>
                                        <option value="Waiter">Waiter</option>
                                        <option value="Dispatch Manager">Dispatch Manager</option>
                                        <option value="Retention Officer">Retention Officer</option>
                                        <option value="Call Center">Call Center</option>
                                        <option value="Packaging">Packaging</option>
                                        <option value="Administrator">Administrator</option>
                                        </select>
                                        <div class="field-placeholder">Role</div>
                                    </div>
                                    <!-- Field wrapper end -->
                                </div>
                                </div>



                                <div class="form-group">
                                    <!-- Field wrapper start -->
                                    <div class="field-wrapper">
                                        <input type="file" name="image" class="form-control" id="readUrl">
                                        <div class="field-placeholder">Profile Image</div>
                                    </div>
                                    <!-- Field wrapper end -->
                                </div>


                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                    <label for="">ASSIGNED MULTIPLE BRANCHES</label>
                                    <div class="field-wrapper">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" checked value="{{$userprofile->branch}}" name="assigned[]">
                                            <span><label class="form-check-label" for="checkSms2">{{$userprofile->branch}}</label> <sup class="text-primary">Active</sup></span>
                                        </div>
                                    </div>
                                    @foreach($all_branch_ as $branch)
                                    <!-- Field wrapper start -->
                                    @if($branch->branch_name !== $userprofile->branch)
                                    <div class="field-wrapper">
                                        <div class="form-check form-check-inline">
                                                <input class="form-check-input"  type="checkbox" value="{{$branch->branch_name}}" name="assigned[]">
                                            <label class="form-check-label" for="checkSms2">{{$branch->branch_name}}</label>
                                        </div>
                                    </div>
                                    @endif
                                    @endforeach
                                   
                                </div>
      

                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSmallpassword">Password</button>
                                <!-- <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModalSmallinventory">Assign back office store</button> -->
                                <button class="btn btn-outline-info">Save Changes</button>
                        </form>
                        </div>
                        </div>
                    </div>
                    <!-- Card end -->
                </div>
            </div>
            <!-- Row end -->
        </div>
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
            <!-- Row start -->
            <div class="row gutters">
                <div class="form-group">
                    <!-- Card start -->
                    <div class="stats-tile4 min-height">                                            
                        <div class="stats-icon4">
                            <i class="icon-receipt"></i>
                        </div>
                        <h3></h3>
                        <h4>Income Generated</h4>
                    </div>
                    <!-- Card end -->
                </div>
                <div class="form-group">
                    <!-- Card start -->
                    <div class="stats-tile4 min-height">                                            
                        <div class="stats-icon4">
                            <i class="icon-stars"></i>
                        </div>
                        <h3></h3>
                        <h4>Deliveries Made</h4>
                    </div>
                    <!-- Card end -->
                </div>
             </div>
            </div>
            <!-- Row end -->                                
        </div>
    </div>
    <!-- Row end -->

</div>
<!-- Content wrapper end -->



<!-- Modal start -->
<div class="modal fade" id="exampleModalSmallpassword" tabindex="-1" aria-labelledby="exampleModalSmallTitle" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalSmallTitle">Change Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <form action="{{route('changePasswordUser', $userprofile->id)}}" method="post">
                    @csrf
                    <div class="accordion-body">
                        <div class="field-wrapper">
                            <input type="password" name="password" required>
                            <div class="field-placeholder">New Password</div>
                        </div>
                        <div class="field-wrapper">
                            <input type="password" name="password_confirmation" required>
                            <div class="field-placeholder">Confirm Password</div>
                        </div>
                        <div class="field-wrapper m-0">
                            <button class="btn btn-primary stripes-btn">Save</button>
                        </div>

                    </div>
            </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal end -->




<!-- Modal start -->
<!-- <div class="modal fade" id="exampleModalSmallinventory" tabindex="-1" aria-labelledby="exampleModalSmallTitle" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalSmallTitle">Add to Back Office</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <form action="{{route('AssignStore', $userprofile->id)}}" method="post">
                    @csrf
                    <div class="field-wrapper mb-3">
                        <select class="select-single js-states" name="station" title="Select Term" data-live-search="true">
                        <option value="ACCRA WAREHOUSE">ACCRA WAREHOUSE</option>
                            @foreach($warehouses as $warehouse)
                            <option>{{$warehouse->warehouse_name}}</option>
                            @endforeach
                            @foreach($kitchens as $kitchen)
                            <option>{{$kitchen->kitchen_name}}</option>
                            @endforeach
                        </select>

                            @error('role')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <div class="field-placeholder">Store</div>
                    </div>

                    <div class="field-wrapper mb-3">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
            </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div> -->
<!-- Modal end -->


<script>
        document.getElementById('readUrl').addEventListener('change', function(){
            if (this.files[0] ) {
                var picture = new FileReader();
                picture.readAsDataURL(this.files[0]);
                picture.addEventListener('load', function(event) {
                document.getElementById('uploadedImage').setAttribute('src', event.target.result);
                document.getElementById('uploadedImage').style.display = 'block';
                });
            }
            });
    </script>


@endsection