@extends('layouts.admin')

@section('title', 'Price lists — '.config('app.name'))
@section('page_title', 'Price lists')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Price lists</li>
@endsection

@section('content')
    <section class="price-admin-lists card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="mb-0">Price groups</h5>
                <p class="text-muted small mb-0">{{ $lists->count() }} lists · {{ $totalCountries }} country mappings</p>
            </div>
        </div>
        <div class="card-body">
            <div class="price-admin-chips" role="list">
                <a
                    href="{{ route('admin.price-lists.index', array_filter(['q' => $q ?: null])).'#countries' }}"
                    class="price-admin-chip {{ $listFilter === '' ? 'is-active' : '' }}"
                    role="listitem"
                >
                    <strong>All lists</strong>
                    <span>{{ $totalCountries }} countries</span>
                </a>
                @foreach ($lists as $list)
                    <div class="price-admin-chip {{ $listFilter === $list->code ? 'is-active' : '' }} {{ $list->is_active ? '' : 'is-inactive' }}" role="listitem">
                        <a
                            class="price-admin-chip__main"
                            href="{{ route('admin.price-lists.index', array_filter([
                                'list' => $list->code,
                                'q' => $q ?: null,
                                'per_page' => $perPage !== 40 ? $perPage : null,
                            ])).'#countries' }}"
                            title="Filter countries using {{ $list->code }}"
                        >
                            <strong>{{ $list->code }}</strong>
                            <span>{{ $list->currency_code }} · SI {{ $list->currency?->format((float) $list->si_price) ?? $list->si_price }}/hr</span>
                            <span>{{ $list->country_assignments_count }} countries{{ $list->is_active ? '' : ' · inactive' }}</span>
                        </a>
                        <a class="price-admin-chip__edit" href="{{ route('admin.price-lists.edit', $list->code) }}">Edit</a>
                    </div>
                @endforeach
            </div>
            <p class="text-muted small mt-2 mb-0">Click a price group to filter the country table. Use Edit to change rates and SI pricing.</p>
        </div>
    </section>

    <section class="card" id="countries">
        <div class="card-header price-admin-countries-head">
            <div>
                <h5 class="mb-0">Country → price list</h5>
                <p class="text-muted small mb-0">
                    Showing {{ $countries->firstItem() ?: 0 }}–{{ $countries->lastItem() ?: 0 }}
                    of {{ $filteredCount }}
                    @if ($listFilter !== '' || $q !== '')
                        (filtered)
                    @endif
                </p>
            </div>
            @if ($listFilter !== '')
                <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.price-lists.edit', $listFilter) }}">Edit {{ $listFilter }}</a>
            @endif
        </div>
        <div class="card-body">
            <form class="price-admin-filters" method="GET" action="{{ route('admin.price-lists.index') }}#countries">
                <div class="price-admin-filters__field">
                    <label class="form-label" for="price-country-q">Search country</label>
                    <input
                        id="price-country-q"
                        type="search"
                        name="q"
                        value="{{ $q }}"
                        class="form-control"
                        placeholder="e.g. Canada, United Arab…"
                        autocomplete="off"
                    >
                </div>
                <div class="price-admin-filters__field">
                    <label class="form-label" for="price-country-list">Price list</label>
                    <select id="price-country-list" name="list" class="form-select">
                        <option value="">All lists</option>
                        @foreach ($lists as $list)
                            <option value="{{ $list->code }}" @selected($listFilter === $list->code)>
                                {{ $list->code }} ({{ $list->currency_code }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="price-admin-filters__field price-admin-filters__field--narrow">
                    <label class="form-label" for="price-country-per-page">Per page</label>
                    <select id="price-country-per-page" name="per_page" class="form-select">
                        @foreach ([25, 40, 50, 100] as $size)
                            <option value="{{ $size }}" @selected($perPage === $size)>{{ $size }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="price-admin-filters__actions">
                    <button class="btn btn-primary" type="submit">Apply</button>
                    @if ($q !== '' || $listFilter !== '' || $perPage !== 40)
                        <a class="btn btn-outline-secondary" href="{{ route('admin.price-lists.index') }}#countries">Clear</a>
                    @endif
                </div>
            </form>

            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Country</th>
                            <th>Price list</th>
                            <th>Currency</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($countries as $row)
                            @php
                                $mapped = $lists->firstWhere('code', $row->price_list_code);
                            @endphp
                            <tr>
                                <td>{{ $row->country }}</td>
                                <td>
                                    <span class="badge badge-light-primary">{{ $row->price_list_code }}</span>
                                </td>
                                <td>{{ $mapped?->currency_code ?: '—' }}</td>
                                <td class="text-end">
                                    <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.price-lists.edit', $row->price_list_code) }}">Open list</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted">
                                    No countries match these filters.
                                    <a href="{{ route('admin.price-lists.index') }}#countries">Clear filters</a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="price-admin-pager">
                {{ $countries->links() }}
            </div>
        </div>
    </section>
@endsection

@push('styles')
<style>
    .price-admin-chips {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: 0.65rem;
    }
    .price-admin-chip {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.35rem 0.5rem;
        align-items: center;
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--brand-border);
        border-radius: 10px;
        background: var(--brand-surface-raised);
        color: inherit;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .price-admin-chip__main {
        display: grid;
        gap: 0.15rem;
        color: inherit;
        text-decoration: none;
        min-width: 0;
    }
    .price-admin-chip__main strong {
        font-size: 0.95rem;
    }
    .price-admin-chip__main span {
        font-size: 0.78rem;
        color: #6b7a84;
    }
    .price-admin-chip__edit {
        font-size: 0.8rem;
        font-weight: 650;
        text-decoration: none;
        color: var(--brand-primary);
        white-space: nowrap;
    }
    .price-admin-chip:hover,
    .price-admin-chip.is-active {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 1px var(--brand-primary);
    }
    .price-admin-chip.is-inactive {
        opacity: 0.65;
    }
    .price-admin-countries-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .price-admin-filters {
        display: grid;
        grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) 7rem auto;
        gap: 0.75rem;
        align-items: end;
        margin-bottom: 1rem;
    }
    .price-admin-filters__actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .price-admin-pager {
        margin-top: 0.75rem;
        scroll-margin-top: 1rem;
    }
    #countries {
        scroll-margin-top: 1rem;
    }
    @media (max-width: 900px) {
        .price-admin-filters {
            grid-template-columns: 1fr 1fr;
        }
        .price-admin-filters__actions {
            grid-column: 1 / -1;
        }
    }
    @media (max-width: 640px) {
        .price-admin-filters {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush