@extends('admin.layouts.adminpanel')

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

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

@section('content')
    <div class="container-fluid">
        <form id="operation-form" method="post"
            action="{{ empty($operation->id) ? route('operations.store') : route('operations.update', $operation->id) }}">
            @if (!empty($operation->id))
                @method('PATCH')
            @endif
            <input type="hidden" id="currency" name="currency"
                value="{{ !empty($operation->id) ? $operation->account->currency : '' }}">
            <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="operation_date">*{{ __('Date') }}</label>
                        <div class="input-group operation_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="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="type">*{{ __('Type') }}</label>
                        <div class="col-md-10">
                            <select class="form-control type" name="type" id="type">
                                <option value="">{{ __('-- Select type --') }}</option>
                                <option value="Depósito" @if ($operation->type == 'Depósito') selected @endif>
                                    Depósito
                                </option>
                                <option value="Retiro" @if ($operation->type == 'Retiro') selected @endif>
                                    Retiro
                                </option>
                            </select>
                            <span id="type-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="account_id">*{{ __('Account') }}</label>
                        <div class="col-md-10">
                            <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>
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="exchange_rate">*{{ __('Exchange Rate') }}</label>
                            <input class="form-control" id="exchange_rate" name="exchange_rate"
                                value="{{ $operation->exchange_rate ?? '' }}"
                                @if (empty($operation->id) || empty($operation->exchange_rate)) disabled @endif>
                            <span id="exchange_rate-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="concept">*{{ __('Concept') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="concept" name="concept"
                                value="{{ $operation->concept ?? '' }}">
                            <span id="concept-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($operation->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('operations.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($operation->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <script>
        toggleExchangeRateEnabled();
        $('#calendar').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'es',
        });

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

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

        $('#amount').on('blur', function() {
            var amount = parseFloat($("#amount").val().replace(/[^0-9.]/g, '')) || 0;
            $('#amount').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').prop('disabled', true);
            } else {
                $('#exchange_rate').prop('disabled', false);
            }
        }
    </script>
@endsection