@extends('fragments.fullTemplate')

@section('titulo')
Autorizaciones bancos maqueta
@endsection

@section('estilos')
@include('Bancos.Maqueta.partials._styles')
@endsection

@section('contenido')
@php
    $activePage = 'autorizaciones';
    $money = function ($amount, $currency = 'MXN') {
        return ($currency === 'USD' ? 'US$' : '$') . number_format($amount, 2, '.', ',');
    };
    $formatDate = function ($date) {
        return $date ? date('d/m/Y H:i:s', strtotime($date)) : '-';
    };
@endphp

<div class="bancos-maqueta">
    <div class="ui big breadcrumb">
        <div class="section">Administración</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Bancos</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Autorizaciones gerente</div>
    </div>

    <div class="ui divider"></div>

    <div data-module-notifications-anchor></div>
    @include('Bancos.Maqueta.partials._toolbar')
    @include('Bancos.Maqueta.partials._notificaciones')

    <div class="ui segment">
        <h4 class="ui dividing header">Filtros</h4>
        <form class="ui form" action="#" method="get">
            <div class="form-row">
                <div class="form-group col-md-2">
                    <label>Tipo autorización</label>
                    <select class="custom-select">
                        <option>Todas</option>
                        <option>Cuenta</option>
                        <option>Movimiento</option>
                        <option>Pago programado</option>
                        <option>Alta de cuenta</option>
                        <option>Bloqueo</option>
                        <option>Desbloqueo</option>
                        <option>Inactivacion</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label>Cuenta</label>
                    <select class="custom-select">
                        <option>Todas</option>
                        @foreach($cuentas as $cuentaFiltro)
                            <option>{{ $cuentaFiltro['banco'] }} - {{ $cuentaFiltro['nombre_cuenta'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-2"><label>Fecha</label><input type="text" class="form-control" value="{{ date('d/m/Y H:i:s') }}"></div>
                <div class="form-group col-md-2"><label>Usuario que genero</label><input type="text" class="form-control" placeholder="Usuario"></div>
                <div class="form-group col-md-2"><label>Monto mayor a</label><input type="number" step="0.01" class="form-control"></div>
                <div class="form-group col-md-1"><label>Estatus</label><select class="custom-select"><option>Todos</option><option>Pendiente</option><option>Autorizado</option><option>Rechazado</option></select></div>
            </div>
            <button type="button" class="ui button">Filtrar</button>
        </form>
    </div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <div class="dt-responsive table-responsive">
                <table id="lang-dt" class="ui celled table unstackable structured">
                    <thead>
                        <tr>
                            <th>Folio</th>
                            <th>Tipo autorización</th>
                            <th>Cuenta</th>
                            <th>Movimiento / Cuenta</th>
                            <th>Monto</th>
                            <th>Solicitado por</th>
                            <th>Fecha solicitud</th>
                            <th>Motivo</th>
                            <th>Estatus</th>
                            <th class="collapsing">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($autorizaciones as $autorizacion)
                            <tr>
                                <td>{{ $autorizacion['folio'] }}</td>
                                <td>{{ $autorizacion['tipo_autorizacion'] }}</td>
                                <td>{{ $autorizacion['cuenta'] }}</td>
                                <td>{{ $autorizacion['referencia'] }}</td>
                                <td>{{ $autorizacion['monto'] > 0 ? $money($autorizacion['monto'], $autorizacion['moneda']) : '-' }}</td>
                                <td>{{ $autorizacion['solicitado_por'] }}</td>
                                <td>{{ $formatDate($autorizacion['fecha_solicitud']) }}</td>
                                <td>{{ $autorizacion['motivo'] }}</td>
                                <td><span class="status-pill status-warn">{{ $autorizacion['estatus'] }}</span></td>
                                <td>
                                    <div class="ui tiny buttons">
                                        <button type="button" class="ui button blue abrir-detalle-autorizacion" data-folio="{{ $autorizacion['folio'] }}" data-motivo="{{ $autorizacion['motivo'] }}">
                                            <i class="eye icon"></i>Detalle
                                        </button>
                                        <button type="button" class="ui button green abrir-modal-autorizar" data-folio="{{ $autorizacion['folio'] }}">
                                            <i class="check icon"></i>Autorizar
                                        </button>
                                        <button type="button" class="ui button red abrir-modal-rechazar" data-folio="{{ $autorizacion['folio'] }}">
                                            <i class="times icon"></i>Rechazar
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_detalle_autorizacion_maqueta" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Detalle de autorización</h5><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div>
                <div class="modal-body">
                    <p><strong>Folio:</strong> <span class="detalle-folio"></span></p>
                    <p><strong>Motivo:</strong> <span class="detalle-motivo"></span></p>
                    <div class="alert alert-secondary">Detalle visual sin actualizar información real.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_autorizar_maqueta" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Autorizar solicitud</h5><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div>
                <div class="modal-body">
                    <p><strong>Folio:</strong> <span class="aut-folio"></span></p>
                    <div class="form-group"><label>Comentario opcional</label><textarea class="form-control" rows="3"></textarea></div>
                    <div class="form-row">
                        <div class="form-group col-md-6"><label>Fecha de aprobación</label><input type="text" class="form-control" value="{{ date('d/m/Y H:i:s') }}"></div>
                        <div class="form-group col-md-6"><label>Usuario gerente</label><input type="text" class="form-control" value="Daniel Ortega"></div>
                    </div>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button><button type="button" class="btn btn-primary" data-dismiss="modal">Autorizar maqueta</button></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_rechazar_maqueta" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Rechazar solicitud</h5><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div>
                <div class="modal-body">
                    <p><strong>Folio:</strong> <span class="rech-folio"></span></p>
                    <div class="form-group"><label>Motivo obligatorio</label><input type="text" class="form-control" placeholder="Motivo del rechazo"></div>
                    <div class="form-group"><label>Comentario</label><textarea class="form-control" rows="3"></textarea></div>
                    <div class="form-row">
                        <div class="form-group col-md-6"><label>Fecha de rechazo</label><input type="text" class="form-control" value="{{ date('d/m/Y H:i:s') }}"></div>
                        <div class="form-group col-md-6"><label>Usuario gerente</label><input type="text" class="form-control" value="Daniel Ortega"></div>
                    </div>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Rechazar maqueta</button></div>
            </div>
        </div>
    </div>

    @include('Bancos.Maqueta.partials._modal_codigo_seguridad')
    @include('Bancos.Maqueta.partials._security_gate')
</div>

<script>
    $(document).on('click', '.abrir-detalle-autorizacion', function () {
        $('#modal_detalle_autorizacion_maqueta .detalle-folio').text($(this).data('folio'));
        $('#modal_detalle_autorizacion_maqueta .detalle-motivo').text($(this).data('motivo'));
        $('#modal_detalle_autorizacion_maqueta').modal('show');
    });
    $(document).on('click', '.abrir-modal-autorizar', function () {
        $('#modal_autorizar_maqueta .aut-folio').text($(this).data('folio'));
        $('#modal_autorizar_maqueta').modal('show');
    });
    $(document).on('click', '.abrir-modal-rechazar', function () {
        $('#modal_rechazar_maqueta .rech-folio').text($(this).data('folio'));
        $('#modal_rechazar_maqueta').modal('show');
    });
</script>
@endsection