@extends('dashboard.layouts.app')

@section('title', __('payments.Edit Payment'))
@section('page_heading', __('payments.Edit Payment'))

@section('breadcrumb')
<li class="breadcrumb-item text-muted">
    <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
</li>
<li class="breadcrumb-item text-muted">
    <a href="{{ route('dashboard.payments.index') }}" class="text-muted text-hover-primary">{{ __('payments.Payments') }}</a>
</li>
<li class="breadcrumb-item text-muted">{{ __('payments.Edit Payment') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('payments.Edit Payment') }}</h3>
    </div>
    <div class="card-body">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('dashboard.payments.update', $payment) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label for="payment_type" class="form-label">{{ __('payments.Payment Type') }}</label>
                <select class="form-select @error('payment_type') is-invalid @enderror" id="payment_type" name="payment_type" required>
                    <option value="">{{ __('dashboard.Select an option') }}</option>
                    <option value="inbound" {{ old('payment_type', $payment->paymentType->type) == 'inbound' ? 'selected' : '' }}>{{ __('payments.Inbound') }}</option>
                    <option value="outbound" {{ old('payment_type', $payment->paymentType->type) == 'outbound' ? 'selected' : '' }}>{{ __('payments.Outbound') }}</option>
                </select>
                @error('payment_type')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="payment_type_id" class="form-label">{{ __('payments.Payment Method') }}</label>
                <select class="form-select @error('payment_type_id') is-invalid @enderror" id="payment_type_id"
                        name="payment_type_id" required data-control="select2">
                    @foreach ($paymentTypes as $type)
                    <option value="{{ $type->id }}" {{ old('payment_type_id', $payment->payment_type_id) == $type->id ? 'selected' : '' }}>
                        {{ $type->name }}
                    </option>
                    @endforeach
                </select>
                @error('payment_type_id')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="account_id" class="form-label">{{ __('accounts.Account') }}</label>
                <select class="form-select @error('account_id') is-invalid @enderror" id="account_id" name="account_id"
                    required data-control="select2">
                    <option value="">{{ __('dashboard.Select an option') }}</option>
                    @foreach ($accounts as $account)
                    <option value="{{ $account->id }}" data-currency-id="{{ $account->currency_id }}" {{
                        old('account_id',  $payment->account_id) ==$account->id ? 'selected' : '' }}>
                         {{ $account->name ?? '' }}

                        ({{ $account->code }}) - {{ $account->currency->code }}
                    </option>
                    @endforeach
                </select>
                @error('account_id')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <input type="hidden" name="currency_id" id="currency_id" value="{{ old('currency_id', $payment->currency_id) }}">

             <div class="mb-3">
                <label for="amount" class="form-label">{{ __('payments.Amount') }}</label>
                <input type="number" step="0.01" class="form-control @error('amount') is-invalid @enderror" id="amount"
                    name="amount" value="{{ old('amount', $payment->amount) }}" required>
                @error('amount')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3" id="exchange_rate_div" style="display: none;">
                <label for="exchange_rate" class="form-label">{{ __('transactions.Exchange Rate') }}</label>
                <input type="number" step="0.0000000001"
                    class="form-control @error('exchange_rate') is-invalid @enderror" id="exchange_rate"
                    name="exchange_rate" value="{{ old('exchange_rate', $payment->exchange_rate) }}"
                    placeholder="{{ __('transactions.Enter exchange rate if applicable') }}">
                @error('exchange_rate')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div id="exchange_rate_info" class="form-text"></div>
            </div>

            <div class="mb-3">
                <label for="payment_date" class="form-label">{{ __('payments.Payment Date') }}</label>
                <input type="date" class="form-control @error('payment_date') is-invalid @enderror" id="payment_date"
                    name="payment_date" value="{{ old('payment_date', $payment->payment_date->format('Y-m-d')) }}" required>
                @error('payment_date')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="reference_number" class="form-label">{{ __('payments.Reference Number') }}</label>
                <input type="text" class="form-control @error('reference_number') is-invalid @enderror"
                    id="reference_number" name="reference_number" value="{{ old('reference_number', $payment->reference_number) }}"
                    maxlength="255">
                @error('reference_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="notes" class="form-label">{{ __('payments.Notes') }}</label>
                <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes"
                    rows="3">{{ old('notes', $payment->notes) }}</textarea>
                @error('notes')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

             <div class="mb-3">
                <label for="attachment" class="form-label">{{ __('payments.Attachment') }}</label>
                <input type="file" class="form-control @error('attachment') is-invalid @enderror" id="attachment" name="attachment">
                @error('attachment')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                @if($payment->attachment)
                    <a href="{{ Storage::url($payment->attachment) }}" target="_blank" class="btn btn-link">
                        {{ __('payments.View Attachment') }}
                    </a>
                @endif
            </div>

            <button type="submit" class="btn btn-primary">{{__('dashboard.Save')}}</button>
            <a href="{{ route('dashboard.payments.index') }}" class="btn btn-secondary">{{ __('dashboard.Cancel')
                }}</a>
        </form>
    </div>
</div>
@endsection
@section('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('#account_id, #payment_type_id').select2({
                placeholder: "{{__('dashboard.Select an option')}}",
                allowClear: true
            });

              // Function to update the currency ID based on the selected account
        function updateCurrency() {
            let selectedAccountId = $('#account_id').val();
            if (selectedAccountId) {
                let selectedOption = $('#account_id option:selected');
                let currencyId = selectedOption.data('currency-id');
                $('#currency_id').val(currencyId);

            } else {
                $('#currency_id').val('');

            }
        }

          // Function to update payment types based on selected type
        function updatePaymentTypes() {
            let selectedType = $('#payment_type').val();

            $.ajax({
                url: "{{ route('dashboard.payment-types.by-type') }}",
                method: "GET",
                data: { type: selectedType },
                success: function(response) {
                    let options = '<option value="">{{ __("dashboard.Select an option") }}</option>';
                    response.paymentTypes.forEach(function(paymentType) {
                        let name = paymentType.name['en'] || '';
                        if ('{{ App::currentLocale() }}' === 'ar' && paymentType.name['ar']) {
                            name = paymentType.name['ar'] + ' (' + name + ')';
                        }
                        options += `<option value="${paymentType.id}">${name}</option>`;
                    });
                    $('#payment_type_id').html(options);
                    $('#payment_type_id').trigger('change.select2'); // Important for Select2 to update
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
        // Call updatePaymentTypes when payment type changes
        $('#payment_type').on('change', updatePaymentTypes);

        // Initial call
        updatePaymentTypes();

        //call updateCurrency function on account select box change
        $('#account_id').on('change', updateCurrency);

        // Intial run
        updateCurrency();

        });
    </script>
@endsection