@extends('layouts.admin')

@section('content')

            <main class="content">
				<div class="container-fluid p-0">

					<div class="row mb-2 mb-xl-3">
						<div class="col-auto d-none d-sm-block">
							<h3>ARTIST Details</h3>
							<p><a href='{{route("admin.artist.index")}}'>Back to All Artist</a></p>
						</div>

					</div>
				
@include('components.admin.error-message')
			 
<div class="row">
    <div class="col-md-4 col-xl-3">
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Profile Details</h5>
            </div>
            <div class="card-body text-center">
                <img src="{{secure_url('celebrity')}}/{{$artist->avatar}}" alt="{{$artist->name}}" class="img-fluid rounded-circle mb-2" width="128" height="128" />
                <h5 class="card-title mb-0">{{$artist->name}}</h5>
                <div class="text-muted mb-2">{{$artist->categoryType?->name}}</div>

         
            </div>
            
            <hr class="my-0" />
            <div class="card-body">
                <h5 class="h6 card-title">About</h5>
                <ul class="list-unstyled mb-0">
                    
                    <li class="mb-1">
                      
                        DOB: <a>{{$artist->date_of_birth}} ({{$artist->age() . " years"}})</a>
                    </li>
                    <li class="mb-1">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail align-middle me-2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                        EMAIL: {{$artist->email ?? 'N/A'}}
                    </li>
                    <li class="mb-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone align-middle me-2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                        PHONE: {{$artist->phone ?? 'N/A'}}
                    </li>
                    <li class="mb-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone align-middle me-2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                        GENDER: {{$artist->gender ?? 'N/A'}}
                    </li>
                    <li class="mb-1">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            class="feather feather-home feather-sm me-1"
                        >
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        Country: <a>{{get_country_three_abbr($artist->country)}}</a>
                    </li>
                    <li class="mb-1">
                        <svg
                            xmlns="http://www.w3.org/2000/svg" 
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            class="feather feather-home feather-sm me-1"
                        >
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        Place of Birth: <a> {{$artist->placeOfBirth()}}</a>
                    </li>
                    
                    <li class="mb-1">
                        
                        Social Media: <br/> <b>Facebook:</b> Username - {{$artist->username('facebook')}} Total - {{getSocialsFollowers($artist->socials , 'facebook')}}
                        <br/> <b>Instagram:</b> Username - {{$artist->username('instagram')}} Total - {{getSocialsFollowers($artist->socials , 'instagram')}}
                        <br/> <b>Twitter:</b> Username - {{$artist->username('twitter')}} Total - {{getSocialsFollowers($artist->socials , 'twitter')}}
                        <br/> <b>TikTok:</b> Username - {{$artist->username('tiktok')}} Total - {{getSocialsFollowers($artist->socials , 'tiktok')}}
                    </li>

                    
                    <li class="mb-1">
                        <div class="">{!! status_badge($artist->status) !!}</div>
                    </li>
                </ul>
            </div>
            <hr class="my-0" />
            <div class="card-body">
                <h5 class="h6 card-title">Actions</h5>
                <ul class="list-unstyled mb-0">
                    <li class="mb-1">
                        <button href="#" class="btn  btn-secondary mt-1" data-bs-target="#editModalMd" data-bs-toggle="modal">
   
    Edit Profile
</button>
</li>

                  <li class="mb-1">
                        <button href="#" class="btn  btn-secondary mt-1" data-bs-target="#socialModalMd" data-bs-toggle="modal">
   
    Edit Social
</button>
</li>

     
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-8 col-xl-9">
        <div class="card">
            <div class="my-3 mx-3">
								
										<a role="button" href="{{route('admin.artist.team' , [$artist->id , 'manager'])}}" class="btn btn-secondary">Representative</a>
										<a role="button" href="" class="btn btn-secondary">Philantropy</a>
										<a role="button" href="" class="btn btn-secondary">Endorsement</a>
										<a role="button" href="" class="btn btn-secondary">Followers</a>
									
									</div>
            <div class="card-header">
                <h5 class="card-title mb-0">Managers</h5>
            </div>
            <div class="card-body h-100">
               <table class="table table-responsive table-striped" style="width: 100%;">
    <thead>
        <tr>
            <th>ID</th>
        
            <th>Type </th>
            <th class="">Amount</th>
            <th class="">Status</th>
            <th class=""></th>
            
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

                <hr />
                <div class="d-grid">
                    <a href="" class="btn btn-primary">Load more</a>
                </div>
            </div>
        </div>
    </div>
</div>



				</div>
			</main>
<div class="modal fade" id="editModalMd" tabindex="-1" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body m-3">
               <form action="{{route('admin.artist.edit')}}" enctype="multipart/form-data" method="post">
                   @csrf
                   <input type="hidden" value="{{$artist->id}}" name="gixd" /> 
    <div class="row">
        <div class="mb-3 col-md-12">
            <label class="form-label" for="selectStatus">Type</label>
            <select id="selectStatus" class="form-control" name="type">
              
                @forelse($types as $type)
                <option {{__getSelected($type->id, $artist->type)}} value='{{$type->id}}'>{{$type->name}}</option>
                @empty
                
                @endforelse
            </select>
    </div>
    <div class="mb-3 col-md-12">
            <label class="form-label" for="selectCategory">Category</label>
            <select id="selectCategory" class="form-control" name="categories[]" multiple>
                @forelse($categories as $category)
                    <option value="{{ $category->id }}" @if(!empty($artist_categories) && in_array($category->id, $artist_categories)) selected @endif>{{ $category->name }}</option>
                @empty
                    <option disabled>No categories available</option>
                @endforelse
            </select>
        </div>
     <div class="mb-3 col-md-12">
            <label class="form-label" for="inputAvatar">Avatar</label>
            <input type="file" class="form-control" id="inputAvatar" placeholder="Avatar" name="avatar" />
        </div>
        <div class="mb-3 col-md-6">
            <label class="form-label" for="inputName">Name</label>
            <input type="text" class="form-control" id="inputName" placeholder="Name" name="name" value="{{$artist->name}}" />
        </div>
        <div class="mb-3 col-md-6">
            <label class="form-label" for="inputEmail">Email</label>
            <input type="text" class="form-control" id="inputEmail" placeholder="Email" name="email" value="{{$artist->email}}" />
        </div>
    </div>
    <div class="row">
        <div class="mb-3 col-md-6">
            <label class="form-label" for="inputPhone">Phone Number</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Phone" name="phone" value="{{$artist->phone}}" />
        </div>
        <div class="mb-3 col-md-6">
            <label class="form-label" for="inputPhone">Gender</label>
          
            <select class="form-control" name="gender" id="inputContry">
               {!! __genderSelect($artist->gender) !!}
                
            </select>
            
        </div>
        <div class="mb-3 col-md-6">
            <label class="form-label" for="inputPhone">Date of Birth</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Date of Birth" name="dob" value="{{$artist->date_of_birth}}" />
        </div>
        
    </div>
    <div class="mb-3 col-md-12">
            <label class="form-label" for="inputAddress">Country</label>
            <select class="form-control" name="country" id="inputContry">
               {!! get_country_select_html($artist->country) !!}
                
            </select>
            
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputPlaceOfBirth">Place of Birth (Address, state)</label>
            <input type="text" class="form-control" id="inputPlaceOfBirth" name="birthaddress" value="{{$artist->place('address')}}" />
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputPlaceOfBirthContry">Place of Birth (Country)</label>
            <select class="form-control" name="birthcountry" id="inputPlaceOfBirthContry">
               {!! get_country_select_html($artist->place('country')) !!}
                
            </select>
        </div>
   
   <div class="row">
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputDescription">Contact Summary</label>
            <textarea class="form-control" id="inputDescription" name="c_summary">{{$artist->contact_summary}}</textarea>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputDescription">Endorsement Summary</label>
            <textarea class="form-control" id="inputDescription" name="e_summary">{{$artist->endorsement_summary}}</textarea>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputDescription">Charity Summary</label>
            <textarea class="form-control" id="inputDescription" name="ch_summary">{{$artist->charity_summary}}</textarea>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputDescription">Description</label>
            <textarea class="form-control" id="inputDescription" name="descr">{{$artist->description}}</textarea>
        </div>
    </div>
    
    <div class="row">
    
    
     <div class="mb-3 col-md-12">
            <label class="form-label" for="selectStatus">Status</label>
            <select id="selectStatus" class="form-control" name="stats">
                {!! status_select_options($artist->status ?? null) !!}
            </select>
    </div>
    </div>
    
    
    
   
    <div class="d-flex justify-content-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
     
</form>

            </div>
            
        </div>
    </div>
</div>

<div class="modal fade" id="socialModalMd" tabindex="-1" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body m-3">
               <form action="{{route('admin.artist.socials')}}" method="post">
                   @csrf
                   <input type="hidden" value="{{$artist->id}}" name="gixd" /> 
@foreach($artist->socials as $platform=>$values)
    <div class="row">
        <p class="fw-bold">{{ ucfirst($platform) }}:</p>

        <div class="mb-3 col-md-12">
            <label class="form-label" for="p-{{ $platform }}-stats">Enable Stats</label>
            <select class="form-control" name="p[{{ $platform }}][stats]" id="p-{{ $platform }}-stats">
                <option value="yes" {{__getSelected('yes' , $values['status'])}}>Yes</option>
                <option value="no" {{__getSelected('no' , $values['status'])}}>No</option>
            </select>
        </div>

        <div class="mb-3 col-md-6">
            <label class="form-label" for="p-{{ $platform }}-username">Username</label>
            <input type="text" class="form-control" id="p-{{ $platform }}-username" placeholder="Username"
                   name="p[{{ $platform }}][username]" value="{{$values['username']}}" />
        </div>

        <div class="mb-3 col-md-6">
            <label class="form-label" for="p-{{ $platform }}-total">Total</label>
            <input type="text" class="form-control" id="p-{{ $platform }}-total" placeholder="Total"
                   name="p[{{ $platform }}][total]" value="{{$values['followers']}}" />
        </div>
    </div>
@endforeach



    </div>
    
    
    
   
    <div class="d-flex justify-content-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
     
</form>
 </div>
            </div>
            
        </div>
    </div>
</div>






@endsection

@section('script')
    <script>
	    $('body').on('click' ,'.edit-kyc', function(){
         let t = $(this).attr('data-type');  
         let i = $(this).attr('data-id'); 
         let url = "{{secure_url('admin/user/kycaction')}}/"+t+"/"+i;
        console.log(url);

        if (confirm('are you sure want to  '+t+' KYC?')) {

            window.location.href = url;
            

        }
        })
        
      
	</script>



<script>
document.addEventListener('DOMContentLoaded', function () {
    new TomSelect("#selectCategory", {
        plugins: ['remove_button'],
        create: false, // allow creating new items like skills
        persist: false,
        placeholder: "Type to search or add categories...",
        maxItems: null, // unlimited selection
        closeAfterSelect: false,
    });
});
</script>


@endsection