@extends('layouts.user')
@section('title', __('customers.add_bill'))

@section('content')
<div class="mx-auto max-w-3xl px-3 py-4">
    <div class="border border-slate-200 bg-white p-4 shadow-sm md:p-4">

        {{-- Header --}}
        <div class="flex flex-col gap-3 border-b border-slate-200 pb-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-base font-bold text-slate-800">{{ __('customers.add_bill') }}</h1>
            </div>

            <a href="{{ route('user.customers.ledger.index', $customer) }}"
               class="inline-flex items-center justify-center border border-slate-300 px-3 py-1.5 text-[12px] font-medium text-slate-700 transition hover:bg-slate-50">
                {{ __('customers.back') }}
            </a>
        </div>

        {{-- Customer info --}}
        <div class="mt-4 border border-blue-100 bg-blue-50 p-3">
            <div class="grid gap-3 sm:grid-cols-2">
                <div>
                    <div class="text-[11px] font-semibold uppercase tracking-wide text-blue-700">
                        {{ __('customers.customer_name_label') }}
                    </div>
                    <div class="mt-1 text-[12px] font-bold text-slate-800">
                        {{ $customer->name }}
                    </div>
                </div>

                <div>
                    <div class="text-[11px] font-semibold uppercase tracking-wide text-blue-700">
                        {{ __('customers.entry_impact') }}
                    </div>
                    <div class="mt-1 text-[12px] font-bold text-rose-600">
                        {{ __('customers.due_will_increase') }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Errors --}}
        @if($errors->any())
            <div class="mt-4 border border-rose-200 bg-rose-50 p-3 text-[12px] text-rose-700">
                <div class="mb-1 font-semibold">{{ __('customers.please_fix_following_errors') }}</div>
                <ul class="ml-4 list-disc space-y-0.5">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form class="mt-4 space-y-4"
              method="POST"
              action="{{ route('user.customers.ledger.bill.store', $customer) }}"
              enctype="multipart/form-data">
            @csrf

            <div>
                <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.type') }}</label>
                <input class="mt-1 w-full border border-slate-300 bg-slate-50 px-3 py-2 text-[12px] text-slate-700"
                       value="{{ __('customers.bill') }}"
                       disabled>
            </div>

            <div class="grid gap-3 md:grid-cols-2">
                <div>
                    <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.debit_amount') }} *</label>
                    <input type="number"
                           step="any"
                           min="0"
                           name="debit"
                           value="{{ old('debit') }}"
                           required
                           placeholder="Amount (e.g. 1000)"
                           class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px] outline-none transition focus:border-slate-900 focus:ring-0">
                </div>

                <div>
                    <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.bill_memo_no_optional') }}</label>
                    <input type="text"
                           name="bill_no"
                           value="{{ old('bill_no') }}"
                           placeholder="BILL-001"
                           class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px] outline-none transition focus:border-slate-900 focus:ring-0">
                </div>
            </div>

            <div>
                <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.bill_memo_photo_optional') }}</label>
                <input type="file"
                       id="bill_photo"
                       name="bill_photo"
                       accept=".jpg,.jpeg,.png,.webp,.pdf"
                       class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px] file:mr-3 file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-[12px] file:font-medium file:text-slate-700 hover:file:bg-slate-200">
                <div class="mt-1 text-[11px] text-slate-500">{{ __('customers.allowed_file_types_max') }}</div>

                <div id="filePreviewBox" class="mt-2 hidden border border-slate-200 bg-slate-50 p-2">
                    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{{ __('customers.selected_file') }}</div>
                    <div id="filePreviewName" class="mt-1 text-[12px] font-medium text-slate-700"></div>
                </div>
            </div>

            <div>
                <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.posted_at_optional') }}</label>
                <input type="datetime-local"
                       name="posted_at"
                       value="{{ old('posted_at', isset($trx) && $trx->posted_at ? \Carbon\Carbon::parse($trx->posted_at)->format('Y-m-d\TH:i') : '') }}"
                       class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px] outline-none transition focus:border-slate-900 focus:ring-0">
            </div>

            <div>
                <label class="text-[11px] font-semibold text-slate-600">{{ __('customers.note_optional') }}</label>
                <textarea name="note"
                          rows="4"
                          placeholder="{{ __('customers.write_note_about_bill') }}"
                          class="mt-1 w-full border border-slate-300 px-3 py-2 text-[12px] outline-none transition focus:border-slate-900 focus:ring-0">{{ old('note') }}</textarea>
            </div>

            <div class="flex flex-wrap items-center gap-2 border-t border-slate-200 pt-3">
                <button type="submit"
                        class="inline-flex items-center justify-center bg-slate-900 px-4 py-2 text-[12px] font-medium text-white transition hover:bg-slate-800">
                    {{ __('customers.save_bill') }}
                </button>

                <a href="{{ route('user.customers.ledger.index', $customer) }}"
                   class="inline-flex items-center justify-center bg-slate-200 px-4 py-2 text-[12px] font-medium text-slate-700 transition hover:bg-slate-300">
                    {{ __('customers.cancel') }}
                </a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('bill_photo');
    const previewBox = document.getElementById('filePreviewBox');
    const previewName = document.getElementById('filePreviewName');

    if (!fileInput) return;

    fileInput.addEventListener('change', function () {
        const file = this.files[0];

        if (!file) {
            previewBox.classList.add('hidden');
            previewName.textContent = '';
            return;
        }

        const allowedTypes = [
            'image/jpeg',
            'image/jpg',
            'image/png',
            'image/webp',
            'application/pdf'
        ];

        const maxSize = 4 * 1024 * 1024;

        if (!allowedTypes.includes(file.type)) {
            this.value = '';

            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: @json(__('customers.only_allowed_file_types')),
                showConfirmButton: false,
                timer: 2200
            });
            return;
        }

        if (file.size > maxSize) {
            this.value = '';

            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: @json(__('customers.file_must_be_under_4mb')),
                showConfirmButton: false,
                timer: 2200
            });
            return;
        }

        previewName.textContent = file.name;
        previewBox.classList.remove('hidden');
    });
});
</script>
@endpush