{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: show.blade.php
------------------------------------------------------
Use: Organization detail: the info tab with the cap
     progress bar and installment stats, and the edit
     tab on the shared form. Bulk settlement arrives
     with the repayment milestone.
=====================================================
--}}

@extends('layouts.admin')

@section('title', $organization->name.' - '.__('admin.organizations.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('admin.users.index')],
        ['label' => __('admin.organizations.breadcrumb'), 'url' => route('admin.organizations.index')],
        ['label' => $organization->name],
    ]" />
@endsection

@section('page')
    @php
        $canManage = auth('admin')->user()->allowed('organizations.manage');
        $usedPercent = $organization->credit_cap > 0
            ? intdiv($organization->remainingCap() * 100, $organization->credit_cap)
            : 0;
    @endphp

    <a href="{{ route('admin.organizations.index') }}" class="mb-4 inline-flex items-center gap-1.5 text-[13.5px] font-bold text-ink-muted transition hover:text-primary-600">
        <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
        {{ __('admin.organizations.back_to_list') }}
    </a>

    <div class="overflow-hidden rounded-2xl border border-line bg-white" x-data="{ tab: 'info' }">

        {{-- ===== Header ===== --}}
        <div class="flex flex-wrap items-center gap-4 border-b border-line p-6">
            @if ($organization->logo_path)
                <img src="{{ route('media.organization-logo', $organization) }}" alt="{{ $organization->name }}" class="size-[60px] rounded-2xl object-cover">
            @else
                <span class="flex size-[60px] shrink-0 items-center justify-center rounded-2xl bg-gradient-to-bl from-[#e9e5f9] to-[#d9d1f4] text-primary-600">
                    <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 21V6l7-3v18"/><path d="M11 8h6a2 2 0 0 1 2 2v11"/><path d="M4 21h17"/></svg>
                </span>
            @endif
            <div class="min-w-0 flex-1">
                <div class="text-lg font-bold">{{ $organization->name }}</div>
                <div class="text-[13px] text-ink-faint">@fa($stats['users']) {{ __('admin.organizations.users_suffix') }}</div>
            </div>
            <span @class([
                'rounded-2xl px-3 py-1.5 text-[12.5px] font-bold',
                'bg-[#e7f7ee] text-green-600' => $organization->status === \App\Models\Organization::STATUS_ACTIVE,
                'bg-secondary-50 text-secondary-500' => $organization->status === \App\Models\Organization::STATUS_FULL,
                'bg-[#f1f0f5] text-ink-muted' => $organization->status === \App\Models\Organization::STATUS_INACTIVE,
            ])>
                {{ __("admin.organizations.statuses.{$organization->status}") }}
            </span>
        </div>

        {{-- ===== Tabs ===== --}}
        <div class="flex gap-1 border-b border-line px-6">
            <button type="button" class="-mb-px border-b-2 px-4.5 py-3.5 text-sm font-bold transition"
                    x-bind:class="tab === 'info' ? 'border-primary-600 text-primary-600' : 'border-transparent text-ink-muted hover:text-primary-600'"
                    x-on:click="tab = 'info'">{{ __('admin.organizations.tab_info') }}</button>
            @if ($canManage)
                <button type="button" class="-mb-px border-b-2 px-4.5 py-3.5 text-sm font-bold transition"
                        x-bind:class="tab === 'edit' ? 'border-primary-600 text-primary-600' : 'border-transparent text-ink-muted hover:text-primary-600'"
                        x-on:click="tab = 'edit'">{{ __('admin.organizations.tab_edit') }}</button>
            @endif
        </div>

        {{-- ===== Info tab ===== --}}
        <div class="p-6" x-show="tab === 'info'">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div class="rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] p-4">
                    <div class="mb-1.5 text-xs text-ink-faint">{{ __('admin.organizations.cards.credit') }}</div>
                    <div class="text-sm font-bold">
                        <span class="text-green-600">@toman($organization->remainingCap())</span>
                        <span class="text-[11.5px] font-normal text-ink-faint">{{ __('admin.organizations.of') }} @toman($organization->credit_cap) {{ __('admin.toman') }}</span>
                    </div>
                    <div class="mt-2 h-1.5 overflow-hidden rounded-md bg-[#eeedf3]">
                        <div class="h-full rounded-md bg-gradient-to-l from-primary-600 to-primary-400" style="width: {{ $usedPercent }}%"></div>
                    </div>
                </div>
                <div class="rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] p-4">
                    <div class="mb-1.5 text-xs text-ink-faint">{{ __('admin.organizations.cards.open_installments') }}</div>
                    <div class="text-[15px] font-bold text-amber-600">@fa($stats['open_count']) <span class="text-[11.5px] font-normal text-ink-faint">(@toman($stats['open_sum']) {{ __('admin.users.wallet.toman') }})</span></div>
                </div>
                <div class="rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] p-4">
                    <div class="mb-1.5 text-xs text-ink-faint">{{ __('admin.organizations.cards.penalties') }}</div>
                    <div class="text-[15px] font-bold text-secondary-500">@fa($stats['penalty_count']) <span class="text-[11.5px] font-normal text-ink-faint">(@toman($stats['penalty_sum']) {{ __('admin.users.wallet.toman') }})</span></div>
                </div>
            </div>

            @php
                $canSettle = auth('admin')->user()->allowed('organizations.settle');
                $selectable = $installments->reject(fn ($i) => $i->isPaid());
            @endphp

            {{-- One Alpine scope around the whole section: the export button
                 has to see the same selection the settle buttons do. --}}
            <div x-data="orgSettlement({
                ids: @js($selectable->pluck('id')->values()),
                totals: @js($selectable->mapWithKeys(fn ($i) => [$i->id => $i->payable()])),
                strings: @js([
                    'noSelection' => __('admin.organizations.no_selection'),
                    'referenceRequired' => __('admin.organizations.reference_required'),
                    'confirmForgive' => __('admin.organizations.confirm_forgive'),
                ]),
            })">

            <div class="mb-3 mt-6 flex flex-wrap items-center justify-between gap-3">
                <span class="text-[13.5px] font-bold">{{ __('admin.organizations.installments_section') }}</span>

                {{-- Status filter. The search term rides along so the two
                     narrow the same list instead of resetting each other. --}}
                <div class="flex flex-wrap gap-1.5">
                    @foreach ($filters as $key)
                        <a href="{{ route('admin.organizations.show', array_filter(['organization' => $organization, 'installments' => $key, 'q' => $search ?: null])) }}"
                           @class([
                               'rounded-[9px] px-3 py-1.5 text-[12px] font-bold transition',
                               'bg-primary-600 text-white shadow-sm' => $filter === $key,
                               'bg-[#f2f0fa] text-ink-soft hover:bg-[#e8e3f8]' => $filter !== $key,
                           ])>
                            {{ __("admin.organizations.inst_filters.{$key}") }}
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
                <form method="GET" action="{{ route('admin.organizations.show', $organization) }}" class="flex items-center rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3 transition focus-within:border-primary-600 focus-within:bg-white">
                    <input type="hidden" name="installments" value="{{ $filter }}">
                    <svg class="size-4 shrink-0 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
                    <input type="text" name="q" value="{{ $search }}" placeholder="{{ __('admin.organizations.inst_search_placeholder') }}" class="w-44 border-none bg-transparent px-2 py-2 text-[13px] outline-none placeholder:text-ink-faint sm:w-56">
                </form>

                {{-- Ticked rows win; with nothing ticked the workbook is the
                     whole filtered, searched list. --}}
                <form method="POST" action="{{ route('admin.organizations.export', $organization) }}">
                    @csrf
                    <input type="hidden" name="installments" value="{{ $filter }}">
                    <input type="hidden" name="q" value="{{ $search }}">
                    <template x-for="id in selected" :key="id">
                        <input type="hidden" name="installment_ids[]" x-bind:value="id">
                    </template>

                    <button type="submit" @disabled($installments->isEmpty())
                            class="inline-flex items-center gap-2 rounded-[11px] border-[1.5px] border-[#e4ddf7] bg-white px-5 py-2.5 text-[13px] font-bold text-primary-600 transition hover:bg-[#f4f1fc] disabled:cursor-not-allowed disabled:opacity-50">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M8 11l4 4 4-4"/><path d="M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2"/></svg>
                        <span x-show="! hasSelection">{{ __('admin.organizations.export.button') }}</span>
                        <span x-show="hasSelection" x-cloak>
                            {{ __('admin.organizations.export.button_selected') }}
                            (<span x-text="faCount()"></span>)
                        </span>
                    </button>
                </form>
            </div>

            <p class="mb-3 text-[12px] leading-6 text-ink-muted">{{ __('admin.organizations.installments_note') }}</p>

            @if ($installments->isEmpty())
                <p class="rounded-[14px] border border-dashed border-[#d9d6e6] px-4 py-6 text-center text-xs leading-6 text-ink-muted">
                    {{ $search !== ''
                        ? __('admin.organizations.no_installments_search')
                        : __("admin.organizations.no_installments_filtered.{$filter}") }}
                </p>
            @else
                <div>
                    <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                        <table class="w-full min-w-[820px] border-collapse text-right text-[13px]">
                            <thead>
                                <tr class="bg-[#faf9fd] text-ink-muted">
                                    @if ($canSettle)
                                        <th class="w-[46px] px-4 py-3 text-center">
                                            <input type="checkbox" x-bind:checked="allSelected" x-on:change="toggleAll()"
                                                   @disabled($selectable->isEmpty())
                                                   class="size-4 accent-[#563bb1]" aria-label="{{ __('admin.organizations.select_all') }}">
                                        </th>
                                    @endif
                                    <th class="px-4 py-3 font-bold">{{ __('admin.organizations.inst_columns.user') }}</th>
                                    <th class="px-4 py-3 font-bold">{{ __('admin.organizations.inst_columns.code') }}</th>
                                    <th class="px-4 py-3 font-bold">{{ __('admin.organizations.inst_columns.sequence') }}</th>
                                    <th class="px-4 py-3 font-bold">{{ __('admin.organizations.inst_columns.due') }}</th>
                                    <th class="px-4 py-3 font-bold">{{ __('admin.organizations.inst_columns.amount') }}</th>
                                    <th class="px-4 py-3 font-bold">{{ __('admin.organizations.inst_columns.status') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($installments as $installment)
                                    <tr class="border-t border-[#f0eff5]">
                                        @if ($canSettle)
                                            <td class="px-4 py-3 text-center">
                                                @if (! $installment->isPaid())
                                                    <input type="checkbox" class="size-4 accent-[#563bb1]"
                                                           x-bind:checked="selected.includes({{ $installment->id }})"
                                                           x-on:change="toggle({{ $installment->id }})"
                                                           aria-label="{{ $installment->creditRequest->code }}">
                                                @endif
                                            </td>
                                        @endif
                                        <td class="px-4 py-3">
                                            <a href="{{ route('admin.users.show', $installment->creditRequest->user) }}" target="_blank" class="font-bold text-ink transition hover:text-primary-600">
                                                {{ $installment->creditRequest->user->fullName() }}
                                            </a>
                                        </td>
                                        <td class="px-4 py-3 text-right text-ink-soft" dir="ltr">{{ $installment->creditRequest->code }}</td>
                                        <td class="px-4 py-3 text-ink-soft">@fa($installment->sequence) {{ __('admin.organizations.inst_of') }} @fa($installment->creditRequest->plan->months)</td>
                                        <td class="px-4 py-3 text-ink-soft">@jalali($installment->due_at)</td>
                                        <td class="px-4 py-3 font-bold">
                                            @toman($installment->amount) {{ __('admin.users.wallet.toman') }}
                                            @if ($installment->penalty_amount > 0)
                                                <span class="text-[11px] text-secondary-500">+ @toman($installment->penalty_amount) {{ __('admin.users.wallet.toman') }}</span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3">
                                            <span @class([
                                                'rounded-2xl px-2.5 py-1.5 text-xs font-bold',
                                                'bg-[#f1f0f5] text-ink-muted' => $installment->status === \App\Models\Installment::STATUS_UPCOMING,
                                                'bg-[#fff5e6] text-amber-600' => $installment->status === \App\Models\Installment::STATUS_DUE,
                                                'bg-secondary-50 text-secondary-500' => $installment->status === \App\Models\Installment::STATUS_OVERDUE,
                                                'bg-[#e7f7ee] text-green-600' => $installment->status === \App\Models\Installment::STATUS_PAID,
                                            ])>
                                                {{ __("front.installments.statuses.{$installment->status}") }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if ($canSettle && $selectable->isNotEmpty())
                        {{-- Selection summary + bulk actions --}}
                        <div class="mt-3.5 flex flex-wrap items-center justify-between gap-3 rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] px-4 py-3">
                            <div class="text-[12.5px] text-ink-soft">
                                {{ __('admin.organizations.selected_count') }}
                                <span class="font-bold text-primary-600" x-text="faCount()"></span>
                                <span class="mr-2">{{ __('admin.organizations.selected_total') }}</span>
                                <span class="font-bold" x-text="faTotal()"></span>
                                {{ __('admin.users.wallet.toman') }}
                            </div>
                            <div class="flex flex-wrap gap-2">
                                <button type="button" x-on:click="forgive()" x-bind:disabled="busy || ! hasSelection"
                                        class="rounded-[10px] bg-[#f2f0fa] px-4 py-2 text-[12.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8] disabled:cursor-not-allowed disabled:opacity-50">
                                    {{ __('admin.organizations.forgive_penalties') }}
                                </button>
                                <button type="button" x-on:click="openSettle()" x-bind:disabled="busy || ! hasSelection"
                                        class="rounded-[10px] bg-green-600 px-4 py-2 text-[12.5px] font-bold text-white shadow-sm transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50">
                                    {{ __('admin.organizations.settle') }}
                                </button>
                            </div>
                        </div>

                        {{-- Hidden forms carrying the selection --}}
                        <form x-ref="settleForm" method="POST" action="{{ route('admin.organizations.settle', $organization) }}" class="hidden">
                            @csrf
                            <input type="hidden" name="reference" x-bind:value="reference">
                            <template x-for="id in selected" :key="id">
                                <input type="hidden" name="installment_ids[]" x-bind:value="id">
                            </template>
                        </form>
                        <form x-ref="forgiveForm" method="POST" action="{{ route('admin.organizations.forgive', $organization) }}" class="hidden">
                            @csrf
                            <template x-for="id in selected" :key="id">
                                <input type="hidden" name="installment_ids[]" x-bind:value="id">
                            </template>
                        </form>

                        {{-- Settlement modal: deposit warning + tracking code, confirm
                             unlocks after a short delay. --}}
                        <template x-teleport="body">
                            <div x-show="settleOpen" x-cloak x-transition.opacity
                                 class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5"
                                 x-on:click.self="closeSettle()" x-on:keydown.escape.window="closeSettle()">
                                <div class="w-full max-w-[480px] overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="settleOpen" x-transition.scale.origin.center>
                                    <div class="border-b border-line px-6 py-5">
                                        <h3 class="text-[17px] font-bold">{{ __('admin.organizations.settle_title') }}</h3>
                                        <p class="mt-1 text-[12.5px] text-ink-faint">{{ __('admin.organizations.settle_subtitle') }}</p>
                                    </div>
                                    <div class="px-6 py-5">
                                        <div class="mb-4 flex items-center justify-between rounded-xl bg-[#faf9fd] px-4 py-3 text-[13px]">
                                            <span class="text-ink-muted">{{ __('admin.organizations.settle_amount') }}</span>
                                            <span class="font-bold"><span x-text="faTotal()"></span> {{ __('admin.users.wallet.toman') }}</span>
                                        </div>

                                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('admin.organizations.reference_label') }}</label>
                                        <input type="text" x-model="reference" dir="ltr"
                                               placeholder="{{ __('admin.organizations.reference_placeholder') }}"
                                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-sm outline-none transition focus:border-primary-600 focus:bg-white">

                                        <div class="mt-4 flex items-start gap-2.5 rounded-xl border border-[#f6e6c6] bg-[#fff7ea] px-4 py-3">
                                            <span class="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-amber-500/15 text-amber-600" aria-hidden="true">
                                                <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><circle cx="12" cy="16" r="0.4"/></svg>
                                            </span>
                                            <p class="text-[12px] font-bold leading-6 text-[#996515]">{{ __('admin.organizations.settle_warning') }}</p>
                                        </div>
                                    </div>
                                    <div class="flex gap-2.5 border-t border-line px-6 py-4">
                                        <button type="button" x-on:click="closeSettle()"
                                                class="flex-1 rounded-xl bg-[#f2f0fa] py-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">
                                            {{ __('admin.actions.cancel') }}
                                        </button>
                                        <button type="button" x-on:click="submitSettle()" x-bind:disabled="countdown > 0 || busy"
                                                class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl py-3 text-sm font-bold transition disabled:cursor-not-allowed"
                                                x-bind:class="countdown > 0 || busy ? 'bg-[#eeedf3] text-[#b4b1c4]' : 'bg-green-600 text-white shadow-lg shadow-green-600/25 hover:bg-green-700'">
                                            <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                                            <span x-show="countdown > 0">{{ __('admin.organizations.settle_confirm') }} (<span x-text="toFa(countdown)"></span>)</span>
                                            <span x-show="countdown === 0">{{ __('admin.organizations.settle_confirm') }}</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    @endif
                </div>
            @endif

            </div>
        </div>

        {{-- ===== Edit tab ===== --}}
        @if ($canManage)
            <div class="p-6" x-show="tab === 'edit'" x-cloak>
                @include('admin.organizations._form', [
                    'organization' => $organization,
                    'action' => route('admin.organizations.update', $organization),
                    'method' => 'PUT',
                    'submitLabel' => __('admin.organizations.save'),
                    'confirmMessage' => __('admin.organizations.confirm_save'),
                ])
            </div>
        @endif
    </div>
@endsection