@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = __('Pay Invoice');
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="invoice-payment-form" method="post"
            action="{{ empty($operation->id) ? route('invoices.payments.store') : route('invoices.payments.update', $operation->id) }}">
            @if (!empty($operation->id))
                @method('PATCH')
            @endif
            <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
            <input type="hidden" id="currency" name="currency"
                value="{{ !empty($operation->id) ? $operation->account->currency : '' }}">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-10 col-sm-3">
                            <div class="info-box bg-light">
                                <div class="info-box-content">
                                    <span class="info-box-text text-center text-muted">Factura No.
                                    </span>
                                    <span class="info-box-number text-center text-muted mb-0">
                                        {{ $invoice->serie_folio }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-10 col-sm-3">
                            <div class="info-box bg-light">
                                <div class="info-box-content">
                                    <span class="info-box-text text-center text-muted">A nombre de:</span>
                                    <span class="info-box-number text-center text-muted mb-0">
                                        {{ $invoice->subclient->name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-10 col-sm-3">
                            <div class="info-box bg-light">
                                <div class="info-box-content">
                                    <span class="info-box-text text-center text-muted"> Total de la factura:</span>
                                    <span
                                        class="info-box-number text-center text-muted mb-0">${{ number_format($invoice->total, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @php
                        $balance = $invoice->total;
                    @endphp
                    @if ($payments['payments']->count() > 0 || $payments['credit_notes']->count())
                        @php
                            $balance = $payments['balance'];
                        @endphp
                        <div class="card col-md-9">
                            <div class="card-body p-0">
                                @include('admin.partials.payments_table', [
                                    'payments' => $payments['payments'],
                                    'credit_notes' => $payments['credit_notes'],
                                    'balance' => $payments['balance'],
                                ])
                            </div>
                        </div>
                    @endif
                    <div class="card col-md-9">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="payment">*{{ __('Payment') }}</label>
                                <input class="form-control" id="payment" name="payment"
                                    value="${{ number_format($balance, 2) }}">
                                <span id="payment-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="operation_date">*{{ __('Date') }}</label>
                                <div class="input-group operation_date" id="calendar" data-target-input="nearest">
                                    <div class="input-group-prepend" data-target="#calendar" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                    <input id="operation_date" name="operation_date" type="text"
                                        class="form-control datetimepicker-input" data-target="#calendar"
                                        value="{{ $operation->operation_date_formatted ?? now()->format('d/m/Y') }}">
                                </div>
                                <span id="operation_date-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="account_id">*{{ __('Account') }}</label>
                                <select class="form-control account_id" name="account_id" id="account_id">
                                    <option value="">{{ __('-- Select account --') }}</option>
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}"
                                            @if ($operation->account_id == $account->id) selected @endif
                                            data-currency='{{ $account->currency }}'>
                                            {{ $account->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="account_id-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group" id="exchange_rate_section">
                                <label for="exchange_rate">*{{ __('Exchange Rate') }}</label>
                                <input class="form-control" id="exchange_rate" name="exchange_rate"
                                    value="{{ $operation->exchange_rate ?? '' }}">
                                <span id="exchange_rate-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- buttons --}}
            <div class="card">
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom:0">
                        <a href="javascript:loadContent('{{ route('sales-documents.index', ['type' => 'invoices']) }}')"
                            id="cancel" name="cancel" class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($operation->id) ? __('Pay') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <style>
        .invoice-title {
            padding-bottom: 20px;
        }
    </style>
    <script>
        toggleExchangeRateEnabled();

        $('#calendar').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'es',
        });

        $('#payment').on('focus', function() {
            $(this).select();
        });

        $('#operation_date').on('focus', function() {
            $('#calendar').datetimepicker('show');
        });

        $('#payment').on('blur', function() {
            var amount = parseFloat($("#payment").val().replace(/[^0-9.]/g, '')) || 0;
            $('#payment').val(currencyFormat(amount));
        });

        document.getElementById('account_id').addEventListener('change', function() {
            toggleExchangeRateEnabled();
        });

        function toggleExchangeRateEnabled() {
            var currency = $('#account_id').find(':selected').data('currency');
            $('#currency').val(currency);

            if (typeof currency === "undefined" || currency === null || currency === '' || currency === 'Pesos') {
                $('#exchange_rate').val('');
                $('#exchange_rate_section').hide();
            } else {
                $('#exchange_rate_section').show();
            }
        }
    </script>
@endsection