@extends('front.procurement.layout.app')
@section('content')


<style>
ul.align-center.flex-wrap.flex-sm-nowrap.gx-4.gy-2 {
    text-align: center;
    display: flex;
    justify-content: center;
}
.btn-div {
    text-align: center;
    margin-top: 40px;
}
button.btn {
    background: #011452;
    color: #fff;
    padding: 10px 35px;
}
textarea.form-control, .dual-listbox textarea.dual-listbox__search {
    min-height: 225px;
    padding-top: 0.65625rem;
}
</style>

<div class="nk-app-root">
    <!-- main @s -->
    
    <div class="nk-main">
        <div class="nk-content">
            <div class="container-fluid">
                <div class="nk-content-inner">
                    <div class="nk-content-body">
                        
                        <div class="nk-block-head nk-block-head-sm">
                            <div class="nk-block-between g-3">
                                <div class="nk-block-head-content">
                                    <h3 class="nk-block-title page-title">Organization / <strong
                                            class="text-primary small">{{ !empty($getUser->organization_name) ? $getUser->organization_name : ''  }}</strong></h3>
                                </div>
                                <div class="nk-block-head-content">
                                    
                                    <a href="javascript:;"
                                        class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none"><em
                                            class="icon ni ni-arrow-left"></em></a>
                                </div>
                            </div>
                        </div><!-- .nk-block-head -->
                        
                        
                        <div class="nk-block">
                            <div class="card card-bordered">
                                <div class="card-aside-wrap">
                                    <div class="card-content">
                                        <div class="card-inner card-inner-lg">
                                            <div class="nk-block-head nk-block-head-lg">
                                                <div class="nk-block-between">
                                                    <div class="nk-block-head-content">
                                                        <h4 class="nk-block-title">Personal Information</h4>
                                                        <div class="nk-block-des">
                                                            <!--<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>-->
                                                        </div>
                                                    </div>
                                                    <div class="nk-block-head-content align-self-start d-lg-none">
                                                        <a href="javascript:;"
                                                            class="toggle btn btn-icon btn-trigger mt-n1"
                                                            data-target="userAside"><em
                                                                class="icon ni ni-menu-alt-r"></em></a>
                                                    </div>
                                                </div>
                                            </div><!-- .nk-block-head -->
                                            <div class="nk-block">
                                                <div class="nk-data data-list">
                                                    <div class="data-head">
                                                        <h6 class="overline-title">Basics</h6>
                                                    </div>
                                                    <div class="data-item py-1" >
                                                        <div class="data-col">
                                                            <span class="data-label">Profile Image </span>
                                                            <div><img src="{{ $getUser->image ? asset($getUser->image) : asset('assets/dummy.jpg') }}" class="" style="height: 53px; width: 53px;
                                                            object-fit: cover; border-radius: 50%;" alt=""></div>
                                                        </div>
                                                        <div class="data-col data-col-end"><span class="data-more"><em
                                                                    class="icon ni ni-forward-ios"></em></span>
                                                        </div>
                                                    </div>
                                                    <div class="data-item" >
                                                        <div class="data-col">
                                                            <span class="data-label">Organization Name </span>
                                                            <span class="data-value">{{ !empty($getUser->organization_name) ? $getUser->organization_name : ''  }}</span>
                                                        </div>
                                                        <div class="data-col data-col-end"><span class="data-more"><em
                                                                    class="icon ni ni-forward-ios"></em></span>
                                                        </div>
                                                    </div>
                                                    <div class="data-item">
                                                        <div class="data-col">
                                                            <span class="data-label">Email</span>
                                                            <span class="data-value">{{ !empty($getUser->email) ? $getUser->email : ''  }}</span>
                                                        </div>
                                                        <div class="data-col data-col-end"><span
                                                                class="data-more disable"><em
                                                                    class="icon ni ni-lock-alt"></em></span>
                                                        </div>
                                                    </div><!-- data-item -->
                                                    <div class="data-item" >
                                                        <div class="data-col">
                                                            <span class="data-label">Organization Website </span>
                                                            <span class="data-value text-soft">{{ !empty($getUser->website) ?  $getUser->website : '' }}</span>
                                                        </div>
                                                        <div class="data-col data-col-end"><span class="data-more"><em
                                                                    class="icon ni ni-forward-ios"></em></span>
                                                        </div>
                                                    </div><!-- data-item -->
                                                    
                                                    <div class="data-item">
                                                        <div class="data-col">
                                                            <span class="data-label">State</span>
                                                            <span class="data-value">{{ !empty($getUser->state->name) ? $getUser->state->name : '' }}</span>
                                                        </div>
                                                        <div class="data-col data-col-end"><span class="data-more"><em
                                                                    class="icon ni ni-forward-ios"></em></span>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="data-item">
                                                        <div class="data-col">
                                                            <span class="data-label">Address</span>
                                                            <span class="data-value">{{ !empty($getUser->address) ? $getUser->address : '' }}</span>
                                                        </div>
                                                        <div class="data-col data-col-end"><span class="data-more"><em
                                                                    class="icon ni ni-forward-ios"></em></span>
                                                        </div>
                                                    </div>
                                                   
                                                </div><!-- data-list -->

                                            </div><!-- .nk-block -->
                                            
                                            <div class="btn-div">
                                                <button class="btn w-100 d-flex justify-content-center" id="update-profile" data-id="{{ Auth::guard('procurement')->user()->id }}">Edit Profile</button>
                                                <!--<button class="btn" data-toggle="modal" data-target="#profile-edit">Edit Profile</button>-->
                                            </div>
                                        </div>
                                    </div><!-- .card-content -->
                                    
                                    <div class="card-aside card-aside-right user-aside toggle-slide toggle-slide-right toggle-break-xxl"
                                        data-content="userAside" data-toggle-screen="xxl" data-toggle-overlay="true"
                                        data-toggle-body="true">
                                        <div class="card-inner-group" data-simplebar>
                                            <div class="card-inner">
                                                <div class="user-card user-card-s2">
                                                    <div class="">
                                                    <div><img src="{{ asset($getUser->image) }}" class="" style="height: 110px; width: 110px;
                                                            object-fit: cover; border-radius: 50%;" alt=""></div>
                                                    </div>
                                                    <div class="user-info">
                                                        <div class="badge badge-outline-light badge-pill ucap">
                                                            {{ !empty($getUser->name) ? $getUser->name : ''  }}</div>
                                                        <h5>{{ !empty($getUser->organization_name) ? $getUser->organization_name : ''  }}</h5>
                                                        <span class="sub-text">{{ !empty($getUser->email) ? $getUser->email : ''  }}</span>
                                                    </div>
                                                </div>
                                            </div><!-- .card-inner -->

                                            <!-- .card-inner -->
                                            <div class="card-inner">
                                                <div class="row text-center">
                                                    <div class="col-12">
                                                        <div class="profile-stats">
                                                            <span class="amount">{{ $getUser->organizations->count() }}</span>
                                                            <span class="sub-text">Total Services</span>
                                                        </div>
                                                    </div>
                                                   
                                                </div>
                                            </div><!-- .card-inner -->
                                            <div class="card-inner">
                                                <h6 class="overline-title-alt mb-2">Additional</h6>
                                                <div class="row g-3">
                                                    
                                                    <div class="col-6">
                                                        <span class="sub-text">Organization Name:</span>
                                                        <span>{{ !empty($getUser->organization_name) ? $getUser->organization_name : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Email:</span>
                                                        <span>{{ !empty($getUser->email) ? $getUser->email : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Website:</span>
                                                        <span class="lead-text text-success">{{ !empty($getUser->website) ? $getUser->website : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Phone:</span>
                                                        <span>+{{ !empty($getUser->number) ? $getUser->number : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">State:</span>
                                                        <span>{{ !empty($getUser->state->name) ? $getUser->state->name : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Address:</span>
                                                        <span>{{ !empty($getUser->address) ? $getUser->address : ''  }}</span>
                                                    </div>

                                                </div>
                                            </div>
                                            
                                        </div><!-- .card-inner -->
                                    </div><!-- .card-aside -->
                                </div><!-- .card-aside-wrap -->
                            </div><!-- .card -->
                        </div><!-- .nk-block -->
                        
                    </div>
                </div>
            </div>
        </div>
        
        
        <!-- @@ Profile Edit Modal @e -->
        
        
        <div class="modal fade" tabindex="-1" role="dialog" id="profile-edit">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <a href="javascript:;" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-body modal-body-lg">
                        <h5 class="title">Update Profile</h5>
                        <ul class="nk-nav nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#personal">Personal</a>
                            </li>

                        </ul><!-- .nav-tabs -->
                        
                        <div class="tab-content">
                            <div class="tab-pane active" id="personal">
                            <form action="{{ route('service.updateProfile') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row gy-2">
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="full-name">Organization Name</label>
                                            <input type="text" name="organization_name" id="organization_name"  class="form-control form-control-lg" 
                                               placeholder="Enter Organization Name"  value="">
                                            
                                            <input type="hidden" name="id" id="user_id"  class="form-control form-control-lg" 
                                                value="" placeholder="Enter Organization Name">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="phone-no">Email</label>
                                            <input type="text" name="email" class="form-control form-control-lg" id="email"
                                                placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="fw-nationality">Organization Services</label>
                                            <div class="form-control-wrap ">
                                                <div class="form-control-select">
                                                    <select class="form-control required" id="js-select2-multiple" multiple="multiple" data-msg="Required"
                                                        id="department" name="department_id[]" required>
                                                        @if(isset($departments))
                                                        @foreach($departments as $department)
                                                        <option value="{{ $department->id }}"
                                                            @if(in_array($department->id, Auth::guard('procurement')->user()->organizations->pluck('departments.*.id')->collapse()->toArray())) selected @endif>
                                                            {{ ucfirst($department->department_name) }}
                                                        </option>
                                                        @endforeach
                                                        @endif

                                                    </select>
                                                    <span class="text-danger" id="department-error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="fw-nationality">Organization
                                                Type</label>
                                            <div class="form-control-wrap ">
                                                <div class="form-control-select">
                                                    <select class="form-control required" data-msg="Required"
                                                        id="organization_type" name="organization_type" required>
                                                        @if(count($organization_types) > 0)
                                                        @foreach($organization_types as $type)
                                                        <option value="{{ $type->name }}" {{ Auth::guard('procurement')->user()->organization_type == $type->name ? 'selected' : '' }}>{{
                                                            ucfirst($type->name) }}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    <span class="text-danger" id="organization_types-error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="fw-nationality">Organization Size</label>
                                            <div class="form-control-wrap ">
                                                <div class="form-control-select">
                                                    <select class="form-control required" data-msg="Required"
                                                        id="experience" name="organization_size" required>
                                                        <option value="" selected disabled>Organization size
                                                        </option>
                                                        @if(count($ogranization_scopes) > 0)
                                                        @foreach($ogranization_scopes as $scope)
                                                        <option value="{{ $scope->name }}" {{ Auth::guard('procurement')->user()->organization_size == $scope->name ? 'selected' : '' }}>{{ ucfirst($scope->name)
                                                            }} </option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    <span class="text-danger" id="experience-error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="fw-nationality">Years in Business</label>
                                            <div class="form-control-wrap ">
                                                <div class="form-control-select">
                                                    <select class="form-control required" data-msg="Required"
                                                        id="years_business" name="years_in_business" required>
                                                        <option value="" disabled>Select years</option>
                                                        <option value="0-5" {{ Auth::guard('procurement')->user()->years_in_business == '0-5' ? 'selected' : '' }}>0-5</option>
                                                        <option value="5-10" {{ Auth::guard('procurement')->user()->years_in_business == '5-10' ? 'selected' : '' }}>5-10</option>
                                                        <option value="10+" {{ Auth::guard('procurement')->user()->years_in_business == '10+' ? 'selected' : '' }}>over a decade (10+)</option>
                                                    </select>
                                                    <span class="text-danger" id="experience-error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">Organization Information</label>
                                            <textarea type="text" name="desc" class="form-control form-control-lg "
                                                id="desc" placeholder="Enter your Description"></textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-12 mt-5"> <h4>Other Information</h4> </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="full-name">Profile Picture</label>
                                            <input type="file" id="photo" name="photo" class="form-control form-control-lg" 
                                                value="" placeholder="">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">Organization Website</label>
                                            <input type="text" name="url" class="form-control form-control-lg "
                                                id="url" placeholder="Enter your Website">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">Number</label>
                                            <input type="text" name="number" class="form-control form-control-lg "
                                                id="number" placeholder="Enter your Number">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">State</label>
                                            <select name="state_id" id="state_id" class="form-control form-control-lg ">
                                                <option value="" selected disabled>State</option>
                                                @foreach($states as $state)
                                                <option value="{{ $state->id }}" {{ $getUser->state_id === $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">Address</label>
                                            <input type="text" name="address" class="form-control form-control-lg "
                                                id="address" placeholder="Enter your Address">
                                        </div>
                                    </div>
                                    

                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="birth-day">Past Clients (Optional)</label>
                                            <textarea type="text" name="past_clients" class="form-control form-control-lg "
                                                id="past_clients" placeholder="Enter Details"></textarea>
                                        </div>
                                    </div>
                                   
                                    <div class="col-12 mt-3">
                                        <ul class=" align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                            <li class="">
                                                <button type="submit" class="btn btn-lg btn-primary">Update Profile</button>
                                            </li>
                                            <li>
                                                <a href="javascript:;" data-dismiss="modal"
                                                    class="link link-light">Cancel</a>
                                            </li>
                                        </ul>
                                    </div>
                                    
                                </div>
                                 
                            </form>    
                            </div><!-- .tab-pane -->
                        </div><!-- .tab-content -->
                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div><!-- .modal -->

    @section('script')
    
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     
    <script>
        $(document).ready(function() {
            $('#js-select2-multiple').select2();
        });
    </script>
    
    <script>
        $(document).ready(function() {
            $('#js-select2-multiple').select2({
                placeholder: 'Select Service Category',
                allowClear: true // Enables the "clear" button
                // Other options...
            });
        });
    </script>
    
        <script>
        
            $(document).ready(function(){
                $('#update-profile').click(function(e){
                    e.preventDefault();
                    var id = $(this).data('id');
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                     $.ajax({
                        url: "{{ route('service.getUserInfo') }}",
                        method: 'POST',
                        data:{id,id},
                        success: function(data) {
                            if(data.status == true){
                                $('#organization_name').val(data.info.organization_name);
                                $('#user_id').val(data.info.id);
                                // $('#photo').val(data.info.image);
                                $('#email').val(data.info.email);
                                $('#url').val(data.info.website);
                                $('#address').val(data.info.address);
                                $('#number').val(data.info.number);
                                $('#desc').val(data.info.desc);
                                $('#past_clients').val(data.info.past_clients);
                                $('#profile-edit').modal('show'); 
                                
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                                      
                });
            });
            
        </script>
        
    @endsection
@endsection