@extends('admin.layouts.app')

@section('content')
<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class='box-title'>
                <a href="{{ route('admin.index') }}">
                    <div class='box-back'>
                        <i class="fa fa-chevron-left"></i>
                    </div>
                </a>
                <p><a href='{{ route('admin.index') }}'>Administración</a> > <b>Compras</b></p>
            </div>
            @if ( session('msg') )
                <div class="alert alert-success">
                    {{ session('msg') }}
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif

            <div class="table-tools">
                <form id='form-filter' method='GET' action='{{ route('admin.purchases.index') }}'>
                    <div class="purchases-status">
                        <button id='0' type='button' class='btn-status btn btn-grey {{ !Request::get('estado') ? 'active' : '' }}'>
                            <i class="fas fa-circle"></i>
                            <span>Todas</span>
                        </button>

                        <button id='1' type='button' class='btn-status btn btn-green {{ Request::get('estado') == '1' ? 'active' : '' }}'>
                            <i class="fas fa-circle"></i>
                            <span>Aprobadas</span>      
                        </button>

                        <button id='2' type='button' class='btn-status btn btn-blue {{ Request::get('estado') == '2' ? 'active' : '' }}'>
                            <i class="fas fa-circle"></i>
                            <span>Pendientes</span>   
                        </button>

                        <button id='3' type='button' class='btn-status btn btn-red {{ Request::get('estado') == '3' ? 'active' : '' }}'>
                            <i class="fas fa-circle"></i>
                            <span>Rechazadas</span>
                        </button>
                        <input type='text' id='status' name='estado' value='{{ Request::get('estado') }}' class='hidden'>
                    </div>

                    <div class="purchases-method">
                        <select id='method' name='metodo'>
                            <option value='0'>Todas</option>
                            <option value='1' {{ Request::get('metodo') == '1' ? "selected":"" }}>MercadoPago</option>
                            <option value='2' {{ Request::get('metodo') == '2' ? "selected":"" }}>PayPal</option>
                            <option value='3' {{ Request::get('metodo') == '3' ? "selected":"" }}>Otros</option>
                        </select>
                    </div>
                </form>
            </div>

            @if ($purchases->isEmpty())
            <p>No se ha encontrado ninguna compra</p>
            @else
            <table id='admin-purchases-table'>
                <tr>
                    <th>Fecha</th>
                    <th>Curso</th>
                    <th>Usuario</th>
                    <th>Precio</th>
                    <th>Método de pago</th>
                    <th>Estado</th>
                    <th style='width: 50px'></th>
                </tr>
                @foreach($purchases as $purchase)
                    <tr>
                        <td>{{$purchase->date}}</td>
                        <td>
                            <a href="{{ route('admin.courses.show', $purchase->course_id) }}">
                                {{$purchase->course()->withTrashed()->first()->title}}
                            </a>
                        </td>
                        <td>
                            <a href="{{ route('admin.users.show', $purchase->user_id) }}">
                                {{$purchase->complete_name}}
                            </a>
                        </td>
                        <td>USD {{$purchase->price}}</td>
                        <td>{{$purchase->method}}</td>
                        <td class={{ strtolower($purchase->status) }}>
                            <i class="fas fa-square"></i>
                            {{$purchase->status}}
                        </td>
                        <td class='purchase-actions'>
                            <a href='{{ route('admin.purchases.show', $purchase->id) }}'>
                                <i class="fas fa-arrow-circle-right"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
            </table>
            @endif
            {{ $purchases->links() }}
        </div>
    </div>
</section>

<script>
    const form = document.querySelector('#form-filter')
    const inputStatus = document.querySelector('#status')
    const selectMethod = document.querySelector('#method')

    let statusBtns = document.querySelectorAll('.btn-status')
    statusBtns.forEach(btn => {
        btn.addEventListener('click', e => {
            inputStatus.value = btn.id
            form.submit()
        })
    })
    selectMethod.addEventListener('change', e => {
        form.submit()
    })
</script>
@endsection