@extends('donamarmita-admin')
@section('title', 'Métodos de Pagamento - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fas fa-credit-card text-primary"></i> Métodos de Pagamento</h1>
            <p class="text-muted">Gira os métodos de pagamento disponíveis na sua loja online</p>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Métodos de Pagamento</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Top Stats Cards -->
    <div class="row tile_count">
        <div class="col-md-3 col-sm-3 col-xs-3 tile_stats_count">
            <span class="count_top"><i class="fas fa-cash-register"></i> Total de Métodos</span>
            <div class="count green">{{ $totalMethods }}</div>
            <span class="count_bottom">
                <i class="fas fa-sync-alt mr-1"></i> Configurados no Sistema
            </span>
        </div>

        @foreach($paymentMethods as $index => $paymentMethod)
            <div class="col-md-3 col-sm-3 col-xs-3 tile_stats_count">
                <span class="count_top"><i class="fas fa-medal text-warning"></i> TOP {{ $index + 1 }}</span>
                <div class="count" style="text-align: center;">
                    <img src="{{ asset('images/paymentmethod/' . $paymentMethod->pay_img) }}" 
                         width="80" 
                         style="border-radius: 10px; border: 2px solid #eee;" 
                         title="{{ $paymentMethod->pay_description_pt }}" 
                         alt="{{ $paymentMethod->pay_description_pt }}"
                         data-toggle="tooltip"
                         data-placement="top"
                         title="{{ $paymentMethod->pay_description_pt }}">
                </div>
                <span class="count_bottom text-muted small">
                    {{ Str::limit($paymentMethod->pay_description_pt, 20) }}
                </span>
            </div>
        @endforeach        
    </div>
    <!-- /Top Stats Cards -->

    <div class="clearfix"></div>
    <br>

    <!-- Main Content Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fas fa-list-ul"></i> Lista de Métodos de Pagamento</h2>
                    <div class="clearfix"></div>
                </div>
                
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                
                <!-- Alert Messages -->
                @if ($message = Session::get('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle mr-2"></i>
                    <strong>Sucesso!</strong> {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @endif
                
                @if ($message = Session::get('warning'))
                <div class="alert alert-warning alert-dismissible fade show information" role="alert">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>Atenção!</strong> {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @endif

                <div class="x_content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-box table-responsive">
                                <!-- Table Header Info -->
                                <div class="alert alert-info mb-3 information">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    Gira a visibilidade e taxas dos métodos de pagamento disponíveis para os seus clientes.
                                </div>

                                <table class="table table-striped table-hover jambo_table" id="datatableList">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th style="width: 80px; text-align: center;">Ícone</th>
                                            <th>Descrição</th>
                                            <th style="width: 150px; text-align: center;">Taxas Aplicadas</th>
                                            <th style="width: 140px; text-align: center;">Status</th>
                                            <th style="width: 100px; text-align: center;">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($methods as $method)
                                        @php
                                            $visibleText = $method->pay_visible ? 'Ativo' : 'Inativo';
                                            $badgeClass = $method->pay_visible ? 'badge-success' : 'badge-secondary';
                                            $rate = ($method->pay_flatrate != 0 || $method->pay_percentagerate != 0) 
                                                ? "{$method->pay_flatrate}€ + {$method->pay_percentagerate}%" 
                                                : "Sem taxas";
                                        @endphp
                                        <tr id="payment-method-{{ $method->pay_id }}">
                                            <!-- Ícone -->
                                            <td style="text-align: center; vertical-align: middle;">
                                                <img src="{{ asset('images/paymentmethod/' . (!empty($method->pay_img) ? $method->pay_img : 'comingsoon.jpg')) }}" 
                                                     class="img-thumbnail rounded" 
                                                     width="60" 
                                                     alt="{{ $method->pay_description_pt }}"
                                                     data-toggle="tooltip"
                                                     title="{{ $method->pay_description_pt }}">
                                            </td>
                                            
                                            <!-- Descrição -->
                                            <td style="vertical-align: middle;">
                                                <strong>{{ $method->pay_description_pt }}</strong>
                                            </td>
                                            
                                            <!-- Taxas -->
                                            <td style="text-align: center; vertical-align: middle;">
                                                <span class="badge badge-info py-2 px-3" style="font-size: 0.9em;">
                                                    <i class="fas fa-percentage mr-1"></i> {{ $rate }}
                                                </span>
                                            </td>
                                            
                                            <!-- Status -->
                                            <td style="text-align: center; vertical-align: middle;">
                                                <button
                                                    type="button"
                                                    class="btn btn-sm status-toggle-btn {{ $method->pay_visible ? 'btn-success' : 'btn-secondary' }}"
                                                    data-id="{{ $method->pay_id }}"
                                                    data-name="{{ $method->pay_description_pt }}"
                                                    data-visible="{{ $method->pay_visible ? 1 : 0 }}"
                                                    style="min-width:100px;">
                                                    {!! $method->pay_visible
                                                        ? '<i class="fas fa-eye mr-1"></i> Ativo'
                                                        : '<i class="fas fa-eye-slash mr-1"></i> Inativo' !!}
                                                </button>
                                            </td>
                                            
                                            <!-- Ações -->
                                            <td style="text-align: center; vertical-align: middle;">
                                                <a href="{{ route('admin.paymentmethod.details', $method->pay_id) }}" 
                                                   class="btn btn-primary btn-sm"
                                                   data-toggle="tooltip"
                                                   title="Editar taxas e configurações">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação para Alterar Status -->
<div class="modal fade" id="myModalPaymentMethod" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="statusModalLabel">
                    <i class="fas fa-exchange-alt mr-2"></i>Alterar Status do Método de Pagamento
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fas fa-question-circle fa-3x text-warning"></i>
                </div>
                <h6 class="text-center mb-3" id="modalMethodName"></h6>
                <p class="text-center">Deseja realmente <span id="actionText" class="font-weight-bold"></span> este método de pagamento?</p>
                <p class="text-muted small text-center">
                    <i class="fas fa-info-circle mr-1"></i>
                    Métodos inativos não serão exibidos aos clientes durante o checkout.
                </p>
                <form id="statusChangeForm">
                    @csrf
                    <input type="hidden" name="pay_id" id="modalPayId">
                    <input type="hidden" name="pay_visible" id="modalPayVisible">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i> Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="confirmPaymentMethod">
                    <i class="fas fa-check mr-1"></i> Confirmar
                </button>
            </div>
        </div>
    </div>
</div>

<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>
@endsection

@push('scripts')
<script>    
document.addEventListener('DOMContentLoaded', function () {

    let paymentTable = $('#datatableList').DataTable({
        retrieve: true,
        paging: false,
        searching: true,
        info: false,
        ordering: true,
        autoWidth: false,
        language: {
            url: '/vendor/datatables/Portuguese.json',
            search: ''
        },
        columnDefs: [
            { targets: [0,2,3,4], className: 'text-center align-middle' },
            { targets: [1], className: 'align-middle' },
            { targets: [4], orderable: false }
        ]
    });

    let activeRow   = null;
    let activeBtn   = null;

    /* ===============================
     | OPEN MODAL (DELEGATED)
     =============================== */
    $('#datatableList').on('click', '.status-toggle-btn', function () {

        activeBtn = this;
        activeRow = $(this).closest('tr');

        const id      = this.dataset.id;
        const name    = this.dataset.name;
        const visible = parseInt(this.dataset.visible, 10);
        const newVal  = visible ? 0 : 1;

        $('#modalPayId').val(id);
        $('#modalPayVisible').val(newVal);
        $('#modalMethodName').text(name);
        $('#actionText').text(newVal ? 'ativar' : 'desativar');

        $('#myModalPaymentMethod').modal('show');
    });

    /* ===============================
     | CONFIRM (AJAX)
     =============================== */
    $('#confirmPaymentMethod').on('click', async function () {

        const formData = new FormData(document.getElementById('statusChangeForm'));
        
        showLoader();
        
        try {
            const res = await fetch('{{ route("admin.paymentmethod.addremovepaymentmethod") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            });

            const data = await res.json();

            if (!data.success) {
                toast.error('Erro ao atualizar método.', 'Erro!', 3000);
                return;
            }

            /* ===============================
             | UPDATE DOM (CORRECT WAY)
             =============================== */
            const newVisible = data.pay_visible ? 1 : 0;

            activeBtn.dataset.visible = newVisible;

            if (newVisible) {
                activeBtn.classList.remove('btn-secondary');
                activeBtn.classList.add('btn-success');
                activeBtn.innerHTML = '<i class="fas fa-eye mr-1"></i> Ativo';
            } else {
                activeBtn.classList.remove('btn-success');
                activeBtn.classList.add('btn-secondary');
                activeBtn.innerHTML = '<i class="fas fa-eye-slash mr-1"></i> Inativo';
            }

            $('#myModalPaymentMethod').modal('hide');
            toast.success('Método de pagamento atualizado!', 'OK', 2000);

        } catch (e) {
            console.error(e);
            toast.error('Erro inesperado.', 'Erro!', 3000);
        } finally {
            hideLoader(); 
        }
    });
    
    function showLoader() {
        $('#dm-loader').fadeIn(150);
    }

    function hideLoader() {
        $('#dm-loader').fadeOut(150);
    }
});
</script>
@endpush