<div class="fs-5 bg-light p-0 m-0 border border-1 rounded-4 py-3">
    <div>
        <table class="table m-0 table-striped-columns ">
            <thead>
                <tr scope="col">
                    <th>Агентство</th>
                    @foreach ($complexes as $complex)
                        <th>{{ $complex->name }}
                            <div>
                                {{ $complex->city->name }}
                            </div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class=" ">
                @foreach ($companies as $company)
                    <tr scope="row">
                        <td class="">
                            <a class="text-dark icon-link icon-link-hover text-decoration-none" href="#"
                                wire:click="setCompany({{ $company->id }})">
                                {{ $company->name }}
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-chevron-right" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708" />
                                </svg>
                            </a>
                        </td>
                        @foreach ($complexes as $complex)
                            @php($paymentable = $company->getPaymentable($complex))
                            <td class="align-middle">
                                @if ($paymentable->value == null)
                                    <div class="dropdown">
                                        <button class="btn btn-light" type="button" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            Не установлено
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="dropdown-item " href="#">
                                                    <span class="badge text-dark">Введите размер вознаграждения:
                                                    </span>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                height="20" fill="currentColor" class="bi bi-percent"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0M4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
                                                            </svg>
                                                        </span>
                                                        <input class="form-control" type="text"
                                                            placeholder="Вознаграждение"
                                                            value="{{ $paymentable->value }}" wire:model = "newValue"
                                                            wire:keydown.enter="setPaymentValueForCompany({{ $company->id }}, {{ $complex->id }})">
                                                    </div>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                @elseif($paymentable->value == -1)
                                    <div class="dropdown">
                                        <button class="btn btn-light" type="button" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            Наследовать
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="dropdown-item " href="#">
                                                    <span class="badge text-dark">Введите размер вознаграждения:
                                                    </span>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                height="20" fill="currentColor" class="bi bi-percent"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0M4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
                                                            </svg>
                                                        </span>
                                                        <input class="form-control" type="text"
                                                            placeholder="Вознаграждение"
                                                            value="{{ $paymentable->value }}" wire:model = "newValue"
                                                            wire:keydown.enter="setPaymentValueForCompany({{ $company->id }}, {{ $complex->id }})">
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li><button class="dropdown-item"
                                                    wire:click="unsetPaymentForCompany({{ $company->id }}, {{ $complex->id }})">Без
                                                    вознаграждения</button></li>
                                        </ul>
                                    </div>
                                @else
                                    <div class="dropdown">
                                        <button class="btn btn-light" type="button" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            {{ $paymentable->value }} %
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="dropdown-item " href="#">
                                                    <span class="badge text-dark">Введите размер вознаграждения:
                                                    </span>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                height="20" fill="currentColor" class="bi bi-percent"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0M4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
                                                            </svg>
                                                        </span>
                                                        <input class="form-control" type="text"
                                                            placeholder="Вознаграждение"
                                                            value="{{ $paymentable->value }}"
                                                            wire:model.lazy = "newValue"
                                                            wire:keydown.enter="setPaymentValueForCompany({{ $company->id }}, {{ $complex->id }})">
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li><button class="dropdown-item"
                                                    wire:click="unsetPaymentForCompany({{ $company->id }}, {{ $complex->id }})">Без
                                                    вознаграждения</button>
                                            </li>
                                            <!--<li><a class="dropdown-item" href="#">Something else here</a></li>-->
                                        </ul>
                                    </div>
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @endforeach

            </tbody>
        </table>
    </div>
</div>
