{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: confirm-modal.blade.php
------------------------------------------------------
Use: The single confirmation dialog. Every mutating
     action (create / edit / delete / submit) must pass
     through it before anything is executed.
=====================================================
--}}

<x-ui.modal show="$store.confirm.open" close="$store.confirm.close()">
    <h2 class="text-lg font-bold text-zinc-900" x-text="$store.confirm.title || @js(__('front.confirm.title'))"></h2>

    <p class="mt-3 text-sm leading-7 text-zinc-600" x-text="$store.confirm.message || @js(__('front.confirm.message'))"></p>

    {{-- Optional text input asked for right here (e.g. a reject reason). --}}
    <template x-if="$store.confirm.prompt">
        <div class="mt-4 text-right">
            <label class="mb-1.5 block text-[12.5px] font-bold text-ink-soft" x-text="$store.confirm.prompt.label"></label>
            <input type="text" x-model="$store.confirm.promptValue"
                   x-bind:placeholder="$store.confirm.prompt.placeholder || ''"
                   class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-2.5 text-[13px] outline-none transition focus:border-primary-600 focus:bg-white">
        </div>
    </template>

    {{-- Optional accounting preview: the central-wallet impact of the action,
         with a multi-colour bar showing what is consumed and what remains. --}}
    <template x-if="$store.confirm.projection">
        <div class="mt-4 rounded-2xl border border-line bg-[#faf9fd] p-4 text-right">
            <div class="mb-3 text-[13px] font-bold text-ink" x-text="$store.confirm.projection.title"></div>

            <div class="flex flex-col gap-2">
                <template x-for="(row, i) in $store.confirm.projection.rows" :key="i">
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-[12.5px] text-ink-muted" x-text="row.label"></span>
                        <span class="text-[13px] font-bold" x-bind:class="{
                            'text-ink': row.tone === 'neutral',
                            'text-secondary-500': row.tone === 'debit' || row.tone === 'danger',
                            'text-green-600': row.tone === 'ok',
                            'text-amber-600': row.tone === 'warn',
                        }" x-text="row.value"></span>
                    </div>
                </template>
            </div>

            {{-- Multi-colour bar --}}
            <div class="mt-3.5 flex h-2.5 w-full overflow-hidden rounded-full bg-[#eceaf3]" dir="ltr">
                <template x-for="(seg, i) in $store.confirm.projection.bar" :key="i">
                    <div class="h-full" x-bind:class="seg.class" x-bind:style="`width:${seg.pct}%`"></div>
                </template>
            </div>

            {{-- The 48h reminder + return-to-central note --}}
            <p class="mt-3 text-[11.5px] leading-6 text-ink-faint" x-text="$store.confirm.projection.note"></p>

            {{-- Warning banner when the balance goes negative / falls short --}}
            <template x-if="$store.confirm.projection.warning">
                <div class="mt-3 flex items-start gap-2 rounded-xl border border-[#f6ccd1] bg-secondary-50 px-3 py-2.5">
                    <svg class="mt-0.5 size-4 shrink-0 text-secondary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a1.5 1.5 0 0 0 1.3 2.3h17.8a1.5 1.5 0 0 0 1.3-2.3L13.7 3.9a1.5 1.5 0 0 0-2.6 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                    <span class="text-[12px] font-bold leading-6 text-secondary-500" x-text="$store.confirm.projection.warning"></span>
                </div>
            </template>
        </div>
    </template>

    <div class="mt-6 flex gap-3">
        <button
            type="button"
            class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
            x-on:click="$store.confirm.accept()"
            x-bind:disabled="$store.confirm.busy"
        >
            <span x-show="$store.confirm.busy" class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
            {{ __('front.actions.confirm') }}
        </button>

        <button
            type="button"
            class="inline-flex flex-1 items-center justify-center rounded-xl border border-zinc-200 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
            x-on:click="$store.confirm.close()"
            x-bind:disabled="$store.confirm.busy"
        >
            {{ __('front.actions.cancel') }}
        </button>
    </div>
</x-ui.modal>