@extends('layouts.app', ['page' => __('Vistas de desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@push('css')
    <style>
        .table input[type="text"] {
            text-align: center;
            font-weight: 800;
            font-size: 12pt;
        }

        /* Si necesitas ajustar el padding para un mejor aspecto */
        .table input[type="text"] {
            padding-left: 0;
            padding-right: 0;
        }

        /* Si quieres quitar las flechas de los inputs numéricos */
        .table input[type="number"]::-webkit-inner-spin-button,
        .table input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .table input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-8">
                            <span class="bw-card-title">{{ __('Planes de pago') }}</span>
                            <span class="bw-card-title-bold">
                                <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                                {{ $houseDevelopment->name }}
                            </span>
                        </div>
                        <div class="col-4 text-right">
                            @if(!$showDeleted)
                                <a href="#" class="btn btn-sm btn-gradient" data-toggle="modal" data-target="#createViewModal">
                                    {{ __('Alta de Plan') }}
                                </a>
                                <a href="{{ route('payment-plans.index', ['house_development' => $houseDevelopment->id, 'show_deleted' => true]) }}"
                                   class="btn btn-sm btn-warning btn-gradient">
                                    {{ __('Ver desactivados') }}
                                </a>
                            @else
                                <a href="{{ route('payment-plans.index', ['house_development' => $houseDevelopment->id]) }}"
                                   class="btn btn-sm btn-primary btn-gradient">
                                    {{ __('Ver activos') }}
                                </a>
                            @endif
                            <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar a listado') }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table tablesorter text-center">
                            <thead class="th-gradient">
                                <th class="th-text-color" scope="col"> {{ __('% Enganche') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('% Durante la Obra') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('% Liquidación') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('% Descuento') }}</th>
                                <th class="th-text-color" scope="col"> </th>
                            </thead>
                            <tbody>
                                @foreach ($paymentPlans as $paymentPlan)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <input type="text" name="advance_percentage" class="form-control"
                                                   value="{{ $paymentPlan->advance_percentage_humanized }}"
                                                   id="advance-percentage-{{ $paymentPlan->id }}"
                                                   {{ $showDeleted ? 'disabled' : '' }}>
                                        </td>
                                        <td>
                                            <input type="text" name="montly_payment_percentage" class="form-control"
                                                   value="{{ $paymentPlan->montly_payment_percentage_humanized }}"
                                                   id="monthly-payment-percentage-{{ $paymentPlan->id }}"
                                                   {{ $showDeleted ? 'disabled' : '' }}>
                                        </td>
                                        <td>
                                            <input type="text" name="last_payment" class="form-control"
                                                   value="{{ $paymentPlan->last_payment_humanized }}"
                                                   id="last-payment-{{ $paymentPlan->id }}"
                                                   {{ $showDeleted ? 'disabled' : '' }}>
                                        </td>
                                        <td>
                                            <input type="text" name="discount_percentage" class="form-control"
                                                   value="{{ $paymentPlan->discount_percentage_humanized }}"
                                                   id="discount-percentage-{{ $paymentPlan->id }}"
                                                   {{ $showDeleted ? 'disabled' : '' }}>
                                        </td>
                                        <td>
                                            @if(!$showDeleted)
                                                <button type="button" class="btn btn-sm btn-success btn-gradient update-payment-plan"
                                                        data-id="{{ $paymentPlan->id }}"
                                                        data-url="{{ route('payment-plans.update', $paymentPlan->id) }}">
                                                    {{ __('Actualizar') }}
                                                </button>
                                                <form action="{{ route('payment-plans.destroy', $paymentPlan->id) }}" method="POST" style="display: inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger bw-btn-danger-gradient">
                                                        {{ __('Desactivar') }}
                                                    </button>
                                                </form>
                                            @else
                                                <form action="{{ route('payment-plans.restore', $paymentPlan->id) }}" method="POST" style="display: inline;">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit" class="btn btn-sm btn-success btn-gradient">
                                                        {{ __('Activar') }}
                                                    </button>
                                                </form>
                                                <form action="{{ route('payment-plans.force-delete', $paymentPlan->id) }}" method="POST" style="display: inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger bw-btn-danger-gradient">
                                                        {{ __('Eliminar Permanentemente') }}
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $paymentPlans->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createViewModal" tabindex="-1" role="dialog" aria-labelledby="createViewModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createViewModalLabel">{{ __('Alta de Plan') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="createPaymentPlanForm">
                        @csrf
                        <input type="hidden" name="house_development_id" value="{{ $houseDevelopment->id }}">
                        <div class="form-group">
                            <label for="advance_percentage">{{ __('% Anticipo') }}</label>
                            <input type="number" class="form-control" id="advance_percentage" name="advance_percentage" min="0" max="100" required>
                        </div>
                        <div class="form-group">
                            <label for="montly_payment_percentage">{{ __('% Mensualidad') }}</label>
                            <input type="number" class="form-control" id="montly_payment_percentage" name="montly_payment_percentage" min="0" max="100" required>
                        </div>
                        <div class="form-group">
                            <label for="last_payment">{{ __('% Liquidación') }}</label>
                            <input type="number" class="form-control" id="last_payment" name="last_payment" min="0" max="100" required>
                        </div>
                        <div class="form-group">
                            <label for="discount_percentage">{{ __('% Descuento') }}</label>
                            <input type="number" class="form-control" id="discount_percentage" name="discount_percentage" min="0" max="100" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-gradient" data-dismiss="modal">{{ __('Cancelar') }}</button>
                    <button type="button" class="btn btn-primary btn-gradient" id="savePaymentPlan">{{ __('Guardar') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
$(document).ready(function() {
    // Crear nuevo plan de pago
    $('#savePaymentPlan').click(function() {
        let formData = $('#createPaymentPlanForm').serialize();

        $.ajax({
            url: "{{ route('payment-plans.store') }}",
            type: "POST",
            data: formData,
            success: function(response) {
                if(response.status === 200) {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'El plan de pago ha sido agregado correctamente.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload();
                        }
                    });
                }
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let errorMessage = '';
                
                for (let field in errors) {
                    errorMessage += errors[field][0] + '\n';
                }
                
                Swal.fire('Error', errorMessage || 'Hubo un problema al guardar el plan de pago.', 'error');
            }
        });
    });

    // Actualizar plan de pago
    $('.update-payment-plan').click(function() {
        let id = $(this).data('id');
        let url = $(this).data('url');
        let advancePercentage = $(`#advance-percentage-${id}`).val();
        let montlyPercentage = $(`#monthly-payment-percentage-${id}`).val();
        let lastPaymentPercentage = $(`#last-payment-${id}`).val();
        let discountPercentage = $(`#discount-percentage-${id}`).val();

        $.ajax({
            url: url,
            type: "PUT",
            data: {
                advance_percentage: advancePercentage,
                montly_payment_percentage: montlyPercentage,
                last_payment: lastPaymentPercentage,
                discount_percentage: discountPercentage,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if(response.status === 200) {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'El plan de pago ha sido actualizado correctamente.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload();
                        }
                    });
                }
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let errorMessage = '';
                
                for (let field in errors) {
                    errorMessage += errors[field][0] + '\n';
                }
                
                Swal.fire('Error', errorMessage || 'Hubo un problema al actualizar el plan de pago.', 'error');
            }
        });
    });

    // Manejar eliminación con confirmación para los formularios DELETE
    $('form[method="DELETE"], form[method="delete"]').on('submit', function(e) {
        e.preventDefault();
        
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede deshacer",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                this.submit();
            }
        });
    });
});
</script>
@endpush