@extends('layouts.admin')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@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>REPRESENTATIVE / LIST</h3>
						</div>

					</div>
				
@include('components.admin.error-message')
			        <div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                   <button  data-bs-target="#addModalMd" data-bs-toggle="modal" class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
                   <button  class="btn btn-primary delete_multiple" data-name=" Delete selected representative  and would remove it from the artist" data-url="{{route('admin.representative.delete.multiple')}}"><i class="fa fa-trash"></i> Delete Multiple</button>
                   <div class="modal fade" id="addModalMd" 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">Add New Representative</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.representative.add') }}" method="post" enctype="multipart/form-data">
    @csrf

    <div class="row">
      <div class="mb-3 col-md-12">
            <label class="form-label" for="inputCompany">Company <span class="requiredb">*</span></label>
            <select name="company" id="inputCompany"  class="form-control">
                @forelse($companies as $company)
                <option value="{{$company->id}}">{{$company->name}}</option>
                @empty
                @endforelse
            </select>
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputType">Type <span class="requiredb">*</span></label>
            <select name="type" id="inputType"  class="form-control">
                @forelse($types as $type)
                <option value="{{$type->id}}">{{$type->title}}</option>
                @empty
                @endforelse
            </select>
        </div>

        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputTitle">Name <span class="requiredb">*</span></label>
            <input type="text" class="form-control" id="inputTitle" placeholder="Name" name="name" />
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputEmail">Email </label>
            <input type="text" class="form-control" id="inputEmail" placeholder="Email" name="email" />
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputPhone">Phone</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Phone" name="phone" />
        </div>

       
    </div>

    <div class="row">
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputAddress">Address</label>
            <textarea class="form-control" id="inputAddress" name="address"></textarea>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputPhone">City</label>
            <input type="text" class="form-control" id="inputCity" placeholder="City" name="city" />
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputState">State</label>
            <input type="text" class="form-control" id="inputState" placeholder="State" name="state" />
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputCountry">Country</label>
            <select class="form-control" name="country" id="inputContry">
               {!! get_country_select_html() !!}
                
            </select>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputDescription">Description</label>
            <textarea class="form-control" id="inputDescription" name="description"></textarea>
        </div>
    </div>
<div class="mb-3 col-md-12">
                <label class="form-label" for="inputStatus">Status <span class="requiredb">*</span></label>
                <select class="form-control" id="inputStatus" name="status" required>
                   {!! status_select_options() !!}
                </select>
            </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">Add Representative</button>
    </div>
</form>


            </div>
            
        </div>
    </div>
</div>
                </div>
                <h5 class="card-title mb-0">ARTISTS</h5>
            </div>
            <div class="card-body tableRes">
                <table class="table table-responsive table-striped" style="width: 100%;">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll"/></th>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>Contact</th>
                            <th>Company</th>
                            
                            <th>Type</th>
                            <th class="">STATUS</th>
                            <th class="">DATE</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                   @if(!empty($representatives))
                   
                                @for($i = 0; $i < count($representatives); $i++)
                        <tr class="@if($i % 2 == 0 ) odd @else even @endif">
                            <td tabindex="0"><input type="checkbox" class="checkItem" name="ids[]" value="{{$representatives[$i]->id}}" /></td>
                            <td>
                                <div class="d-flex justify-content-start align-items-center user-name">
                               
                                    <div class="d-flex flex-column">
                                        <a class="text-body text-truncate"><span class="fw-semibold">{{$representatives[$i]->name}} </span></a>
                                    </div>
                                </div>
                            </td>
                            <td>{{$representatives[$i]->slug}}</td>
                            <td>{{$representatives[$i]->email}} <br/>
                            <small>{{$representatives[$i]->phone}}</small>
                            </td>
                           <td>{{$representatives[$i]->dcompany?->name}}</td>
                           <td>{{$representatives[$i]->dtype?->title}}</td>
                            <td>{!! status_badge($representatives[$i]->status) !!}</td>
                            <td>{{\Carbon\Carbon::parse($representatives[$i]->created_at)->toDayDateTimeString()}}</td>
                            <td>
                                <div class="d-inline-flex text-nowrap">
                                    <a data-bs-target="#editModalMd{{$representatives[$i]->id}}" data-bs-toggle="modal" class="btn btn-sm btn-icon">
                                    <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-edit align-middle me-2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                                    </a>
                                    <button class="btn btn-sm btn-icon delete_data" data-name=" representative ({{$representatives[$i]->name}})" data-url="{{route('admin.representative.delete' , $representatives[$i]->id)}}">
                                        <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-trash-2 align-middle me-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                    </button>
                                 
                                </div>
                            </td>
                        </tr>
                        <div class="modal fade" id="editModalMd{{$representatives[$i]->id}}" 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 Representative({{$representatives[$i]->name}})</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.representative.edit') }}" method="post" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="representative_id" value="{{$representatives[$i]->id}}" />
    <div class="row">
      <div class="mb-3 col-md-12">
            <label class="form-label" for="inputCompany">Company <span class="requiredb">*</span></label>
            <select name="company" id="inputCompany"  class="form-control">
                @forelse($companies as $company)
                <option value="{{$company->id}}" {{__getSelected($representatives[$i]->company , $company->id)}}>{{$company->name}}</option>
                @empty
                @endforelse
            </select>
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputType">Type <span class="requiredb">*</span></label>
            <select name="type" id="inputType"  class="form-control">
                @forelse($types as $type)
                <option value="{{$type->id}}" {{__getSelected($representatives[$i]->type , $type->id)}}>{{$type->title}}</option>
                @empty
                @endforelse
            </select>
        </div>

        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputTitle">Name <span class="requiredb">*</span></label>
            <input type="text" class="form-control" id="inputTitle" placeholder="Name" name="name" value="{{$representatives[$i]->name}}" />
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputEmail">Email </label>
            <input type="text" class="form-control" id="inputEmail" placeholder="Email" name="email" value="{{$representatives[$i]->email}}" />
        </div>
        
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputPhone">Phone</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Phone" name="phone"  value="{{$representatives[$i]->phone}}" />
        </div>

       
    </div>

    <div class="row">
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputAddress">Address</label>
            <textarea class="form-control" id="inputAddress" name="address">{{$representatives[$i]->address}}</textarea>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputPhone">City</label>
            <input type="text" class="form-control" id="inputCity" placeholder="City" name="city" value="{{$representatives[$i]->city}}" />
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputState">State</label>
            <input type="text" class="form-control" id="inputState" placeholder="State" name="state" value="{{$representatives[$i]->state}}" />
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputCountry">Country</label>
            <select class="form-control" name="country" id="inputContry">
               {!! get_country_select_html($representatives[$i]->country) !!}
                
            </select>
        </div>
        <div class="mb-3 col-md-12">
            <label class="form-label" for="inputDescription">Description</label>
            <textarea class="form-control" id="inputDescription" name="description">{{$representatives[$i]->description}}</textarea>
        </div>
    </div>
<div class="mb-3 col-md-12">
                <label class="form-label" for="inputStatus">Status <span class="requiredb">*</span></label>
                <select class="form-control" id="inputStatus" name="status" required>
                   {!! status_select_options($representatives[$i]->status ?? null) !!}
                </select>
            </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">Update Representative</button>
    </div>
</form>


            </div>
            
        </div>
    </div>
</div>
                         @endfor
                                @endif
                        
                    </tbody>
                </table>
                
                {{$representatives->links()}}
            </div>
        </div>
    </div>

</div>



				</div>
			</main>

@endsection

@section('script')
<!-- Tom Select CSS -->
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">

<!-- Tom Select JS -->
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

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

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