@extends('layouts.app')
@section('content')
    <form action="#" method="POST" id="form-contrato">
        <div class="row mb-1">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Nuevo Contrato</h4>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="nombre" class="form-label">Nombre del Contrato</label>
                                <input type="text" class="form-control" id="nombre" name="nombre" required>
                            </div>
                            <div class="col-md-6">
                                <label for="cliente_id" class="form-label">Cliente</label>
                                <select class="form-select" id="cliente_id" name="cliente_id" required>
                                    <option value="">Seleccionar cliente</option>
                                    @foreach ($clientes as $cliente)
                                        <option value="{{ $cliente->id }}">{{ $cliente->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="proyecto_id" class="form-label">Proyecto (Opcional)</label>
                                <select class="form-select" id="proyecto_id" name="proyecto_id">
                                    <option value="">Sin proyecto</option>
                                    @foreach ($proyectos as $proyecto)
                                        <option value="{{ $proyecto->id }}">{{ $proyecto->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="user_id" class="form-label">Responsable</label>
                                <select class="form-select" id="user_id" name="user_id" required>
                                    <option value="">Seleccionar responsable</option>
                                    @foreach ($usuarios as $usuario)
                                        <option value="{{ $usuario->id }}">{{ $usuario->getFullName() }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio" required>
                            </div>
                            <div class="col-md-4">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="date" class="form-control" id="fecha_fin" name="fecha_fin" required>
                            </div>
                            <div class="col-md-4">
                                <label for="frecuencia_facturacion" class="form-label">Frecuencia</label>
                                <select class="form-select" id="frecuencia_facturacion" name="frecuencia_facturacion" required>
                                    <option value="mensual">Mensual</option>
                                    <option value="bimestral">Bimestral</option>
                                    <option value="trimestral">Trimestral</option>
                                    <option value="semestral">Semestral</option>
                                    <option value="anual">Anual</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="renovacion_automatica" name="renovacion_automatica">
                                    <label class="form-check-label" for="renovacion_automatica">Renovacion automatica</label>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="notas" class="form-label">Notas</label>
                            <textarea class="form-control" id="notas" name="notas" rows="3" placeholder="Notas adicionales del contrato"></textarea>
                        </div>

                        <hr>
                        <h5>Conceptos del Contrato</h5>
                        <table class="table table-bordered" id="tabla-conceptos">
                            <thead class="table-light">
                                <tr>
                                    <th>Descripcion</th>
                                    <th style="width:100px">Cantidad</th>
                                    <th style="width:140px">Precio Unitario</th>
                                    <th style="width:100px">Descuento %</th>
                                    <th style="width:140px">Subtotal</th>
                                    <th style="width:60px"></th>
                                </tr>
                            </thead>
                            <tbody id="conceptos-body">
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="btn-agregar-concepto">
                            <i class="fas fa-plus"></i> Agregar Concepto
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Resumen</h4>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <div class="mb-4">
                            <label class="form-label">Subtotal</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="text" class="form-control" id="resumen-subtotal" readonly value="0.00">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="form-label">IVA (16%)</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="text" class="form-control" id="resumen-iva" readonly value="0.00">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-bold">Total</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="text" class="form-control fw-bold" id="resumen-total" readonly value="0.00">
                            </div>
                        </div>
                        <div class="d-grid gap-2 mt-auto">
                            <button type="submit" class="btn btn-success" id="btnSubmit">
                                <span id="spinner"></span>
                                Guardar Contrato
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@push('javascript')
    <script>
        let conceptoIndex = 0;

        function agregarConcepto(desc = '', cant = 1, precio = '', descuento = 0) {
            const row = `<tr data-index="${conceptoIndex}">
                <td><input type="text" class="form-control form-control-sm" name="conceptos[${conceptoIndex}][descripcion]" value="${desc}" required></td>
                <td><input type="number" class="form-control form-control-sm concepto-cantidad" name="conceptos[${conceptoIndex}][cantidad]" value="${cant}" min="1" required></td>
                <td><input type="number" class="form-control form-control-sm concepto-precio" name="conceptos[${conceptoIndex}][precio_unitario]" value="${precio}" step="0.01" min="0" required></td>
                <td><input type="number" class="form-control form-control-sm concepto-descuento" name="conceptos[${conceptoIndex}][descuento]" value="${descuento}" step="0.01" min="0" max="100"></td>
                <td><input type="text" class="form-control form-control-sm concepto-subtotal" readonly value="0.00"></td>
                <td><button type="button" class="btn btn-sm btn-danger btn-eliminar-concepto"><i class="fas fa-trash"></i></button></td>
            </tr>`;
            $('#conceptos-body').append(row);
            conceptoIndex++;
            calcularSubtotales();
        }

        function calcularSubtotales() {
            let totalGeneral = 0;
            $('#conceptos-body tr').each(function() {
                const cant = parseFloat($(this).find('.concepto-cantidad').val()) || 0;
                const precio = parseFloat($(this).find('.concepto-precio').val()) || 0;
                const desc = parseFloat($(this).find('.concepto-descuento').val()) || 0;
                const subtotal = (cant * precio) * (1 - (desc / 100));
                $(this).find('.concepto-subtotal').val(subtotal.toFixed(2));
                totalGeneral += subtotal;
            });
            const iva = totalGeneral * 0.16;
            $('#resumen-subtotal').val(totalGeneral.toFixed(2));
            $('#resumen-iva').val(iva.toFixed(2));
            $('#resumen-total').val((totalGeneral + iva).toFixed(2));
        }

        $('#btn-agregar-concepto').click(function() { agregarConcepto(); });

        $(document).on('input', '.concepto-cantidad, .concepto-precio, .concepto-descuento', function() {
            calcularSubtotales();
        });

        $(document).on('click', '.btn-eliminar-concepto', function() {
            $(this).closest('tr').remove();
            calcularSubtotales();
        });

        agregarConcepto();

        $('#form-contrato').on('submit', function(e) {
            e.preventDefault();
            var parameters = new FormData(this);
            submit_with_ajax_delay("{{ route('contrato.store') }}", 'POST', parameters,
                function(data) {
                    Swal.fire({
                        title: 'Alerta',
                        text: data.message,
                        icon: 'success',
                        timer: 1000,
                        onClose: () => {
                            location.href = "{{ route('contrato.index') }}";
                        }
                    });
                });
        });
    </script>
@endpush