@extends('layouts.admin.app')
@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
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card mt-2">
                <h5 class="card-header">{{$title}}</h5>
                <form class="card-body" method="POST" action="{{route('dashboard.agents.update', $agent->id)}}">
                    @method('PATCH')
                    @csrf
                    <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="{{$agent->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="{{$agent->email}}" aria-label="john.doe@example.com" aria-describedby="email2" required />
                                <span class="input-group-text" id="email2"></span>
                            </div>
                        </div>
                    </div>
                    <hr class="my-4 mx-n4" />
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="manager">Manager</label>
                            <select id="manager" name="manager" class="selectpicker w-100" data-style="btn-default" data-actions-box="true" data-placeholder="Select Manager" data-live-search="true">
                                @foreach ($managers as $manager)
                                <option value="{{$manager->id}}" @if($agentManager === $manager->id) selected @endif>{{$manager->name}} ({{str_replace(['[', '"', "]"], '', $manager->getRoleNames())}})</option>
                               @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="role">Role</label>
                            <select id="role" name="role" class="selectpicker w-100" data-style="btn-default" data-actions-box="true" data-placeholder="Select Role" data-live-search="true">
                                <option value="Conversion" @if(str_replace(['[', '"', "]"], '', $agent->getRoleNames()) == 'Conversion') selected @endif>Conversion</option>
                                <option value="Retention" @if(str_replace(['[', '"', "]"], '', $agent->getRoleNames()) == 'Retention') selected @endif>Retention</option>
                            </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">Save</button>
                        <a type="reset" class="btn btn-sm waves-effect waves-light btn-label-secondary" href="{{ route('conversion.agents.index') }}">Cancel</a>
                    </div>
                </form>
                <form class="card-body" action="{{route('conversion.agent.update.password', $agent->id)}}" method="POST">
                    <hr class="my-4 mx-n4" />
                    <h5>Update Password</h5>
                    @csrf
                    <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;" required />
                                </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;" required />
                                </div>
                            </div>
                        </div>
                        <div class="pt-4 text-end">
                            <button type="submit" class="btn waves-effect waves-light btn-primary me-sm-3 me-1">Change Password</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-lg-6">
            <h5 class="mb-2">Numbers</h5>
            <form method="POST" action="{{route('dashboard.agents.numbers', $agent->id)}}" id="form-repeater">
                @csrf
                <div data-repeater-list="group-a">
                    @forelse ($agent->numbers()->get() as $number)
                    <div data-repeater-item>
                        <div class="row align-items-center">
                            <div class="mb-3 col-lg-4 mb-0">
                                <input type="text" name="numbers" class="form-control" value="{{$number->number}}" placeholder="Enter Number" />
                            </div>
                            <div class="mb-3 col-lg-4 mb-0">
                                <select class="w-100" data-number-repeater="select2" multiple name="countries" data-live-search="true" data-size="7" data-placeholder="Select Countries">
                                    @foreach ($countries as $country)
                                        <option value="{{$country->alpha_2}}" @if(in_array($country->alpha_2, json_decode($number->countries))) selected @endif>{{$country->alpha_2}} ({{$country->name}})</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-lg-3 mb-0">
                                <div class="form-check form-check-success">
                                    <input class="form-check-input" type="checkbox" name="default" value="1" id="customCheckSuccess" @if($number->is_default == true) checked @endif />
                                    <label class="form-check-label" for="customCheckSuccess">Default</label>
                                </div>
                            </div>

                            <div class="mb-3 col-lg-1 text-end mb-0">
                                <button class="btn btn-label-danger" type="button" data-repeater-delete>
                                    <i class="ti ti-trash ti-xs me-1"></i>
                                </button>
                            </div>
                        </div>
                        <hr class="mt-0" />
                    </div>
                    @empty
                    <div data-repeater-item>
                        <div class="row align-items-center">
                            <div class="mb-3 col-lg-4 mb-0">
                                <input type="text" name="numbers" class="form-control" placeholder="Enter Number" />
                            </div>
                            <div class="mb-3 col-lg-4 mb-0">
                                <select class="w-100" data-number-repeater="select2" multiple name="countries" data-live-search="true" data-size="7" data-placeholder="Select Countries">
                                    @foreach ($countries as $country)
                                        <option value="{{$country->alpha_2}}">{{$country->alpha_2}} ({{$country->name}})</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-lg-3 mb-0">
                                <div class="form-check form-check-success">
                                    <input class="form-check-input" type="checkbox" name="default" value="1" id="customCheckSuccess" checked="" />
                                    <label class="form-check-label" for="customCheckSuccess">Default</label>
                                </div>
                            </div>

                            <div class="mb-3 col-lg-1 text-end mb-0">
                                <button class="btn btn-label-danger" type="button" data-repeater-delete>
                                    <i class="ti ti-trash ti-xs me-1"></i>
                                </button>
                            </div>
                        </div>
                        <hr class="mt-0" />
                    </div>
                    @endforelse
                </form>
                <div class="mb-0 d-flex justify-content-between">
                    <button class="btn btn-sm btn-warning" type="button" data-repeater-create>
                        <i class="ti ti-plus ti-xs me-2"></i>
                        <span class="align-middle">Add</span>
                    </button>
                    <button class="btn btn-sm btn-success" type="submit">
                        <i class="ti ti-device-floppy ti-xs me-2"></i>
                        <span class="align-middle">Save</span>
                    </button>
                </div>
            </div>
            <hr class="my-4" />
            <h5 class="mb-2 mt-4">Extensions</h5>
            <form id="form-repeater-call" method="POST" action="{{route('dashboard.agents.extensions', $agent->id)}}">
                @csrf
                <div data-repeater-list="group-b">
                    @forelse ($agent->extensions()->get() as $extention)
                        <div data-repeater-item>
                            <div class="row align-items-center">
                                <div class="mb-3 col-lg-3 mb-0">
                                    <input type="text" name="extension" class="form-control" placeholder="Ext. ID" value="{{$extention->extension}}" />
                                </div>
                                <div class="mb-3 col-lg-3 mb-0">
                                    <select class="w-100"  data-call-repeater="select2" multiple name="countries"  data-size="7" data-placeholder="Select Countries" data-live-search="true">
                                        @foreach ($countries as $country)
                                            <option value="{{$country->alpha_2}}" @if(in_array($country->alpha_2, json_decode($extention->countries))) selected @endif>{{$country->alpha_2}} ({{$country->name}})</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3 col-lg-3 mb-0">
                                    <select class="w-100"  data-call-repeater="select2" name="providers"  data-size="7" data-placeholder="Select Provider">
                                        @foreach (App\Enums\ProvidersEnum::cases() as $provider)
                                            <option value="{{$provider->name}}" @if($extention->provider == $provider->name) selected @endif>{{$provider->value}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3 col-lg-2 mb-0">
                                    <div class="form-check form-check-success">
                                        <input class="form-check-input" type="checkbox" name="defaultExt" value="1" id="customCheckSuccess" @if($extention->is_default == 1) checked @endif />
                                        <label class="form-check-label" for="customCheckSuccess">Default</label>
                                    </div>
                                </div>

                                <div class="mb-3 col-lg-1 d-flex align-items-end mb-0">
                                    <button class="btn btn-label-danger" type="button" data-repeater-delete>
                                        <i class="ti ti-trash ti-xs me-1"></i>
                                    </button>
                                </div>
                            </div>
                            <hr class="mt-0" />
                        </div>
                    @empty
                    <div data-repeater-item>
                        <div class="row align-items-center">
                            <div class="mb-3 col-lg-3 mb-0">
                                <input type="text" name="extension" class="form-control" placeholder="Ext. ID" />
                            </div>
                            <div class="mb-3 col-lg-3 mb-0">
                                <select class="w-100"  data-call-repeater="select2" multiple name="countries"  data-size="7" data-placeholder="Select Countries" data-live-search="true">
                                    @foreach ($countries as $country)
                                        <option value="{{$country->alpha_2}}">{{$country->alpha_2}} ({{$country->name}})</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-lg-3 mb-0">
                                <select class="w-100"  data-call-repeater="select2" name="providers"  data-size="7" data-placeholder="Select Provider">
                                    @foreach (App\Enums\ProvidersEnum::cases() as $provider)
                                        <option value="{{$provider->name}}">{{$provider->value}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-lg-2 mb-0">
                                <div class="form-check form-check-success">
                                    <input class="form-check-input" type="checkbox" name="default" value="1" id="customCheckSuccess" checked="" />
                                    <label class="form-check-label" for="customCheckSuccess">Default</label>
                                </div>
                            </div>

                            <div class="mb-3 col-lg-1 d-flex align-items-end mb-0">
                                <button class="btn btn-label-danger" type="button" data-repeater-delete>
                                    <i class="ti ti-trash ti-xs me-1"></i>
                                </button>
                            </div>
                        </div>
                        <hr class="mt-0" />
                    </div>
                    @endforelse
                </div>
                <div class="mb-0 d-flex justify-content-between">
                    <button class="btn btn-sm btn-warning" type="button" data-repeater-create>
                        <i class="ti ti-plus ti-xs me-2"></i>
                        <span class="align-middle">Add</span>
                    </button>
                    <button class="btn btn-sm btn-success" type="submit">
                        <i class="ti ti-device-floppy ti-xs me-2"></i>
                        <span class="align-middle">Save</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('script')

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

<script src="/assets/js/forms-extras.js"></script>
@endpush