@csrf
@if(isset($clientPayment))
    @method('PUT')
@endif

<div class="row g-4">
    <div class="col-12">
        <div class="p-3 border rounded bg-light-primary border-primary-subtle">
            <h6 class="mb-1">{{ __('admin.client_payments.form_helper_title') }}</h6>
            <p class="text-muted mb-0">{{ __('admin.client_payments.form_helper_text') }}</p>
        </div>
    </div>

    <div class="col-12">
        <h5 class="mb-1">{{ __('admin.client_payments.sections.assignment') }}</h5>
        <p class="text-muted mb-0 small">{{ __('admin.client_payments.section_hints.assignment') }}</p>
    </div>

    <div class="col-md-6">
        <label class="form-label">{{ __('admin.client_payments.fields.client_id') }} <span class="text-danger">*</span></label>
        <select id="payment-client-select" name="client_id" class="form-select @error('client_id') is-invalid @enderror" required>
            <option value="">-- {{ __('admin.client_payments.placeholders.select_client') }} --</option>
            @foreach($clients as $client)
                <option value="{{ $client->id }}" @selected((string) old('client_id', $selectedClientId ?? $clientPayment->client_id ?? null) === (string) $client->id)>{{ $client->name }}</option>
            @endforeach
        </select>
        @error('client_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">{{ __('admin.client_payments.fields.project_id') }} <span class="text-danger">*</span></label>
        <select
            id="payment-project-select"
            name="project_id"
            class="form-select @error('project_id') is-invalid @enderror"
            required
            data-selected="{{ old('project_id', $selectedProjectId ?? $clientPayment->project_id ?? null) }}"
            data-placeholder="{{ __('admin.client_payments.placeholders.select_project') }}"
        >
            <option value="">-- {{ __('admin.client_payments.placeholders.select_project') }} --</option>
            @foreach($projects as $project)
                <option value="{{ $project->id }}" @selected((string) old('project_id', $selectedProjectId ?? $clientPayment->project_id ?? null) === (string) $project->id)>
                    {{ $project->project_name ?: $project->name }}
                </option>
            @endforeach
        </select>
        @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-12"><hr class="my-0"></div>

    <div class="col-12">
        <h5 class="mb-1">{{ __('admin.client_payments.sections.payment') }}</h5>
        <p class="text-muted mb-0 small">{{ __('admin.client_payments.section_hints.payment') }}</p>
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('admin.client_payments.fields.payment_type') }} <span class="text-danger">*</span></label>
        <select name="payment_type" class="form-select @error('payment_type') is-invalid @enderror" required>
            @foreach($types as $paymentType => $label)
                <option value="{{ $paymentType }}" @selected(old('payment_type', $clientPayment->payment_type ?? \App\Models\ClientPayment::TYPE_DOWN_PAYMENT) === $paymentType)>{{ $label }}</option>
            @endforeach
        </select>
        @error('payment_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('admin.client_payments.fields.amount') }} <span class="text-danger">*</span></label>
        <div class="input-group">
            <input type="number" step="0.01" min="0.01" name="amount" value="{{ old('amount', $clientPayment->amount ?? '') }}" class="form-control @error('amount') is-invalid @enderror" required>
            <span class="input-group-text">{{ __('admin.client_payments.currency') }}</span>
            @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('admin.client_payments.fields.payment_date') }} <span class="text-danger">*</span></label>
        <input type="date" name="payment_date" value="{{ old('payment_date', isset($clientPayment) && $clientPayment->payment_date ? $clientPayment->payment_date->format('Y-m-d') : date('Y-m-d')) }}" class="form-control @error('payment_date') is-invalid @enderror" required>
        @error('payment_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('admin.client_payments.fields.payment_method') }} <span class="text-danger">*</span></label>
        <select name="payment_method" class="form-select @error('payment_method') is-invalid @enderror" required>
            @foreach($methods as $method => $label)
                <option value="{{ $method }}" @selected(old('payment_method', $clientPayment->payment_method ?? 'cash') === $method)>{{ $label }}</option>
            @endforeach
        </select>
        @error('payment_method')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('admin.client_payments.fields.status') }} <span class="text-danger">*</span></label>
        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
            @foreach($statuses as $statusValue => $label)
                <option value="{{ $statusValue }}" @selected(old('status', $clientPayment->status ?? \App\Models\ClientPayment::STATUS_CONFIRMED) === $statusValue)>{{ $label }}</option>
            @endforeach
        </select>
        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">{{ __('admin.client_payments.fields.reference_number') }}</label>
        <input type="text" name="reference_number" value="{{ old('reference_number', $clientPayment->reference_number ?? '') }}" class="form-control @error('reference_number') is-invalid @enderror" placeholder="{{ __('admin.client_payments.placeholders.reference_number') }}">
        @error('reference_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">{{ __('admin.client_payments.fields.received_by') }}</label>
        <select name="received_by" class="form-select @error('received_by') is-invalid @enderror">
            <option value="">-- {{ __('admin.client_payments.placeholders.select_receiver') }} --</option>
            @foreach($users as $user)
                <option value="{{ $user->id }}" @selected((string) old('received_by', $clientPayment->received_by ?? null) === (string) $user->id)>{{ $user->name }}</option>
            @endforeach
        </select>
        @error('received_by')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">{{ __('admin.client_payments.fields.notes') }}</label>
        <textarea name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror" placeholder="{{ __('admin.client_payments.placeholders.notes') }}">{{ old('notes', $clientPayment->notes ?? '') }}</textarea>
        @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-12 d-flex gap-2 flex-wrap pt-2">
        <button type="submit" class="btn btn-primary">
            <i class="ti ti-device-floppy me-1"></i>{{ $submitLabel ?? __('admin.actions.save') }}
        </button>
        @if(! isset($clientPayment))
            <button type="submit" name="save_and_add_another" value="1" class="btn btn-outline-primary">
                <i class="ti ti-plus me-1"></i>{{ __('admin.client_payments.actions.save_and_add_another') }}
            </button>
        @endif
        <a href="{{ route('admin.client_payments.index') }}" class="btn btn-outline-secondary">{{ __('admin.actions.cancel') }}</a>
    </div>
</div>

@push('scripts')
<script>
    $(function () {
        const projectsEndpoint = '{{ route('admin.client_payments.client-projects') }}';
        const $clientSelect = $('#payment-client-select');
        const $projectSelect = $('#payment-project-select');

        function renderProjects(items, selectedValue) {
            const placeholder = $projectSelect.data('placeholder') || '';
            const currentValue = selectedValue || '';

            $projectSelect.empty().append(new Option('-- ' + placeholder + ' --', ''));

            $.each(items, function (_, project) {
                const option = new Option(project.name, project.id, false, String(project.id) === String(currentValue));
                $projectSelect.append(option);
            });
        }

        function loadProjects(clientId, selectedValue) {
            if (!clientId) {
                renderProjects([], '');
                return;
            }

            $.getJSON(projectsEndpoint, {client_id: clientId})
                .done(function (response) {
                    renderProjects(response || [], selectedValue);
                })
                .fail(function () {
                    renderProjects([], '');
                });
        }

        $clientSelect.on('change', function () {
            loadProjects($(this).val(), '');
        });

        if ($clientSelect.val()) {
            loadProjects($clientSelect.val(), $projectSelect.data('selected'));
        }
    });
</script>
@endpush