@extends('layouts.app')

@section('head')
<style>
    .bg-cancelada {
        background-color: tomato !important;
    }
    .bg-pendiente {
        background-color: blue !important;
    }
    .bg-finalizada {
        background-color: purple !important;
    }
    .bg-pagada{
        background-color: green !important;
    }
</style>
@endsection

@section('preloader')
@endsection

@section('navbar')
@include('admin.shared.navbar')
@endsection

@section('aside')
@include('admin.shared.aside', ['modulo' => $modulo])
@endsection

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">
                        Pagos
                    </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url('/home') }}">Inicio</a></li>
                        <li class="breadcrumb-item active">Pagos</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        @if (Session::has('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <strong>¡Felicitaciones!</strong> {{ Session::get('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        @endif
                    </div>
                    <div class="col-md-12">
                        <div id="clientes">
                            @include('citas.secciones.paginacion')
                        </div>
                    </div>
                </div>
                <!-- /.row (main row) -->
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modal-detalle" tabindex="-1" role="dialog" aria-labelledby="modal-detalle" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="modal-detalle-label">Detalle de la Cita</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div id="content-detail-cita">
                      <b>Datos Personales</b>
                      <div class="row">
                        <div class="col-md-3 text-right"><small>Documento:</small></div>
                        <div class="col-md-9"><input type="text" readonly class="form-control-plaintext form-control-sm" id="documento-detalle" value=""></div>
                      </div>
                      <div class="row">
                        <div class="col-md-3 text-right"><small>Nombre Completo:</small></div>
                        <div class="col-md-9"><input type="text" readonly class="form-control-plaintext form-control-sm" id="nombre-detalle" value=""></div>
                      </div>
                      <div class="row">
                        <div class="col-md-3 text-right"><small>Correo:</small></div>
                        <div class="col-md-9"><input type="text" readonly class="form-control-plaintext form-control-sm" id="correo-detalle" value=""></div>
                      </div>
                      <div class="row">
                        <div class="col-md-3 text-right"><small>Teléfono:</small></div>
                        <div class="col-md-9"><input type="text" readonly class="form-control-plaintext form-control-sm" id="telefono-detalle" value=""></div>
                      </div>
                      <b>Detalle de la cita</b>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="row">
                            <div class="col-md-6 text-right"><small>Fecha de la Cita:</small></div>
                            <div class="col-md-6"><input type="text" readonly class="form-control-plaintext form-control-sm" id="fecha-detalle" value=""></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="row">
                            <div class="col-md-6 text-right"><small>Hora de la Cita:</small></div>
                            <div class="col-md-6"><input type="text" readonly class="form-control-plaintext form-control-sm" id="hora-detalle" value=""></div>
                          </div>
                        </div>
                        <div class="col-md-3 text-right"><small>Estatus de la Cita:</small></div>
                        <div class="col-md-9"><input type="text" readonly class="form-control-plaintext text-capitalize form-control-sm" id="estatus-detalle" value=""></div>
                      </div>
                      <b>Pago de la cita</b>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="row">
                            <div class="col-md-6 text-right"><small>Mét. Pago Id(SAT):</small></div>
                            <div class="col-md-6"><input type="text" readonly class="form-control-plaintext form-control-sm" id="id-metodo-pago-detalle" value=""></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="row">
                            <div class="col-md-6 text-right"><small>Mét. Pago:</small></div>
                            <div class="col-md-6"><input type="text" readonly class="form-control-plaintext form-control-sm" id="metodo-pago-detalle" value=""></div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="row">
                            <div class="col-md-6 text-right"><small>Fecha Pago:</small></div>
                            <div class="col-md-6"><input type="text" readonly class="form-control-plaintext form-control-sm" id="fecha-pago-detalle" value=""></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modal-movimientos-pagos" tabindex="-1" role="dialog" aria-labelledby="modal-detalle" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="modal-detalle-label">Movimientos de Pagos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div id="content-movimientos-pagos"></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modal-pagar" tabindex="-1" role="dialog" aria-labelledby="modal-detalle" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="modal-detalle-label">Pago de la Cita</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <form id="form-pagos" action="pagos" method="POST">
                    @csrf
                  <div class="modal-body">
                    <div class="form-group">
                      <input type="hidden" name="cita_id" id="cita-id">
                      <label for="">Método de Pago</label>
                      <select class="form-control form-control-sm" name="metodo_pago_id" id="metodo_pago_id" required>
                        <option value="">...</option>
                        @foreach($catalogoMetodoPago as $metodoPago)
                          <option value="{{ $metodoPago->id }}">{{ $metodoPago->id }} - {{ $metodoPago->nombre }}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Pagar</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                  </div>
                  </form>
                </div>
              </div>
            </div>

            <div class="modal" id="modal-cita">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="formulario-detalle" method="POST" action="{{ url('citas/estatus') }}">
                            @csrf
                            <div class="modal-header bg-dark">
                                <h5 class="modal-title" id="citaModalLabel">Detalle de la Cita</h5>
                                <button type="button" class="close" data-dismiss="modal"
                                  aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="">Cliente</label>
                                    <input name="cliente_editar"
                                        id="cliente_editar"
                                        class="form-control form-control-sm"
                                        readonly
                                        />

                                    <input name="cita_id"
                                        id="cita_id"
                                        class="form-control form-control-sm"
                                        type="hidden"
                                        />
                                </div>
                                <div class="form-group">
                                    <label>Cambiar estatus a:</label>
                                    <select name="estatus" id="estatus"  class="form-control form-control-sm">
                                        <option value="pendiente">Pendiente</option>
                                        <option value="cancelada">Cancelada</option>
                                        <option value="finalizada">Finalizada</option>
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button id="btn-submit-formulario-detalle" type="submit" class="btn     btn-sm btn-primary">
                                    Guardar
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">
                                    Cancelar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal" id="modal-cancelar-pago">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="formulario-cancelar-pago" method="POST" action="{{ url('pagos/cancelar') }}">
                            @csrf
                            <div class="modal-header bg-dark">
                                <h5 class="modal-title" id="citaModalLabel">Cancelar Pago</h5>
                                <button type="button" class="close" data-dismiss="modal"
                                  aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="">Cliente</label>
                                    <input name="cliente_cancelar_pago"
                                        id="cliente_cancelar_pago"
                                        class="form-control form-control-sm"
                                        readonly
                                        />

                                    <input name="cita_id_cancelar_pago"
                                        id="cita_id_cancelar_pago"
                                        class="form-control form-control-sm"
                                        type="hidden"
                                        />
                                </div>
                                <div class="form-group">
                                    <label>Regresar estatus a:</label>
                                    <select name="estatus_cancelar_pago" id="estatus_cancelar_pago"  class="form-control form-control-sm">
                                        <option value="pagada">Pagada</option>
                                        <option value="pendiente">Pendiente</option>
                                        <option value="cancelada">Cancelada</option>
                                        <option value="finalizada">Finalizada</option>
                                    </select>
                                    <span class="text-danger" id="error-mensaje-estatus_cancelar_pago"></span>
                                </div>
                                <div class="form-group">
                                  <label for="">Motivo de Cancelación</label>
                                  <textarea class="form-control form-control-sm"
                                    name="motivo_cancelacion"
                                    id="motivo_cancelacion"
                                    id="motivo_cancelacion"
                                    cols="30"
                                    rows="3"
                                    required></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button id="btn-submit-formulario-detalle"
                                  role="button"
                                  class="btn btn-sm btn-primary">
                                    Guardar
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">
                                    Cancelar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    const config = {
      'catStatusCitas': {
        'p': 'pagada',
        'c': 'cancelada',
        'f': 'finalizada',
        'pte': 'pendiente',
        'pg': 'pago_cancelado'
      },
      'urlCitaDetalle': '/cita/detalle',
      'urlVerMovimientosPagos': '/pagos/movimientos'
    };

    $(document).ready(function(){
        $('.datatable').DataTable({
            responsive: true,
            lengthChange: false,
            autoWidth: false,
            processing : true,
            serverSide : true,
            language : {
                "url" : "{{ global_asset('plugins/Spanish.json') }}"
            },
            ajax : {
                url : "{{ url('/pagos') }}"
            },
            columns : [
                {
                    data: 'id',
                    name: 'id',
                    orderable: false
                },
                {
                    data: 'nombre_completo',
                    name: 'nombre'
                },
                {
                    data: 'fecha_cita',
                    name: 'fecha'
                },
                {
                    data: 'hora_cita',
                    name: 'fecha_fin'
                },
                {
                    data: 'status',
                    name: 'estatus'
                },
                {
                    data: 'metodo_pago',
                    name: 'metodo_pago'
                },
                {
                    data: 'fecha_pago',
                    name: 'fecha_pago'
                },
                {
                    data: 'pago_cancelado',
                    name: 'pago_cancelado'
                },
                {
                    data: 'action',
                    name: 'action',
                    class: 'text-center',
                    orderable: false
                }
            ]
        });

        $("#btn-submit-formulario-detalle").click(function(event){
          event.preventDefault();

          // Validar si el estatus es diferente de pagado (Si es pagado no tiene caso realizar la transacción)
          // Si es pagado no se puede realizar la transacción
          if ($("#estatus_cancelar_pago").val() === config.catStatusCitas.p) {
            let htmlErrorMensajeEstatusCancelarPago = '<small>Se requiere un estatus diferente a pagada para continuar.</small>';
            $("#error-mensaje-estatus_cancelar_pago").html(htmlErrorMensajeEstatusCancelarPago);
            return false;
          }

          $('#formulario-cancelar-pago').submit();
        });
    })

    function detalle(citaId) {
      const data = {
        'id': citaId,
      };

      $.get(config.urlCitaDetalle + '/' + citaId)
            .done(function(response) {
                console.log('response', response);
                const data = response.data;

                $("#documento-detalle").val(data.documento);
                $("#nombre-detalle").val(data.nombre_completo);
                $("#correo-detalle").val(data.email);
                $("#telefono-detalle").val(data.telefono);
                $("#fecha-detalle").val(data.fecha_cita);
                $("#hora-detalle").val(data.hora_cita);
                $("#estatus-detalle").val(data.status);
                $("#documento-detalle").val(data.documento);

                $("#id-metodo-pago-detalle").val(data.metodo_pago_id);
                $("#metodo-pago-detalle").val(data.metodo_pago);
                $("#fecha-pago-detalle").val(data.fecha_pago);

                $('#modal-detalle').modal('show');
            });
    }

    function verMovimientosPagos(citaId) {
      const data = {
        'id': citaId,
      };

      $.get(config.urlVerMovimientosPagos + '/' + citaId)
            .done(function(response) {
                console.log('response', response);

                $("#content-movimientos-pagos").html('');
                $("#content-movimientos-pagos").html(response.data);

                $('#modal-movimientos-pagos').modal('show');
            });
    }

    function pagar(citaId) {
      const data = {
        'id': citaId,
        'estatus': config.catStatusCitas.p,
        'metodo_pago_id': 0,
      };

      console.log('Pagar', data);
      $("#cita-id").val(citaId);
      $('#modal-pagar').modal('show');
    }

    function cancelar(citaId) {
      const data = {
        'id': citaId,
        'estatus': config.catStatusCitas.c,
      };

      $.get(config.urlCitaDetalle + '/' + citaId)
            .done(function(response) {
                console.log('response', response);
                const data = response.data;

                $("#cliente_editar").val(data.nombre_completo);
                $("#cita_id").val(data.id);
                $("#estatus").val(data.status);

                $('#modal-cita').modal('show');
            });
    }

    function finalizar(citaId) {
      const data = {
        'id': citaId,
        'estatus': config.catStatusCitas.f,
      };

      console.log('Finalizar', data);
      $.get(config.urlCitaDetalle + '/' + citaId)
            .done(function(response) {
                console.log('response', response);
                const data = response.data;

                $("#cliente_editar").val(data.nombre_completo);
                $("#cita_id").val(data.id);
                $("#estatus").val(data.status);

                $('#modal-cita').modal('show');
            });
    }

    function cancelarPago(citaId) {
      const data = {
        'id': citaId,
        'estatus': config.catStatusCitas.pg,
      };

      console.log('Cancelar Pago', data);

      $.get(config.urlCitaDetalle + '/' + citaId)
            .done(function(response) {
                console.log('response', response);
                const data = response.data;

                $("#cliente_cancelar_pago").val(data.nombre_completo);
                $("#cita_id_cancelar_pago").val(data.id);
                $("#estatus_cancelar_pago").val(data.status);

                $('#modal-cancelar-pago').modal('show');
            });
    }

    $('#modal-pagar').on('hidden.bs.modal', function (e) {
      $("#cita-id").val('');
      $("#metodo_pago_id").val('');
    })

/*     $('#formulario-cancelar-pago').on('submit', function(event){ */

</script>
@endsection