@extends('front.user-dash.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;
}
</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($user->organization_name) ? $user->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="{{ asset($user->image) }}" 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($user->organization_name) ? $user->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($user->email) ? $user->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($user->website) ?  $user->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($user->state->name) ? $user->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($user->address) ? $user->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($user->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($user->name) ? $user->name : ''  }}</div>
                                                        <h5>{{ !empty($user->name) ? $user->organization_name : ''  }}</h5>
                                                        <span class="sub-text">{{ !empty($user->email) ? $user->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">{{ $user->projects->count() }}</span>
                                                            <span class="sub-text">Total Projects</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($user->name) ? $user->organization_name : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Email:</span>
                                                        <span>{{ !empty($user->email) ? $user->email : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Website:</span>
                                                        <span class="lead-text text-success">{{ !empty($user->website) ? $user->website : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Phone:</span>
                                                        <span>+{{ !empty($user->number) ? $user->number : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">State:</span>
                                                        <span>{{ !empty($user->state->name) ? $user->state->name : ''  }}</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <span class="sub-text">Address:</span>
                                                        <span>{{ !empty($user->address) ? $user->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('project.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="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="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-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 }}" {{ $user->state_id === $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <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">Description</label>
                                            <input type="text" name="desc" class="form-control form-control-lg "
                                                id="desc" placeholder="Enter your Description">
                                        </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 -->
@endsection
    
@section('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('project.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);
                            
                            $('#profile-edit').modal('show'); 
                            
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
                                  
            });
        });
        
    </script>
    
@endsection