@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Generar Reporte</h2>
    <form method="POST" action="{{ route('reports.generate') }}">
        @csrf

        <div class="mb-3">
            <label for="report">Tipo de reporte</label>
            <select name="report" id="report" class="form-select" required>
                <option value="results" {{ $selectedType == 'results' ? 'selected' : '' }}>Estado de Resultados</option>
                <option value="balance" {{ $selectedType == 'balance' ? 'selected' : '' }}>Balance General</option>
                <option value="auxiliary" {{ $selectedType == 'auxiliary' ? 'selected' : '' }}>Movimiento Auxiliar</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="company_id">Compañía</label>
            <select name="company_id" id="company_id" class="form-select" required>
                <option value="">Seleccione una compañía</option>
                @foreach($companies as $company)
                <option value="{{ $company->id }}">{{ $company->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="mb-3">
            <label for="period">Periodo</label>
            <input type="month" id="period" class="form-control" name="period" required>
        </div>

        {{-- Estos se llenarán automáticamente con JS --}}
        <input type="hidden" id="month" name="month">
        <input type="hidden" id="year" name="year">


        <div class="mb-3" id="account_id_field" style="display:none;">
            <label for="company_id">Cuentas</label>
            <select name="account_id" id="account_id" class="form-select select2" required>
                <option value="">Seleccione una Cuenta</option>
                @foreach($cuentas as $cuenta)
                <option value="{{ $cuenta->id }}">{{ $cuenta->code }}-{{ $cuenta->name }}</option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Generar</button>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        jQuery(document).ready(function() {
            jQuery('.select2').select2({
                placeholder: "Buscar...",
                allowClear: true,
                language: "es",
                width: '100%'
            });
        });
    });
    document.getElementById('report').addEventListener('change', function() {
        document.getElementById('account_id_field').style.display =
            this.value === 'auxiliary' ? 'block' : 'none';
    });

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('account_id_field').style.display =
            document.getElementById('report').value === 'auxiliary' ? 'block' : 'none';
    });
    document.addEventListener('DOMContentLoaded', function() {
        const periodInput = document.getElementById('period');
        const monthInput = document.getElementById('month');
        const yearInput = document.getElementById('year');

        const today = new Date();
        const defaultValue = today.toISOString().slice(0, 7);
        periodInput.value = defaultValue;

        const [year, month] = defaultValue.split('-');
        yearInput.value = year;
        monthInput.value = month;

        periodInput.addEventListener('change', function() {
            const [year, month] = this.value.split('-');
            yearInput.value = year;
            monthInput.value = month;
        });
    });

    document.getElementById('report').addEventListener('change', function() {
        document.getElementById('account_id_field').style.display =
            this.value === 'auxiliary' ? 'block' : 'none';
    });
</script>
@endsection