@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = empty($transfer->id) ? __('Create new Transfer') : __('Edit Transfer');
    @endphp

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

@section('content')
    <div class="container-fluid">
        <form id="transfer-form" method="post"
            action="{{ empty($transfer->id) ? route('transfers.store') : route('transfers.update', $transfer->id) }}">
            @if (!empty($transfer->id))
                @method('PATCH')
            @endif
            <div class="card">
                <div class="card-body">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div class="notes">(*) Datos obligatorios.</div>
                    </div>
                    <div class="form-group">
                        <label for="transfer_date">*{{ __('Date') }}</label>
                        <div class="input-group transfer_date col-md-10" 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="transfer_date" name="transfer_date" type="text"
                                class="form-control datetimepicker-input" data-target="#calendar"
                                value="{{ $transfer->transfer_date_formatted ?? now()->format('d/m/Y') }}">
                        </div>
                        <span id="transfer_date-error" class="invalid-feedback" style="font-weight:bold"
                            role="alert"></span>
                    </div>
                    <div class="form-group">
                        <label for="from_account_id">*{{ __('From Account') }}</label>
                        <div class="col-md-10">
                            <select class="form-control from_account_id" name="from_account_id" id="from_account_id">
                                <option value="">{{ __('-- Select from account --') }}</option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}" @if ($transfer->from_account_id == $account->id) selected @endif
                                        data-currency="{{ $account->currency }}">
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span id="from_account_id-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="to_account_id">*{{ __('To Account') }}</label>
                        <div class="col-md-10">
                            <select class="form-control to_account_id" name="to_account_id" id="to_account_id">
                                <option value="">{{ __('-- Select to account --') }}</option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}" @if ($transfer->to_account_id == $account->id) selected @endif
                                        data-currency="{{ $account->currency }}">
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span id="to_account_id-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="amount">*{{ __('Amount') }}</label>
                        <div class="col-md-10">
                            <input class="form-control amount" id="amount" name="amount"
                                value="${{ number_format($transfer->amount ?? 0, 2) }}">
                            <span id="amount-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </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('transfers.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($transfer->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <script>
        $('#transfer_date').on('focus', function() {
            $('#calendar').datetimepicker('show');
        });

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

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

        toggleAccounts();

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

        document.getElementById('from_account_id').addEventListener('change', function() {
            toggleAccounts();
            $('#to_account_id').val('');
        });

        function toggleAccounts() {
            var from_currency = $('#from_account_id').find(':selected').data('currency');

            $('#to_account_id option').each(function() {
                var option_currency = $(this).data('currency');
                if (option_currency === from_currency || typeof from_currency === "undefined" || from_currency ===
                    null ||
                    from_currency === '') {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }
    </script>
@endsection