@extends('layouts.project-form-base', ['title' => 'Team member', 'formTitle' => isset($form_title) ? $form_title : 'Add New Team Member', 'back' =>  old('redirect_to', url()->previous()), 'custom_class' => 'add_extended_pro' ])

@section('content')
{{-- @section('css')
<style>
    #wrapper {
        padding: 0px;
    }

    .material-icons {
        cursor: pointer !important;
    }

    .custom-color .output-color span {
        background: #fff;
    }
</style>
@endsection --}}
<div class="Add_Project new-member pt-10">
    <div class="custom-container py-4">
        <div class="rb-heading">
            @if ( isset($selected_role) && is_object($selected_role) )
            <h2 class="font-size-28">Add New {{ $selected_role->name }}</h2>
            @else
            <h2 class="font-size-28">Add New team member</h2>
            @endif
        </div>
        <h2 class="theme-heading mb-22">
            Basic Information
        </h2>
        @if(isset($user))
        <form method="POST" action="{{ getRoute('team.update', $user->id) }}">
            @method('PUT')
            @else
            <form method="POST" action="{{ getRoute('team.store') }}">
                @endif
                @csrf
                <input type="hidden" name="redirect_to" value="{{ old('redirect_to', url()->previous())}}">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="" class="popup-form-label">{{ __('First Name') }}</label>
                            <input id="first_name" name="first_name" type="text" class="form-control @error('first_name') is-invalid @enderror custm-form-control" placeholder="Enter First name" value="{{ old('first_name', $user->first_name ?? '' ) }}" required autocomplete="first_name" autofocus>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="" class="popup-form-label">{{ __('Last Name') }}</label>
                            <input id="last_name" name="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror custm-form-control" placeholder="Enter Last name" value="{{ old('last_name', $user->last_name ?? '') }}" required autocomplete="last_name" autofocus>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>


                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label for="" class="popup-form-label">{{ __('Email') }}</label>
                            <input type="email" id="email" class="form-control custm-form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email', $user->email ?? '') }}" required autocomplete="email" placeholder="Enter email address">
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label for="" class="popup-form-label">{{ __('Phone Number') }}</label>
                            <input name="phone_number" type="tel" pattern="[0-9 +]{1,}" oninvalid="this.setCustomValidity('Please enter valid phone number ex: 802256674')" oninput="this.setCustomValidity('')" maxlength="14" minlength="10" class="form-control custm-form-control @error('phone_number') is-invalid @enderror" placeholder="Enter Phone Number" value="{{ old('phone_number', $user->phone_number ?? '') }}" required autocomplete="phone_number">
                            @error('phone_number')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    @if(!isset($user))

                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="" class="popup-form-label">{{ __('Password') }}</label>
                            <div class="password-field">
                                <input id="password" type="Password" class="form-control custm-form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" placeholder="Enter password">

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

                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="" class="popup-form-label">{{ __('Confirm Password') }}</label>
                            <div class="">
                                <input id="password-confirm" type="Password" class="form-control custm-form-control @error('password') is-invalid @enderror" name="password_confirmation" required placeholder="Re-enter password">
                            </div>
                        </div>
                    </div>
                    @endif
                </div>

  

                @if( !getUser()->hasAnyRole('Company') )
                <div class="brand-selection">
                    <h2 class="theme-heading mt-4 d-flex justify-content-between">
                        <span>{{ __('Brands Selection') }}</span> <a class="font-size-18 add-new-brand-js" href="javascript:void(0)">Create Brand Profile</a>
                    </h2>
                    <div class="toggle-switch-btn py-3">
                        <label>Select All Brand</label>
                        <label class="switch">
                            <input type="checkbox" value="1" class="select_all_profile">
                            <span class="slider round"></span>
                        </label>
                    </div>

                    <div class="form-group brand-selection-data"></div>

                    <ul class="btn-listing btn-listing-checkbox items-ul-js">
                        @foreach($brand_profile as $brand)
                        <li class="btn-listing-li">
                            <input type="checkbox" class="brand_profile_item" name="brand_profiles[]" value="{{ $brand->id ?? '' }}" @if( isset($assigned_brand_profiles) && is_array($assigned_brand_profiles) && in_array($brand->id, $assigned_brand_profiles) ) checked @endif>
                            <label>
                                <i class="material-icons tick-checked-js" style="display: inline;">@if( isset($assigned_brand_profiles) && is_array($assigned_brand_profiles) && in_array($brand->id, $assigned_brand_profiles) ) done @else add  @endif</i>
                                {{ $brand->title ?? '' }}</label>
                        </li>
                        @endforeach

                    </ul>
                </div>
                @endif

                {{-- @if ( isset($selected_role) && is_object($selected_role) )
                <input type='hidden' name="role" value='{{ $selected_role->id }}' />
                @else --}}
                <div class="permission">
                    <h2 class="theme-heading mt-4 d-flex justify-content-between">
                        <span>Role</span> <a class="font-size-18 add-new-role-js" href="javascript:void(0)">Create role</a>
                    </h2>
                    <div class="form-group mb-3">
                        <select class="form-control custm-form-control role-field-js @error('role') is-invalid @enderror"  name="role[]" @if ( isset($selected_role) && is_object($selected_role) ) multiple="multiple" @endif>
                            <option value="">Select Role</option>
                            @foreach($roles as $role)
                            <option value="{{$role->id ?? ''}}"
                                @if (isset($user) && in_array($role->name, $user->getRoleNames()->toArray()))
                                selected
                                @endif
                                >{{$role->name ?? ''}}</option>
                            @endforeach
                        </select>
                        @error('role')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                {{-- @endif --}}

                <div class="form-group text-center py-10">
                    <button type="button" onclick="window.location.assign('{{ old('redirect_to', url()->previous())}}')" class="gz-btn bg-color-default btn-lg">Cancel</button>
                    <button type="submit" class="gz-btn bg-color-red btn-lg ml-15">Save</button>
                </div>
            </form>

    </div>
</div>



@include('admin.team.components.script')


<livewire:brand-profiles.brand-profile-modal layout='list-btn' />
<livewire:roles.role-form-modal guard='admin' /> 

@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('.role-field-js').select2();
    });
</script>
@endsection