@extends('admin.layouts.adminpanel')

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

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

@section('content')
    <div class="container-fluid">
        <form id="account-form" method="post"
            action="{{ empty($account->id) ? route('accounts.store') : route('accounts.update', $account->id) }}">
            @if (!empty($account->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="type">*{{ __('Type') }}</label>
                        <div class="col-md-10">
                            <select class="form-control type" name="type" id="type">
                                <option value="">{{ __('-- Select type --') }}</option>
                                <option value="Credito" @if ($account->type == 'Credito') selected @endif>
                                    Credito
                                </option>
                                <option value="Debito" @if ($account->type == 'Debito') selected @endif>
                                    Debito
                                </option>
                                <option value="Efectivo" @if ($account->type == 'Efectivo') selected @endif>
                                    Efectivo
                                </option>
                            </select>
                            <span id="type-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name">*{{ __('Name') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="name" name="name" value="{{ $account->name ?? '' }}">
                            <span id="name-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group" id="number_section">
                        <label for="number">*{{ __('Number') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="number" name="number" value="{{ $account->number ?? '' }}">
                            <span id="number-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group" id="bank_section">
                        <label for="bank_id">*{{ __('Bank') }}</label>
                        <div class="col-md-10">
                            <select class="form-control bank_id" name="bank_id" id="bank_id">
                                <option value="">{{ __('-- Select bank --') }}</option>
                                @foreach ($banks as $bank)
                                    <option value="{{ $bank->id }}" @if ($account->bank_id == $bank->id) selected @endif>
                                        {{ $bank->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span id="bank_id-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="currency">*{{ __('Currency') }}</label>
                        <div class="col-md-10">
                            <select class="form-control" name="currency" id="currency">
                                <option value="">{{ __('-- Select currency --') }}</option>
                                <option value="Pesos" @if (empty($account->id) || $account->currency == 'Pesos') selected @endif>
                                    Pesos
                                </option>
                                <option value="Dólares" @if ($account->currency == 'Dólares') selected @endif>
                                    Dólares
                                </option>
                                <option value="Euros" @if ($account->currency == 'Euros') selected @endif>
                                    Euros
                                </option>
                            </select>
                            <span id="currency-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('accounts.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($account->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <script>
        toggleBankDetails();

        document.getElementById('type').addEventListener('change', function() {
            toggleBankDetails();
        });

        function toggleBankDetails() {
            let type = $('#type').val();
            if (type === 'Efectivo') {
                $('#number').val('');
                $('#number_section').hide();
                $('#bank_id').val('');
                $('#bank_section').hide();
            } else {
                $('#number_section').show();
                $('#bank_section').show();
            }
        }
    </script>
@endsection