<div class="container py-4">

    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h1 class="h3 mb-1">{{ $solicitor->name }}</h1>
            <p class="text-muted mb-0">Solicitor details and activity</p>
        </div>

        <div class="d-flex gap-2">
            <a wire:navigate href="{{ route('solicitors.index') }}" class="btn btn-outline-secondary">
                Back
            </a>

            @can('edit', $solicitor)
                <a wire:navigate href="{{ route('solicitors.edit', $solicitor) }}" class="btn btn-primary">
                    Edit
                </a>
            @endcan
        </div>
    </div>


    <div class="mb-4">
        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="text-muted small">Name</div>
                        <div class="fw-semibold">{{ $solicitor->name ?: '—' }}</div>
                    </div>

                    <div class="col-md-3">
                        <div class="text-muted small">Domain</div>
                        <div class="fw-semibold">{{ $solicitor->domain ?: '—' }}</div>
                    </div>

                    <div class="col-md-3">
                        <div class="text-muted small">Email</div>
                        <div class="fw-semibold">{{ $solicitor->defaultEmailAddress() ?: '—' }}</div>
                    </div>

                    <div class="col-md-3">
                        <div class="text-muted small">Phone</div>
                        <div class="fw-semibold">{{ $solicitor->primaryPhoneNumber() ?: '—' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row g-4">

        <div class="col-lg-8">

            <ul class="nav nav-tabs mb-3">

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'overview') active @endif"
                            wire:click="setTab('overview')"
                    >
                        Overview
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'documents') active @endif"
                            wire:click="setTab('documents')"
                    >
                        Documents
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'addresses') active @endif"
                            wire:click="setTab('addresses')"
                    >
                        Addresses
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'email-senders') active @endif"
                            wire:click="setTab('email-senders')"
                    >
                        Email Senders
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'sms-senders') active @endif"
                            wire:click="setTab('sms-senders')"
                    >
                        SMS Senders
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'phone-numbers') active @endif"
                            wire:click="setTab('phone-numbers')"
                    >
                        Phone Numbers
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'logo') active @endif"
                            wire:click="setTab('logo')"
                    >
                        Logo
                    </button>
                </li>

                <li class="nav-item">
                    <button
                            class="nav-link @if($tab === 'history') active @endif"
                            wire:click="setTab('history')"
                    >
                        History
                    </button>
                </li>

            </ul>


            @if ($tab === 'overview')
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <div class="text-muted small">Name</div>
                                <div>{{ $solicitor->name }}</div>
                            </div>

                            <div class="col-md-6">
                                <div class="text-muted small">Domain</div>
                                <div>{{ $solicitor->domain ?: '—' }}</div>
                            </div>

                            <div class="col-md-6">
                                <div class="text-muted small">Email</div>
                                <div>{{ $solicitor->defaultEmailAddress() ?: '—' }}</div>
                            </div>

                            <div class="col-md-6">
                                <div class="text-muted small">Phone</div>
                                <div>{{ $solicitor->primaryPhoneNumber() ?: '—' }}</div>
                            </div>

                            <div class="col-md-6">
                                <div class="text-muted small">Created</div>
                                <div>{{ $solicitor->created_at?->format('d/m/Y H:i') }}</div>
                            </div>

                            <div class="col-md-6">
                                <div class="text-muted small">Updated</div>
                                <div>{{ $solicitor->updated_at?->format('d/m/Y H:i') }}</div>
                            </div>

                        </div>
                    </div>
                </div>

            @endif


            @if ($tab === 'documents')

                <livewire:document-manager
                        :owner="$solicitor"
                        :key="'solicitor-documents-'.$solicitor->id"
                />

            @endif


            @if ($tab === 'addresses')

                <livewire:address-book
                        :owner="$solicitor"
                        :key="'solicitor-addresses-'.$solicitor->id"
                />

            @endif

            @if ($tab === 'email-senders')

                <livewire:solicitor.email-senders
                        :solicitor="$solicitor"
                        :key="'solicitor-email-senders-'.$solicitor->id"
                />

            @endif

            @if ($tab === 'sms-senders')

                <livewire:solicitor.sms-senders
                        :solicitor="$solicitor"
                        :key="'solicitor-sms-senders-'.$solicitor->id"
                />

            @endif

            @if ($tab === 'phone-numbers')

                <livewire:solicitor.phone-numbers
                        :solicitor="$solicitor"
                        :key="'solicitor-phone-numbers-'.$solicitor->id"
                />

            @endif

            @if ($tab === 'logo')

                <livewire:solicitor.logo-manager
                        :solicitor="$solicitor"
                        :key="'solicitor-logo-'.$solicitor->id"
                />

            @endif

            @if ($tab === 'history')

                <livewire:history
                        :owner="$solicitor"
                        :key="'solicitor-history-'.$solicitor->id"
                />

            @endif

        </div>


        <div class="col-lg-4">

            <livewire:note-manager
                    :owner="$solicitor"
                    :key="'solicitor-notes-'.$solicitor->id"
            />

        </div>

    </div>

</div>