@php $title = isset($item) ? __('Update Voucher') : __('Add Voucher'); @endphp

@extends('layouts.master', [
    $title
])

@section('content')

    <x-page-header
        :title="$title"
        :breadcrumbs="[
            ['name' => $title],
            ['name' => __('Payment Vouchers List'), 'url' => route('accounting.payment-vouchers.index')],
        ]"
    />

    <form id="form-vouchers" method="POST" enctype="multipart/form-data">
        @csrf
        <x-card :header="false" >

            {{-- Voucher Information --}}
            <x-row>
                <x-col size="4">
                    <x-form-label :label="__('Type')" for="type" :required="true"/>
                    <x-form-select name="type" id="type" class="payment-vouchers-types-select"
                        :options="config('data-select.payment-vouchers-types')" :valueName="LOCALIZE_NAME" selected="internal"
                    />
                </x-col>
                <x-col size="4" class="customers-col">
                    <x-form-label :label="__('Customer')" for="customer_id" :required="true"/>
                    <x-form-select name="customer_id" id="customer_id" class="customers-select"/>
                </x-col>
                <x-col size="4" class="subscriptions-col">
                    <x-form-label :label="__('Subscription')" for="subscription_id"/>
                    <x-form-select name="subscription_id" id="subscription_id" class="subscriptions-select"/>
                </x-col>
                <x-col size="4" class="payee-name-col d-none">
                    <x-form-label :label="__('Payee Name')" for="payee_name" :required="true"/>
                    <x-form-input type="text" name="payee_name" id="payee_name" class="payee-name-input"/>
                </x-col>
            </x-row>

            {{-- Payment Method --}}
            <x-row class="mt-3">
                <x-col size="4">
                    <x-form-label :label="__('Payment Method')" for="payment_method_id" :required="true"/>
                    <x-form-select name="payment_method_id" id="payment_method_id" class="payment-methods-select"/>
                </x-col>
                <x-col size="4" class="banks-col d-none">
                    <x-form-label :label="__('Bank')" for="bank_id" :required="true"/>
                    <x-form-select name="bank_id" id="bank_id" class="banks-select"/>
                </x-col>
                <x-col size="4">
                    <x-form-label :label="__('Reference Number')" for="reference_number"/>
                    <x-form-input name="reference_number" id="reference_number"/>
                </x-col>
            </x-row>

            {{-- Payment Details --}}
            <x-row class="mt-3">
                <x-col size="2" class="customer-wallet-col">
                    <x-form-label :label="__('Customer Wallet')" for="customer_wallet"/>
                    <x-form-input type="number" step="0.01" id="customer_wallet" class="customer-wallet-input" readonly/>
                </x-col>
                <x-col size="2">
                    <x-form-label :label="__('Amount')" for="amount" :required="true"/>
                    <x-form-input type="number" step="0.01" name="amount" id="amount"/>
                </x-col>
                <x-col size="4">
                    <x-form-label :label="__('Payment Date')" for="payment_date" :required="true"/>
                    <x-form-input name="payment_date" id="payment_date" class="flatpickr_date" :value="$item['payment_date'] ?? \Carbon\Carbon::now()->format(settings('date_format'))"/>
                </x-col>
            </x-row>

            {{-- Additional Information --}}
            <x-row class="mt-3">
                <x-col size="4">
                    <x-form-label :label="__('Attachments')" for="attachments" :description="__('Accepts photos of the type') . ' .png, .jpg, .jpeg'"/>
                    <x-form-input type="file" name="attachments[]" id="attachments"/>
                </x-col>

                <x-col size="12">
                    <x-form-label :label="__('Notes')" for="notes"/>
                    <x-form-textarea name="notes" id="notes"/>
                </x-col>
            </x-row>

            <x-slot:footer>
                <x-button type="submit" size="sm" class="btn-primary button-vouchers"
                          data-form-url="{{ route('accounting.payment-vouchers.store') }}"
                          data-redirect-url="{{ route('accounting.payment-vouchers.index') }}"
                          data-label="{{ __('Save Data') }}">{{ __('Save Data') }}</x-button>
            </x-slot:footer>
        </x-card>
    </form>

@endsection

@section('modals')

@endsection


@section('scripts')
    <script>
        $(document).ready(() => {
            $('.button-vouchers').on('click', function (e) {
                e.preventDefault();

                handleFormStoreSubmission($(this));
            });
        });

        $(document).ready(() => {
            let inputs = {
                customers: $(".customers-select"),
                subscriptions: $(".subscriptions-select"),
                paymentMethods: $(".payment-methods-select"),
            };

            lazySelect2Ajax(inputs.customers, `{{ route('ajax.get-customers') }}`)
            lazySelect2Ajax(inputs.subscriptions, `{{ route('ajax.get-subscriptions') }}`)
            lazySelect2Ajax(inputs.paymentMethods, `{{ route('ajax.get-payment-methods') }}`)

        });
    </script>
@endsection
