@extends('layouts.app')

@section('title', __('billing::messages.catalogue.title'))

@php
    use App\Modules\Billing\Models\BillableService;

    $canManage = auth()->user()?->can('create', BillableService::class) ?? false;
    $hasFilters = collect([$search, request('category'), $status])->filter(fn ($v): bool => (string) $v !== '')->isNotEmpty();
@endphp

@section('content')
    <div class="mb-4">
        <h1 class="px-title">{{ __('billing::messages.catalogue.title') }}</h1>
        <p class="px-subtitle">{{ __('billing::messages.catalogue.subtitle') }}</p>
    </div>

    <div class="row g-3 g-xl-4">
        <div class="col-12 col-xl-8">
            {{-- Outside the swapped region: that region is replaced wholesale on
                 every filter change, which would destroy the field being typed
                 into. --}}
            <div class="px-panel p-3 p-md-4 mb-4">
                <form method="GET" action="{{ route('catalogue.index') }}" data-clinic-filter class="px-filters">
                    <div class="px-filters__field px-filters__field--wide">
                        <label for="search" class="visually-hidden">{{ __('common.search') }}</label>
                        <div class="px-search">
                            <i class="bi bi-search" aria-hidden="true"></i>
                            <input type="search" class="form-control px-input" id="search" name="search"
                                   value="{{ $search }}"
                                   placeholder="{{ __('billing::messages.catalogue.search_placeholder') }}">
                        </div>
                    </div>

                    <div class="px-filters__field">
                        <label for="category" class="px-field-label">{{ __('billing::messages.catalogue.category') }}</label>
                        <select class="form-select px-select" id="category" name="category">
                            <option value="">{{ __('common.all') }}</option>
                            @foreach ($categories as $value => $label)
                                <option value="{{ $value }}" @selected(request('category') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Withdrawn entries are kept for the invoices that point at
                         them, so the list needs a way back to them. --}}
                    <div class="px-filters__field">
                        <label for="status" class="px-field-label">{{ __('billing::messages.catalogue.active_filter') }}</label>
                        <select class="form-select px-select" id="status" name="status">
                            <option value="">{{ __('billing::messages.catalogue.active_only') }}</option>
                            <option value="withdrawn" @selected($status === 'withdrawn')>
                                {{ __('billing::messages.catalogue.withdrawn_only') }}
                            </option>
                            <option value="all" @selected($status === 'all')>{{ __('common.all') }}</option>
                        </select>
                    </div>

                    <div class="px-filters__actions">
                        {{-- Kept even though the list filters live: without a
                             script this button is the only way to search. --}}
                        <button type="submit" class="btn px-btn-primary d-inline-flex align-items-center gap-2">
                            <i class="bi bi-funnel" aria-hidden="true"></i>
                            {{ __('common.filter') }}
                        </button>

                        @if ($hasFilters)
                            <a href="{{ route('catalogue.index') }}" class="btn px-btn-ghost">{{ __('common.clear') }}</a>
                        @endif
                    </div>
                </form>
            </div>

            @error('catalogue')
                <div class="px-advice px-advice--danger mb-4" role="alert">
                    <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                    <div>{{ $message }}</div>
                </div>
            @enderror

            <x-results>
                <div class="px-panel overflow-hidden">
                    <div class="table-responsive">
                        <table class="table px-table px-table--sticky align-middle mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">{{ __('billing::messages.catalogue.code') }}</th>
                                    <th scope="col">{{ __('billing::messages.catalogue.name') }}</th>
                                    <th scope="col">{{ __('billing::messages.catalogue.category') }}</th>
                                    <th scope="col">{{ __('billing::messages.catalogue.tax_rate') }}</th>
                                    <th scope="col" class="text-end">{{ __('billing::messages.catalogue.unit_price') }}</th>
                                    @if ($canManage)
                                        <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                                    @endif
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($services as $service)
                                    <tr @class(['px-row--muted' => ! $service->is_active])>
                                        <td class="font-monospace small">{{ $service->code }}</td>

                                        <td>
                                            <span class="fw-medium">{{ $service->name }}</span>

                                            @if (! $service->is_active)
                                                <span class="px-pill px-pill--grey">{{ __('billing::messages.catalogue.withdrawn') }}</span>
                                            @endif

                                            @if (! $service->is_discountable)
                                                <span class="px-pill px-pill--grey">{{ __('billing::messages.items.not_discountable') }}</span>
                                            @endif
                                        </td>

                                        <td class="small">{{ $service->category->label() }}</td>

                                        <td class="small">
                                            {{ $service->taxRate?->label() ?? __('billing::messages.catalogue.no_tax') }}
                                        </td>

                                        <td class="text-end font-monospace" style="font-variant-numeric: tabular-nums;">
                                            {{ $service->unit_price->toMajor() }}
                                        </td>

                                        @if ($canManage)
                                            <td class="text-end">
                                                <div class="d-inline-flex align-items-center gap-1">
                                                    <button type="button" class="btn btn-sm px-btn-ghost"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#edit-{{ $service->id }}"
                                                            aria-expanded="false" aria-controls="edit-{{ $service->id }}"
                                                            title="{{ __('billing::messages.catalogue.edit') }}">
                                                        <i class="bi bi-pencil" aria-hidden="true"></i>
                                                        <span class="visually-hidden">{{ __('billing::messages.catalogue.edit') }}</span>
                                                    </button>

                                                    {{-- Withdraw, not delete: the entry is also the
                                                         record of what was offered and at what price. --}}
                                                    <form method="POST"
                                                          action="{{ route('catalogue.services.availability', $service) }}"
                                                          class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn btn-sm px-btn-ghost text-nowrap">
                                                            {{ $service->is_active
                                                                ? __('billing::messages.catalogue.withdraw')
                                                                : __('billing::messages.catalogue.restore') }}
                                                        </button>
                                                    </form>

                                                    {{-- The question is asked where the button is: one
                                                         dialog naming a price could be any of thirty rows. --}}
                                                    <form method="POST"
                                                          action="{{ route('catalogue.services.destroy', $service) }}"
                                                          class="px-confirm" data-clinic-confirm-inline>
                                                        @csrf
                                                        @method('DELETE')

                                                        <button type="button" class="btn btn-sm px-btn-ghost text-danger"
                                                                data-confirm-trigger
                                                                title="{{ __('billing::messages.catalogue.delete') }}">
                                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                                            <span class="visually-hidden">{{ __('billing::messages.catalogue.delete') }}</span>
                                                        </button>

                                                        <span class="px-confirm__ask" data-confirm-ask hidden>
                                                            <span class="px-confirm__text">
                                                                {{ __('billing::messages.catalogue.delete_confirm', ['name' => $service->name]) }}
                                                            </span>

                                                            <button type="submit" class="btn btn-sm px-btn-primary" data-confirm-yes>
                                                                {{ __('common.yes') }}
                                                            </button>

                                                            <button type="button" class="btn btn-sm px-btn-ghost" data-confirm-no>
                                                                {{ __('common.no') }}
                                                            </button>
                                                        </span>
                                                    </form>
                                                </div>
                                            </td>
                                        @endif
                                    </tr>

                                    @if ($canManage)
                                        {{-- The editor opens under the row it belongs to, so the
                                             price being changed stays in sight while it is typed. --}}
                                        <tr class="collapse" id="edit-{{ $service->id }}">
                                            <td colspan="6" class="px-editor">
                                                <form method="POST" action="{{ route('catalogue.services.update', $service) }}"
                                                      class="row g-2 align-items-end">
                                                    @csrf
                                                    @method('PUT')

                                                    <div class="col-12">
                                                        <p class="px-field-label mb-2">
                                                            {{ __('billing::messages.catalogue.edit_title', ['name' => $service->name]) }}
                                                        </p>
                                                    </div>

                                                    <div class="col-6 col-md-2">
                                                        <label for="code-{{ $service->id }}" class="px-field-label">
                                                            {{ __('billing::messages.catalogue.code') }}
                                                        </label>
                                                        <input type="text" id="code-{{ $service->id }}" name="code" maxlength="40"
                                                               class="form-control px-input font-monospace"
                                                               value="{{ $service->code }}" required>
                                                    </div>

                                                    <div class="col-12 col-md-4">
                                                        <label for="name-{{ $service->id }}" class="px-field-label">
                                                            {{ __('billing::messages.catalogue.name') }}
                                                        </label>
                                                        <input type="text" id="name-{{ $service->id }}" name="name" maxlength="190"
                                                               class="form-control px-input" value="{{ $service->name }}" required>
                                                    </div>

                                                    <div class="col-6 col-md-3">
                                                        <label for="category-{{ $service->id }}" class="px-field-label">
                                                            {{ __('billing::messages.catalogue.category') }}
                                                        </label>
                                                        <select id="category-{{ $service->id }}" name="category" class="form-select px-select">
                                                            @foreach ($categories as $value => $label)
                                                                <option value="{{ $value }}" @selected($service->category->value === $value)>
                                                                    {{ $label }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-6 col-md-3">
                                                        <label for="price-{{ $service->id }}" class="px-field-label">
                                                            {{ __('billing::messages.catalogue.unit_price') }}
                                                        </label>
                                                        <input type="text" id="price-{{ $service->id }}" name="unit_price"
                                                               inputmode="decimal" class="form-control px-input text-end font-monospace"
                                                               value="{{ $service->unit_price->toMajor() }}" required>
                                                    </div>

                                                    <div class="col-12 col-md-4">
                                                        <label for="tax-{{ $service->id }}" class="px-field-label">
                                                            {{ __('billing::messages.catalogue.tax_rate') }}
                                                        </label>
                                                        <select id="tax-{{ $service->id }}" name="tax_rate_id" class="form-select px-select">
                                                            <option value="">{{ __('billing::messages.catalogue.no_tax') }}</option>
                                                            @foreach ($taxRates as $rate)
                                                                <option value="{{ $rate->id }}" @selected($service->tax_rate_id === $rate->id)>
                                                                    {{ $rate->name }} {{ $rate->label() }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-12 col-md-4">
                                                        <div class="form-check mt-md-4">
                                                            <input class="form-check-input" type="checkbox" value="1"
                                                                   name="is_discountable" id="discount-{{ $service->id }}"
                                                                   @checked($service->is_discountable)>
                                                            <label class="form-check-label small" for="discount-{{ $service->id }}">
                                                                {{ __('billing::messages.catalogue.discountable') }}
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-4 d-flex gap-2 justify-content-md-end">
                                                        <button type="button" class="btn px-btn-ghost"
                                                                data-bs-toggle="collapse" data-bs-target="#edit-{{ $service->id }}">
                                                            {{ __('billing::messages.catalogue.cancel') }}
                                                        </button>
                                                        <button type="submit" class="btn px-btn-primary">
                                                            {{ __('billing::messages.catalogue.save') }}
                                                        </button>
                                                    </div>

                                                    <div class="col-12">
                                                        <span class="px-hint">{{ __('billing::messages.catalogue.price_note') }}</span>
                                                    </div>
                                                </form>
                                            </td>
                                        </tr>
                                    @endif
                                @empty
                                    <tr>
                                        <td colspan="6">
                                            <div class="px-empty py-4">
                                                <div class="px-empty__art" aria-hidden="true">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                         stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M3 11V4h7l10 10-7 7z" /><circle cx="7" cy="8" r="1.2" />
                                                    </svg>
                                                </div>

                                                <p class="px-empty__title">{{ __('billing::messages.catalogue.empty') }}</p>
                                                <p class="px-empty__text mb-0">{{ __('billing::messages.catalogue.empty_text') }}</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if ($services->hasPages())
                        <div class="px-pagination d-flex justify-content-center justify-content-md-end px-3 px-md-4 py-3 border-top"
                             style="border-color: var(--px-border) !important;">
                            {{ $services->links() }}
                        </div>
                    @endif
                </div>

                @if ($status === 'withdrawn' || $status === 'all')
                    <p class="px-hint mt-3 mb-0">{{ __('billing::messages.catalogue.withdrawn_hint') }}</p>
                @endif
            </x-results>
        </div>

        @can('create', \App\Modules\Billing\Models\BillableService::class)
            <div class="col-12 col-xl-4">
                <x-px.panel :title="__('billing::messages.catalogue.add_service')" icon="bi-plus-lg" class="mb-3">
                    <form method="POST" action="{{ route('catalogue.services.store') }}">
                        @csrf

                        <x-form.input name="code" :label="__('billing::messages.catalogue.code')" required />
                        <x-form.input name="name" :label="__('billing::messages.catalogue.name')" required />

                        <x-form.select name="category" :label="__('billing::messages.catalogue.category')"
                                       :options="$categories" required />

                        <x-form.input name="unit_price" :label="__('billing::messages.catalogue.unit_price')"
                                      inputmode="decimal" required
                                      :help="__('billing::messages.catalogue.price_note')" />

                        <label for="tax_rate_id" class="px-field-label">{{ __('billing::messages.catalogue.tax_rate') }}</label>
                        <select class="form-select px-select mb-3" id="tax_rate_id" name="tax_rate_id">
                            <option value="">{{ __('billing::messages.catalogue.no_tax') }}</option>
                            @foreach ($taxRates as $rate)
                                <option value="{{ $rate->id }}">
                                    {{ $rate->name }} {{ $rate->label() }}{{ $rate->is_inclusive ? ' · '.__('billing::messages.catalogue.inclusive') : '' }}
                                </option>
                            @endforeach
                        </select>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_discountable"
                                   id="is_discountable" value="1" checked>
                            <label class="form-check-label small" for="is_discountable">
                                {{ __('billing::messages.catalogue.discountable') }}
                            </label>
                        </div>

                        <button type="submit" class="btn px-btn-primary w-100">
                            {{ __('billing::messages.catalogue.add_service') }}
                        </button>
                    </form>
                </x-px.panel>

                <x-px.panel :title="__('billing::messages.catalogue.add_tax')" icon="bi-percent">
                    <form method="POST" action="{{ route('catalogue.taxes.store') }}">
                        @csrf

                        <x-form.input name="name" :label="__('billing::messages.catalogue.name')" required />
                        <x-form.input name="rate" :label="__('billing::messages.catalogue.rate')"
                                      inputmode="decimal" required />

                        {{--
                            The one checkbox on this page that is expensive to get
                            wrong: it decides whether tax is added to the listed
                            price or extracted from within it.
                        --}}
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_inclusive" id="is_inclusive" value="1">
                            <label class="form-check-label small" for="is_inclusive">
                                {{ __('billing::messages.catalogue.inclusive') }}
                            </label>
                            <div class="px-hint">{{ __('billing::messages.catalogue.inclusive_hint') }}</div>
                        </div>

                        <button type="submit" class="btn px-btn-ghost w-100">
                            {{ __('billing::messages.catalogue.add_tax') }}
                        </button>
                    </form>
                </x-px.panel>
            </div>
        @endcan
    </div>
@endsection