@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Lista de cajas')
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Lista de Cajas</h1>
@stop

@section('content')

    @if (!$cajaAbierta)
        <a class="btn btn-primary mb-3" href="#" id="openModal"> <i class="fa fa-box"></i> Aperturar caja</a>
    @endif

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Cajas</h3>
        </div>
        <div class="card-body">

            @include('partials.validaciones')

            <div class="table-responsive">
                <table class="table table-bordered" id="table-cajas" style="width: 100%;">
                    <thead>
                        <th>#</th>
                    <th>Usuario</th>
                    <th>Fecha Apertura</th>
                    <th>Monto de Apertura</th>
                    <th>Fecha Cierre</th>
                    <th>Monto de cierre</th>
                    <th>Estado</th>
                    <th>Opciones</th>
                </thead>
                <tbody>
                    @foreach ($cajas as $caja)
                        <tr>
                            <td>{{ $caja->id }}</td>
                            <td>{{ $caja->usuario->email }}</td>
                            <td>{{ $caja->fecha_apertura }}</td>
                            <td>{{ $caja->monto_apertura }}</td>
                            <td>{{ $caja->fecha_cierre }}</td>
                            <td>{{ $caja->monto_cierre }}</td>
                            <td>
                                @if ($caja->estado_caja == 1)
                                    <span class="badge bg-success"> <i class="fa fa-unlock"></i>Abierto</span>
                                @elseif($caja->estado_caja == 0)
                                    <span class="badge bg-secondary"> <i class="fa fa-lock"></i> Cerrado</span>
                                @endif
                            </td>
                            <td>
                                <div class="dropdown">
                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Acciones
                                    </button>
                                    <div class="dropdown-menu">
                                        <a href="{{ route('cajas.show', $caja->id) }}" class="dropdown-item">Ver</a>
                                        <form action="{{ route('cajas.destroy', $caja->id) }}" method="POST" class="delete-form"
                                            id="delete-form-{{ $caja->id }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="dropdown-item btn-delete"
                                                data-id="{{ $caja->id }}">Eliminar</button>
                                        </form>
                                        @if ($caja->estado_caja == 0)
                                            <a href="{{ route('caja.re-aperturar', $caja->id) }}" class="dropdown-item">Re-Aperturar</a>
                                        @endif
                                    </div>
                                </div>
                            </td>



                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade" id="aperturaCajaModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Aperturar Caja</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="aperturaCajaForm">
                        <div class="form-group">
                            <label for="monto_apertura">Monto de Apertura:</label>
                            <input type="number" class="form-control" id="monto_apertura" name="monto_apertura" required value="0">
                        </div>
                        <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Aperturar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


@stop

@section('css')

    <!-- SweetAlert2 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {

            $('#table-cajas').DataTable({
                language: { "url": "/js/spanish.json" },
                "pageLength": 10,
                "order": [ [0, 'desc'] ]
            });

            $('#openModal').on('click', function() {
                $('#aperturaCajaModal').modal('show');
            });

            $('#aperturaCajaForm').on('submit', function(e) {
                e.preventDefault();

                $.ajax({
                    url: '{{ route('cajas.store') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        monto_apertura: $('#monto_apertura').val(),
                    },
                    success: function(response) {
                        $('#aperturaCajaModal').modal('hide');

                        // Mostrar el SweetAlert2
                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: 'Caja aperturada exitosamente.',
                            timer: 1500, // Muestra el alert por 3 segundos
                            showConfirmButton: false
                        }).then(function() {
                            location
                                .reload(); // Recargar la página después de que el alert se haya mostrado
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Hubo un error al guardar la caja.',
                            timer: 1500, // Muestra el alert por 3 segundos
                            showConfirmButton: false
                        });
                    }
                });
            });

            // Maneja el clic en el botón de eliminar
            $('.btn-delete').on('click', function(e) {
                e.preventDefault();

                // Obtener el ID del formulario a eliminar
                var formId = $(this).data('id');
                var form = $('#delete-form-' + formId);

                // Mostrar SweetAlert2
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "¡No podrás recuperar este registro después de eliminarlo!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, eliminarlo',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Enviar la solicitud AJAX para eliminar
                        $.ajax({
                            url: form.attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Éxito!',
                                        text: response.message,
                                        timer: 1500,
                                        showConfirmButton: false
                                    }).then(function() {
                                        location
                                            .reload(); // Recargar la página después de que el alert se haya mostrado
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message,
                                        showConfirmButton: true
                                    });
                                }
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON.message || 'Hubo un error al procesar la solicitud.',
                                    showConfirmButton: true
                                });
                            }
                        });
                    }
                });
            });


        });
    </script>
@stop