{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: _form.blade.php
------------------------------------------------------
Use: Shared organization form (create + edit tab):
     name, support phone, credit cap with money mask,
     status, and the square-logo upload from the design.
     Expects $organization (nullable), $action, $submitLabel,
     $confirmMessage; add $method for updates.
=====================================================
--}}

<div x-data="organizationForm({
        cap: @js((string) old('credit_cap', $organization?->credit_cap ?? '')),
        confirmMessage: @js($confirmMessage),
        badType: @js(__('front.verification.file_bad_type')),
        tooBig: @js(__('admin.organizations.logo_too_big')),
     })">
    <form method="POST" action="{{ $action }}" enctype="multipart/form-data" x-ref="orgForm"
          x-on:submit.prevent="submit()">
        @csrf
        @if (($method ?? 'POST') !== 'POST')
            @method($method)
        @endif

        <input type="hidden" name="credit_cap" x-bind:value="capRaw">

        <div class="grid items-start gap-6 lg:grid-cols-[1fr_260px]">
            <div class="flex flex-col gap-4">
                <div>
                    <x-ui.input name="name" :label="__('admin.organizations.fields.name')" :value="$organization?->name" required />
                    @error('name')<p class="mt-1.5 text-xs leading-6 text-secondary-500">{{ $message }}</p>@enderror
                </div>

                <div>
                    <x-ui.input name="support_phone" :label="__('admin.organizations.fields.support_phone')" :value="$organization?->support_phone" dir="ltr" class="text-left" inputmode="numeric" />
                    @error('support_phone')<p class="mt-1.5 text-xs leading-6 text-secondary-500">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="mb-1.5 block text-sm font-medium text-zinc-700">{{ __('admin.organizations.fields.credit_cap') }}</label>
                    {{-- Unit-bearing numeric input: RTL, right-aligned. --}}
                    <input
                        type="text"
                        inputmode="numeric"
                        x-ref="capDisplay"
                        x-on:input="onCap($event)"
                        class="block w-full rounded-xl border border-zinc-200 bg-white px-3.5 py-2.5 text-right text-sm text-zinc-900 transition focus:border-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-600/20"
                    >
                    @error('credit_cap')<p class="mt-1.5 text-xs leading-6 text-secondary-500">{{ $message }}</p>@enderror
                </div>

                <div class="max-w-xs">
                    <label class="mb-1.5 block text-sm font-medium text-zinc-700">{{ __('admin.organizations.fields.status') }}</label>
                    <select name="status" class="block w-full rounded-xl border border-zinc-200 bg-white px-3.5 py-2.5 text-sm text-zinc-900 transition focus:border-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-600/20">
                        @foreach (\App\Models\Organization::STATUSES as $statusOption)
                            <option value="{{ $statusOption }}" @selected(old('status', $organization?->status ?? 'active') === $statusOption)>
                                {{ __("admin.organizations.statuses.{$statusOption}") }}
                            </option>
                        @endforeach
                    </select>
                    @error('status')<p class="mt-1.5 text-xs leading-6 text-secondary-500">{{ $message }}</p>@enderror
                </div>

                <div class="flex justify-end">
                    <x-ui.button type="submit">
                        {{ $submitLabel }}
                    </x-ui.button>
                </div>
            </div>

            {{-- Square logo (center-cropped to 400x400; original discarded). --}}
            <div>
                <label class="mb-1.5 block text-sm font-medium text-zinc-700">{{ __('admin.organizations.fields.logo') }}</label>
                <input type="file" name="logo" x-ref="logoInput" accept="image/jpeg,image/png" class="hidden" x-on:change="onLogo($event)">
                <button
                    type="button"
                    class="w-full rounded-2xl border-[1.5px] border-dashed border-[#cfc9e6] bg-[#faf9fd] p-6 text-center transition hover:border-primary-600 hover:bg-[#f4f1fc]"
                    x-on:click="$refs.logoInput.click()"
                >
                    <template x-if="preview">
                        <img x-bind:src="preview" alt="" class="mx-auto mb-3 size-16 rounded-2xl object-cover">
                    </template>
                    <template x-if="! preview">
                        @if ($organization?->logo_path)
                            <img src="{{ route('media.organization-logo', $organization) }}" alt="{{ $organization->name }}" class="mx-auto mb-3 size-16 rounded-2xl object-cover">
                        @else
                            <span class="mx-auto mb-3 flex size-16 items-center justify-center rounded-2xl bg-gradient-to-bl from-[#e9e5f9] to-[#d9d1f4] text-primary-600">
                                <svg class="size-[30px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" 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
                    </template>
                    <span class="block text-[12.5px] font-bold text-primary-600">{{ __('admin.organizations.fields.logo_change') }}</span>
                    <span class="mt-1 block text-[11px] text-ink-faint">{{ __('admin.organizations.fields.logo_hint') }}</span>
                </button>
                @error('logo')<p class="mt-1.5 text-xs leading-6 text-secondary-500">{{ $message }}</p>@enderror
            </div>
        </div>
    </form>
</div>