@extends('layouts.adminpages')

@section('content')
    <div class="content row">
        <div class="col-md-12">
            <div class="title-page">
                Facturas ({{ $bills->total() }})
            </div>
        </div>
        <div class="col-md-12">
            <br>
            <div class="row">
                <div class="col-md-4">
                    <button class="btn btn-success">
                        <a class="text-white" href="{{ route('increment-points.index') }}">Duplicar puntos por factura</a>
                    </button>
                </div>
                <div class="col-md-8">
                    <form class="row" action="{{ url('bills-download') }}" method="get">
                        <div class="col-md-5 form-group">
                            <input type="date" name="start" class="form-control">
                        </div>
                        <div class="col-md-5">
                            <input type="date" name="end" class="form-control">
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-success"> <i class="fa fa-download"></i> </button>
                        </div>
                    </form>
                </div>
                <div class="col-md-8">
                    <form class="row" action="{{ url('bills') }}" method="get">
                        <div class="col-md-3 form-group">
                            <input type="text" name="search" placeholder="Cedula" class="form-control"
                                value="{{ request()->search }}">
                        </div>
                        <div class="col-md-3 form-group">
                            <input type="text" name="code" placeholder="Codigo" class="form-control"
                                value="{{ request()->code }}">
                        </div>
                        <div class="col-md-3 form-group">
                            <select name="status" class="form-control">
                                <option value="" selected disabled>Estado</option>
                                <option value="0" @if ($status === '0') selected @endif>Pendiente</option>
                                <option value="1" @if ($status === '1') selected @endif>Aprobada</option>
                                <option value="2" @if ($status === '2') selected @endif>Rechazada</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-success"> <i class="fa fa-search"></i> </button>
                            @if (app('request')->query->count(['parameters']))
                                <a href="{{ url('bills') }}" class="btn btn-danger"> <i class="fa fa-times"></i> </a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            @if (session('status'))
                <div class="alert alert-success">
                    {{ session('status') }}
                </div>
            @endif
        </div>
        <div class="col-md-12 text-center">
            <div class="alert alert-info">
                Tienes <b>{{ $pending }}</b> facturas pendientes por revisar.
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Cedula</th>
                            <th>Tienda</th>
                            <th>No. Factura</th>
                            <th>Fecha</th>
                            <th>Valor</th>
                            <th>Foto</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($bills as $item)
                            <tr>
                                <td>{{ $item->userWithTrashed->first_name }}</td>
                                <td>{{ $item->userWithTrashed->identification }}</td>
                                <td>{{ $item->shop->name }}</td>
                                <td>
                                    @if ($item->observations)
                                        <i class="fa fa-info" data-toggle="tooltip" data-placement="top"
                                            title="{{ $item->observations }}"></i>
                                    @endif
                                    {{ $item->number }}
                                    <br>
                                    IA:
                                    @if ($item->vision == 1)
                                        <i class="fa fa-check text-xs text-green"></i>
                                    @else
                                        <i class="fa fa-times text-xs text-green"></i>
                                    @endif
                                </td>
                                <td>{{ $item->date }}</td>
                                <td>$ {{ number_format($item->value, 0, ',', '.') }}</td>
                                <td><a class="btn btn-sm btn-secondary" target="_blank"
                                        href="{{ asset('storage/' . $item->image) }}">Ver</a></td>
                                <td>
                                    @if ($item->status == 0)
                                        <button type="button" class="btn btn-sm btn-success"
                                            onclick="AnswerBill('{{ $item->id }}')">Pendiente</button>
                                    @endif
                                    @if ($item->status == 1)
                                        <b>Aprobada</b>
                                    @endif
                                    @if ($item->status == 2)
                                        Rechazada
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-12 text-center">
            <div class="pag-prize">
                {{ $bills->appends(request()->query())->links() }}
            </div>
        </div>
        <div class="col-md-12">
            <div class="footer-page"></div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="bill" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Responder Factura</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <form class="" action="{{ url('bills/update' . '?page=' . request()->page) }}" method="post">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="">Estado <span>*</span> </label>
                            <div>
                                <button type="button" id="status1" class="btn btn-dark"
                                    onclick="changeStatus('1')">Aprobar</button>
                                <button type="button" id="status2" class="btn btn-light"
                                    onclick="changeStatus('2')">Rechazar</button>
                            </div>
                        </div>
                        <div class="form-group d-none" id="options">
                            <label for="">Razon de rechazo <span>*</span> </label>
                            <div class="options-rechazed">
                                @foreach ($rejection_reasons as $item)
                                    <button type="button" id="option1" class="btn btn-light form-group"
                                        onclick="changeOption('{{ $item['id'] }}')">
                                        {{ $item['name'] }}
                                    </button>
                                @endforeach
                            </div>
                        </div>
                        <div class="form-group d-none" id="other">
                            <label for="">Descripcion</label>
                            <textarea name="observations" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <input type="hidden" class="form-control" name="reason" id="reason">
                            <input type="hidden" class="form-control" value="1" name="status" id="status">
                            <input type="hidden" class="form-control" name="bill_id" id="bill_id">
                            <button type="submit" class="btn btn-success btn-block">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        function AnswerBill(id) {
            $('#bill_id').val(id)
            $("#bill").modal()
        }

        function changeStatus(id) {
            if (id == 1) {
                $("#status1").addClass("btn-dark")
                $("#status2").addClass("btn-light")
                $("#status2").removeClass("btn-dark")
                $("#options").addClass("d-none")
            } else {
                $("#status2").addClass("btn-dark")
                $("#status1").addClass("btn-light")
                $("#status1").removeClass("btn-dark")
                $("#options").removeClass("d-none")
            }
            $('#status').val(id)
        }

        function changeOption(id) {
            $('.options-rechazed .btn').removeClass('btn-dark').addClass('btn-light');
            console.log(id)
            switch (id) {
                case '1':
                    $("#option1").addClass("btn-dark");
                    $("#other").addClass("d-none");
                    break;
                case '2':
                    $("#option2").addClass("btn-dark");
                    $("#other").addClass("d-none");
                    break;
                case '3':
                    $("#option3").addClass("btn-dark");
                    $("#other").addClass("d-none");
                    break;
                case '4':
                    $("#option4").addClass("btn-dark");
                    $("#other").removeClass("d-none");
                    break;
            }
            $('#reason').val(id)
        }

        $("#status").change(function() {
            const status = this.value;
            if (status == 2) {
                $("#description_info").removeClass("d-none")
            } else {
                $("#description_info").addClass("d-none")
            }
        })
    </script>
@endsection