@extends('layouts.retention.app')
@section('content')
<div class="container">
    <div class="row justify-content-center align-items-center">
        <div class="col-8">
            <div class="card mt-2">
                <h5 class="card-header">{{$title}}</h5>
                <form class="card-body" method="POST" action="{{route('retention.managers.update', $manager->id)}}">
                    @csrf
                    @method('PATCH')
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="name">Name</label>
                            <input type="text" id="name" name="name" class="form-control" value="{{$manager->name}}" placeholder="John Doe" required />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="email">Email</label>
                            <div class="input-group input-group-merge">
                                <input type="text" id="email" name="email" class="form-control" placeholder="john.doe" value="{{$manager->email}}" aria-label="john.doe" aria-describedby="email2" required />
                                <span class="input-group-text" id="email2">@example.com</span>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="agents">Agents</label>
                            <select id="agents" name="agents[]" class="selectpicker w-100" data-style="btn-default" multiple data-actions-box="true" data-placeholder="Select Agents" data-live-search="true" required>
                                @foreach ($users as $user)
                                    <option @if(in_array($user->id, $userAgents)) selected @endif value="{{$user->id}}">{{$user->name}}</option>
                               @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="countries">Country</label>
                            <select id="countries" name="countries[]" class="selectpicker w-100" data-style="btn-default" multiple data-actions-box="true" data-placeholder="Select Countries" data-live-search="true" required>
                                @foreach ($countries as $country)
                                    <option @if(in_array($country->alpha_2, $userCountries)) selected @endif value="{{$country->alpha_2}}">{{$country->alpha_2}} ({{$country->name}})</option>
                               @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="pt-4 text-end">
                        <button type="submit" class="btn btn-sm waves-effect waves-light btn-primary me-sm-3 me-1">Submit</button>
                        <a class="btn btn-sm waves-effect waves-light btn-label-secondary" href="{{ route('conversion.agents.index') }}">Cancel</a>
                    </div>
                </form>

                <form action="{{route('conversion.agent.update.password', $manager->id)}}" method="POST" class="card-body">
                    <hr class="my-4 mx-n4" />
                    @csrf
                    <h5>UpdatePassword</h5>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-password-toggle">
                                <label class="form-label" for="password">Password</label>
                                <div class="input-group input-group-merge">
                                    <input type="password" id="password" name="password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-password-toggle">
                                <label class="form-label" for="password_confirmation">Confirm Password</label>
                                <div class="input-group input-group-merge">
                                    <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                </div>
                            </div>
                        </div>
                        <div class="pt-4 text-end">
                            <button type="submit" class="btn btn-warning waves-effect waves-light btn-sm me-sm-3 me-1">Change Password</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')

<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/js/forms-selects.js"></script>

@endpush

@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
@endpush