@use('App\Enums\PaymentType')
@use('App\Enums\PermissionName')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Payments') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />

            @include('payments.partials.stats')

            <div class="overflow-hidden rounded-2xl bg-white shadow-raised" x-data="{ view: 'monthly' }">
                {{-- One row per employee per month, or every payment on its own. --}}
                <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 px-6 py-4">
                    <div class="inline-flex rounded-lg bg-gray-100 p-1 text-sm font-medium" role="tablist">
                        <button type="button" role="tab" @click="view = 'monthly'" :aria-selected="view === 'monthly'" :class="view === 'monthly' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'" class="rounded-md px-3 py-1.5 transition duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
                            {{ __('By month') }}
                        </button>
                        <button type="button" role="tab" @click="view = 'all'" :aria-selected="view === 'all'" :class="view === 'all' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'" class="rounded-md px-3 py-1.5 transition duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
                            {{ __('Every payment') }}
                        </button>
                    </div>

                    <p class="text-sm text-gray-600" x-show="view === 'monthly'">{{ __('Salary, bonus, advance and the rest paid to someone in one month sit on one line. Open a line to see each payment.') }}</p>
                    <p class="text-sm text-gray-600" x-show="view === 'all'" x-cloak>{{ __('Each payment on its own line.') }}</p>
                </div>

                <x-table-toolbar>
                    <x-table-filter table="payments-table payments-monthly-table" name="user_id" :label="__('Employee')">
                        <option value="">{{ __('All employees') }}</option>

                        @foreach ($employees as $employee)
                            <option value="{{ $employee->id }}">{{ $employee->name }}{{ $employee->employee_id ? " ({$employee->employee_id})" : '' }}</option>
                        @endforeach
                    </x-table-filter>

                    @if ($locations->isNotEmpty())
                        <x-table-filter table="payments-table payments-monthly-table" name="location_id" :label="__('Location')">
                            <option value="">{{ __('All locations') }}</option>

                            @foreach ($locations as $location)
                                <option value="{{ $location->id }}">{{ $location->name }}</option>
                            @endforeach
                        </x-table-filter>
                    @endif

                    <x-table-filter table="payments-table payments-monthly-table" name="type" :label="__('Type')">
                        <option value="">{{ __('All types') }}</option>

                        @foreach ($types as $type)
                            <option value="{{ $type->value }}">{{ $type->label() }}</option>
                        @endforeach
                    </x-table-filter>

                    <x-table-filter table="payments-table payments-monthly-table" name="status" :label="__('Status')">
                        <option value="">{{ __('All') }}</option>

                        @foreach ($statuses as $status)
                            <option value="{{ $status->value }}">{{ $status->label() }}</option>
                        @endforeach
                    </x-table-filter>

                    <x-table-filter table="payments-table payments-monthly-table" name="method" :label="__('Paid via')">
                        <option value="">{{ __('All methods') }}</option>

                        @foreach ($methods as $method)
                            <option value="{{ $method->value }}">{{ $method->label() }}</option>
                        @endforeach
                    </x-table-filter>

                    <label class="flex items-center gap-2 text-sm text-gray-600">
                        <span>{{ __('Month') }}</span>
                        <input type="month" name="month" data-datatable-filter="payments-table payments-monthly-table" class="rounded-lg border-gray-300 py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500">
                    </label>

                    @can(PermissionName::CreatePayments->value)
                        <x-slot name="actions">
                            <x-primary-button :href="route('payments.create')">
                                <x-icon-plus />
                                {{ __('Record payment') }}
                            </x-primary-button>
                        </x-slot>
                    @endcan
                </x-table-toolbar>

                <div x-show="view === 'monthly'">
                    <table
                        id="payments-monthly-table"
                        data-datatable="{{ route('payments.monthly') }}"
                        data-search-placeholder="{{ __('Search employee...') }}"
                        data-order="{{ json_encode([[2, 'desc'], [1, 'asc']]) }}"
                        data-columns="{{ json_encode([
                            ['data' => 'DT_RowIndex', 'title' => '#', 'orderable' => false, 'searchable' => false, 'className' => 'dt-number'],
                            ['data' => 'employee', 'name' => 'employee', 'title' => __('Employee')],
                            ['data' => 'month_text', 'name' => 'month', 'title' => __('Month'), 'searchable' => false],
                            ...array_map(fn (PaymentType $type): array => ['data' => "{$type->value}_text", 'title' => $type->label(), 'orderable' => false, 'searchable' => false, 'className' => 'dt-right tabular-nums'], PaymentType::cases()),
                            ['data' => 'total_text', 'name' => 'total_amount', 'title' => __('Total'), 'searchable' => false, 'className' => 'dt-right'],
                            ['data' => 'details', 'title' => '', 'orderable' => false, 'searchable' => false, 'className' => 'dt-right'],
                        ]) }}"
                        data-details-columns="{{ json_encode([
                            ['data' => 'type_badge', 'title' => __('Type')],
                            ['data' => 'amount_text', 'title' => __('Amount')],
                            ['data' => 'method_text', 'title' => __('Paid via')],
                            ['data' => 'date_text', 'title' => __('Date')],
                            ['data' => 'status_badge', 'title' => __('Status')],
                            ['data' => 'actions', 'title' => __('Actions'), 'className' => 'text-end'],
                        ]) }}"
                    ></table>
                </div>

                <div x-show="view === 'all'" x-cloak>
                <table
                    id="payments-table"
                    data-datatable="{{ route('payments.index') }}"
                    data-search-placeholder="{{ __('Search employee, reference or account...') }}"
                    data-order="{{ json_encode([[5, 'desc']]) }}"
                    data-columns="{{ json_encode([
                        ['data' => 'DT_RowIndex', 'title' => '#', 'orderable' => false, 'searchable' => false, 'className' => 'dt-number'],
                        ['data' => 'employee', 'name' => 'employee', 'title' => __('Employee')],
                        ['data' => 'type_badge', 'name' => 'type', 'title' => __('Type'), 'searchable' => false],
                        ['data' => 'amount_text', 'name' => 'amount', 'title' => __('Amount'), 'searchable' => false],
                        ['data' => 'method_text', 'name' => 'method', 'title' => __('Paid via'), 'orderable' => false, 'searchable' => false],
                        ['data' => 'date_text', 'name' => 'paid_on', 'title' => __('Date'), 'searchable' => false],
                        ['data' => 'status_badge', 'name' => 'status', 'title' => __('Status'), 'searchable' => false],
                        ['data' => 'reference', 'name' => 'reference', 'visible' => false],
                        ['data' => 'paid_to', 'name' => 'paid_to', 'visible' => false],
                        ['data' => 'actions', 'title' => __('Actions'), 'orderable' => false, 'searchable' => false, 'className' => 'dt-right'],
                    ]) }}"
                ></table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>