{{--
    brafa Systems — Properties list.
    Mirror of prototype/admin/views-properties.jsx.

    Livewire backing is App\Http\Livewire\SetApiKey. Every wire:* directive
    and property reference below is preserved verbatim — markup only changed.

    Properties referenced (from $this on SetApiKey):
      $properties (paginated, with PropertyID/PropertyName/API/dkplus_customer_id)
      $search, $perPage, $sortField, $sortDirection
      $selected_api, $apiKey, $arrivals_key
      $tbf_key1, $tbf_key2, $url_number
      $totalPropertyName, $authorizationHeaders, $totalURL
      $dkplus_customer_id, $dkplus_customer_name
    Methods referenced:
      sortBy(...), showPropertyDetails(...), updateApiKeys()
    Livewire events emitted by the component (handled in JS below):
      closeUpdateApiKeysModal, showSweetAlert
--}}

@php
    use Illuminate\Support\Str;
    use Illuminate\Support\Facades\Auth;

    $isSuperAdmin = Auth::check() && Auth::user()->role_id == 1;
    $total = $properties->total();

    /* Deterministic colour for the logo tile, derived from PropertyID so a
       given property keeps the same colour across renders. */
    $brafaTilePalette = [
        '#1A1A1A', '#3A3A3A', '#5A5A5A',
        '#2D4A33', '#3A4D6C', '#4D3A6C', '#6C3A53',
        '#1E8A3E', '#8C5F1B',
    ];

    $brafaTypeFor = function ($api) {
        $api = strtolower((string) $api);
        return match ($api) {
            'golfbokanir'              => ['label' => 'Golf',       'variant' => 'pill--type-golf'],
            'beds24', 'godo'           => ['label' => 'Hotel',      'variant' => 'pill--type-hotel'],
            'bookingfactory', 'total',
            'fritimi', 'guesty'        => ['label' => 'Hotel',      'variant' => 'pill--type-hotel'],
            default                    => ['label' => $api ?: '—',  'variant' => 'pill--type-hotel'],
        };
    };
@endphp

<div class="brafa-screen">
    @if (session()->has('error'))
        <div class="status-banner status-banner--danger">{{ session('error') }}</div>
    @endif

    {{-- ============================================================
         Summary strip — Total Properties is real; the other three
         do not yet have backend wiring on the SetApiKey component,
         so they render as "—". Replace as data lands.
         ============================================================ --}}
    <div class="prop-stats">
        <div class="stat-card">
            <span class="stat-card__label">Total properties</span>
            <span class="stat-card__value">{{ $total }}</span>
        </div>
        <div class="stat-card stat-card--accent">
            <span class="stat-card__label">In-house guests</span>
            <span class="stat-card__value">—</span>
        </div>
        <div class="stat-card">
            <div class="stat-card__row">
                <span class="stat-card__label">Arrivals today</span>
            </div>
            <span class="stat-card__value">—</span>
        </div>
        <div class="stat-card">
            <span class="stat-card__label">Avg occupancy</span>
            <span class="stat-card__value">—</span>
        </div>
    </div>

    {{-- ============================================================
         List card
         ============================================================ --}}
    <div class="card prop-list">
        {{-- Toolbar --------------------------------------------------- --}}
        <div class="prop-toolbar">
            <div class="prop-toolbar__search">
                <x-lucide name="search" size="16" />
                <input wire:model.debounce.300ms="search"
                       type="text"
                       class="input"
                       placeholder="Search properties, ID, API, dkPlus…">
            </div>

            <div class="prop-toolbar__right">
                <label class="prop-toolbar__perpage">
                    <span class="eyebrow">Show</span>
                    <select wire:model="perPage" class="select">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                    </select>
                    <span class="eyebrow">entries</span>
                </label>

                <button type="button"
                        class="btn btn--outline btn--sm"
                        onclick="window.Livewire && window.Livewire.emit('$refresh'); window.location.reload();"
                        title="Refresh">
                    <x-lucide name="refresh-ccw" size="14" />
                    Refresh
                </button>

                @if ($isSuperAdmin)
                    <button type="button"
                            class="btn btn--sm"
                            data-toggle="modal"
                            data-target="#updateApiKeysModal">
                        <x-lucide name="plus" size="14" />
                        New property
                    </button>
                @endif
            </div>
        </div>

        {{-- Table ----------------------------------------------------- --}}
        <div style="overflow-x: auto;">
            <table class="table table--clickable table--cards">
                <thead>
                    <tr>
                        <th style="width: 60px;">Logo</th>
                        <th wire:click="sortBy('PropertyID')" style="cursor: pointer;">
                            ID
                            @if ($sortField === 'PropertyID')
                                <x-lucide name="{{ $sortDirection === 'asc' ? 'chevron-down' : 'chevron-right' }}" size="11" />
                            @endif
                        </th>
                        <th wire:click="sortBy('PropertyName')" style="cursor: pointer;">
                            Property name
                            @if ($sortField === 'PropertyName')
                                <x-lucide name="{{ $sortDirection === 'asc' ? 'chevron-down' : 'chevron-right' }}" size="11" />
                            @endif
                        </th>
                        <th>Type</th>
                        <th wire:click="sortBy('API')" style="cursor: pointer;">
                            API
                            @if ($sortField === 'API')
                                <x-lucide name="{{ $sortDirection === 'asc' ? 'chevron-down' : 'chevron-right' }}" size="11" />
                            @endif
                        </th>
                        <th>dkPlus customer</th>
                        <th>Occupancy</th>
                        <th style="width: 40px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($properties as $Property)
                        @php
                            $type = $brafaTypeFor($Property->API);
                            $initials = collect(explode(' ', trim((string) $Property->PropertyName)))
                                ->filter()
                                ->take(2)
                                ->map(fn ($p) => strtoupper(mb_substr($p, 0, 1)))
                                ->implode('');
                            $tileBg = $brafaTilePalette[crc32((string) $Property->PropertyID) % count($brafaTilePalette)];
                            $logoSrc = \Illuminate\Support\Facades\Storage::url('public/assets/img/' . Str::slug($Property->PropertyName) . '.png');
                        @endphp
                        <tr wire:key="row-{{ $Property->PropertyID }}"
                            wire:click="showPropertyDetails('{{ $Property->PropertyID }}')">
                            <td class="cards-figure">
                                <div class="prop-logo" style="background: {{ $tileBg }};">
                                    <span class="prop-logo__initials">{{ $initials ?: '?' }}</span>
                                    {{-- onload: reveal the white plate + hide initials (so a transparent
                                         logo never shows the initials through it). onerror: drop the img and
                                         fall back to the coloured initials tile. --}}
                                    <img src="{{ $logoSrc }}"
                                         alt=""
                                         loading="lazy"
                                         onload="this.closest('.prop-logo').classList.add('has-image');"
                                         onerror="this.remove();">
                                </div>
                            </td>
                            <td class="mono muted" data-label="ID">{{ $Property->PropertyID }}</td>
                            <td class="cards-title">
                                <div class="prop-name__main">{{ $Property->PropertyName }}</div>
                            </td>
                            <td data-label="Type">
                                <span class="pill {{ $type['variant'] }}">{{ $type['label'] }}</span>
                            </td>
                            <td class="mono muted" data-label="API">{{ $Property->API ?: '—' }}</td>
                            <td class="mono muted" data-label="dkPlus">{{ $Property->dkplus_customer_id ?: '—' }}</td>
                            <td data-label="Occupancy">
                                {{-- Occupancy data is not yet on the model; render the
                                     sunken bar at 0% as a structural placeholder. --}}
                                <div class="occupancy">
                                    <div class="occupancy-bar">
                                        <span class="occupancy-bar__fill is-empty" style="width: 0%;"></span>
                                    </div>
                                    <span class="occupancy__pct">—</span>
                                </div>
                            </td>
                            <td class="cards-hide">
                                <button type="button"
                                        class="row-chevron"
                                        wire:click.stop="showPropertyDetails('{{ $Property->PropertyID }}')"
                                        aria-label="Open property">
                                    <x-lucide name="chevron-right" size="16" />
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" style="padding: 48px 24px; text-align: center; color: var(--fg-subtle); font-size: 13px;">
                                No properties match your search.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer ---------------------------------------------------- --}}
        <div class="prop-list__footer">
            <div>
                @if ($total > 0)
                    Showing
                    <strong style="color: var(--fg);">{{ $properties->firstItem() }}–{{ $properties->lastItem() }}</strong>
                    of <strong style="color: var(--fg);">{{ $total }}</strong>
                @else
                    No entries
                @endif
            </div>
            <div>
                {{ $properties->links('vendor.pagination.brafa') }}
            </div>
        </div>
    </div>

    {{-- ============================================================
         "New property" modal — kept as the existing Bootstrap 4
         modal (data-toggle / data-dismiss) so the bundled JS that
         opens/closes it keeps working. Markup-only restyle inside.
         ============================================================ --}}
    @if ($isSuperAdmin)
        <div wire:ignore.self
             class="modal fade"
             id="updateApiKeysModal"
             tabindex="-1"
             aria-labelledby="updateApiKeysModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="brafa-modal-content modal-content">
                    <div class="brafa-modal-header">
                        <h5 class="brafa-modal-title" id="updateApiKeysModalLabel">New property</h5>
                        <button type="button"
                                class="brafa-modal-close"
                                data-dismiss="modal"
                                aria-label="Close">
                            <x-lucide name="x" size="16" />
                        </button>
                    </div>
                    <div class="brafa-modal-body">
                        <form wire:submit.prevent="updateApiKeys">
                            <div class="form-group">
                                <label class="field-label" for="brafa-modal-select-api">API</label>
                                <select id="brafa-modal-select-api"
                                        class="select @error('selected_api') is-invalid @enderror"
                                        wire:model="selected_api">
                                    <option value="">— Select an API —</option>
                                    <option value="beds24">Beds24</option>
                                    <option value="godo">Godo</option>
                                    <option value="bookingfactory">BookingFactory</option>
                                    <option value="total">Total</option>
                                    <option value="fritimi">Fritimi</option>
                                    <option value="guesty">Guesty</option>
                                    <option value="golfbokanir">Golfbokanir</option>
                                </select>
                                @error('selected_api') <p class="field-error">{{ $message }}</p> @enderror
                            </div>

                            {{-- beds24 / godo / golfbokanir share the apiKey field --}}
                            <div class="form-group"
                                 @if (in_array($selected_api, ['beds24', 'godo', 'golfbokanir']))
                                     style="display: block;"
                                 @else
                                     style="display: none;"
                                 @endif>
                                <label class="field-label" for="brafa-modal-api-key">API key</label>
                                <input type="text"
                                       id="brafa-modal-api-key"
                                       class="input @error('apiKey') is-invalid @enderror"
                                       wire:model="apiKey">
                                @error('apiKey') <p class="field-error">{{ $message }}</p> @enderror
                            </div>

                            {{-- beds24 / godo also need the arrivals key --}}
                            <div class="form-group"
                                 @if (in_array($selected_api, ['beds24', 'godo']))
                                     style="display: block;"
                                 @else
                                     style="display: none;"
                                 @endif>
                                <label class="field-label" for="brafa-modal-arrivals-key">Arrivals key</label>
                                <input type="text"
                                       id="brafa-modal-arrivals-key"
                                       class="input @error('arrivals_key') is-invalid @enderror"
                                       wire:model="arrivals_key">
                                @error('arrivals_key') <p class="field-error">{{ $message }}</p> @enderror
                            </div>

                            {{-- bookingfactory --}}
                            <div class="form-group" @if ($selected_api != 'bookingfactory') style="display: none;" @endif>
                                <label class="field-label" for="brafa-modal-tbf-key1">TBF key 1</label>
                                <input type="text"
                                       id="brafa-modal-tbf-key1"
                                       class="input @error('tbf_key1') is-invalid @enderror"
                                       wire:model="tbf_key1">
                                @error('tbf_key1') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div class="form-group" @if ($selected_api != 'bookingfactory') style="display: none;" @endif>
                                <label class="field-label" for="brafa-modal-tbf-key2">TBF key 2</label>
                                <input type="text"
                                       id="brafa-modal-tbf-key2"
                                       class="input @error('tbf_key2') is-invalid @enderror"
                                       wire:model="tbf_key2">
                                @error('tbf_key2') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div class="form-group" @if ($selected_api != 'bookingfactory') style="display: none;" @endif>
                                <label class="field-label" for="brafa-modal-url-number">URL number</label>
                                <input type="text"
                                       id="brafa-modal-url-number"
                                       class="input @error('url_number') is-invalid @enderror"
                                       wire:model="url_number">
                                @error('url_number') <p class="field-error">{{ $message }}</p> @enderror
                            </div>

                            {{-- total / fritimi --}}
                            <div class="form-group" @if (!in_array($selected_api, ['total', 'fritimi'])) style="display: none;" @endif>
                                <label class="field-label" for="brafa-modal-total-property-name">Property name</label>
                                <input type="text"
                                       id="brafa-modal-total-property-name"
                                       class="input @error('totalPropertyName') is-invalid @enderror"
                                       wire:model="totalPropertyName">
                                @error('totalPropertyName') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div class="form-group" @if (!in_array($selected_api, ['total', 'fritimi'])) style="display: none;" @endif>
                                <label class="field-label" for="brafa-modal-auth-headers">Authorization headers</label>
                                <input type="text"
                                       id="brafa-modal-auth-headers"
                                       class="input"
                                       wire:model="authorizationHeaders">
                            </div>
                            <div class="form-group" @if (!in_array($selected_api, ['total', 'fritimi'])) style="display: none;" @endif>
                                <label class="field-label" for="brafa-modal-total-url">URL</label>
                                <input type="text"
                                       id="brafa-modal-total-url"
                                       class="input @error('totalURL') is-invalid @enderror"
                                       wire:model="totalURL">
                                @error('totalURL') <p class="field-error">{{ $message }}</p> @enderror
                            </div>

                            {{-- dkPlus, always visible --}}
                            <div class="form-group">
                                <label class="field-label" for="brafa-modal-dkplus-id">dkPlus customer ID <span class="subtle">(optional)</span></label>
                                <input type="text"
                                       id="brafa-modal-dkplus-id"
                                       class="input @error('dkplus_customer_id') is-invalid @enderror"
                                       wire:model="dkplus_customer_id">
                                @error('dkplus_customer_id') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div class="form-group">
                                <label class="field-label" for="brafa-modal-dkplus-name">dkPlus customer name <span class="subtle">(optional)</span></label>
                                <input type="text"
                                       id="brafa-modal-dkplus-name"
                                       class="input @error('dkplus_customer_name') is-invalid @enderror"
                                       wire:model="dkplus_customer_name">
                                @error('dkplus_customer_name') <p class="field-error">{{ $message }}</p> @enderror
                            </div>

                            <div class="hstack" style="margin-top: 18px;">
                                <button type="submit" class="btn">Add property</button>
                                <button type="button" class="btn btn--outline" data-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            /* Modal close hook — preserved from previous implementation. */
            if (window.Livewire) {
                window.Livewire.on('closeUpdateApiKeysModal', function () {
                    if (window.jQuery) {
                        window.jQuery('#updateApiKeysModal').modal('hide');
                    }
                });
            }
        });
        document.addEventListener('livewire:load', function () {
            window.Livewire.on('closeUpdateApiKeysModal', function () {
                if (window.jQuery) {
                    window.jQuery('#updateApiKeysModal').modal('hide');
                }
            });
        });
    </script>
@endpush