@extends('layouts.frontpages')

@section('content')
    @include('partials.header')

    <div class="page home">
        @include('partials.banner-user')
        <div class="container">
            <div class="row list-menu">
                <div class="col-md-12">
                    <br> <br>
                </div>
                <div class="col-md-3">
                    <a class="btn-pink" href="{{ route('home') }}">Inicio</a>
                </div>
                <div class="col-md-3">
                    <a class="btn-pink" href="{{ route('sales') }}">Resumen de compras</a>
                </div>
                <div class="col-md-3">
                    <a class="btn-pink background-orange" href="{{ route('bill.create') }}">Tus facturas</a>
                </div>
                {{-- <div class="col-md-3">
                    <a class="btn-pink" href="{{ route('campaings') }}">Beneficios</a>
                </div> --}}
                <div class="col-md-3">
                    <a class="btn-pink" href="{{ route('update-data') }}">Actualizar Datos</a>
                </div>
                <div class="col-md-12 text-center">
                    <br>
                    <h1 class="legend">TUS FACTURAS </h1>
                    {{-- <p>¿Sabes como subir tu factura correctamente?</p>
                    <p>Conoce como hacerlo <a class="text-pink" href="{{ route('bill.viewpdf') }}" target="_blank">aquí</a>
                    </p> --}}
                    <br>
                </div>
                {{-- <div class="col-md-5">
                    <form class="add-bill row" action="{{ route('bill.store') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="col-md-12 mb-2">
                            <h5 class="text-center">Sube tu factura</h5>
                        </div>

                        @include('partials.messages')
                         <div class="col-md-12 form-group">
                                <label for="">Tienda <span class="text-red-600">*</span> </label>
                                <select class="form-control" name="shop_id" required>
                                    <option value="" selected disabled>Seleccione una opción</option>
                                    @foreach ($shops as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        <div class="col-md-7 col-12 form-group">
                            <label for="">Número factura <span class="text-red-600">*</span>
                                <span class="badge badge-success bgcolorOrange" data-toggle="tooltip" data-placement="top"
                                    title="El número se encuentra en la parte superior de la factura. Ej: BT-102030">?</span>
                            </label>
                            <div class="row">
                                <div class="col-md-4 col-4 from-group">
                                    <input type="text" name="code" value="{{ old('code') }}" class="form-control"
                                        placeholder="AA" required>
                                </div>
                                <div class="col-md-8 col-8 paddingLeft0">
                                    <input type="number" name="plus_code" value="{{ old('plus_code') }}"
                                        class="form-control" placeholder="999999" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 form-group">
                            <label for="">Valor <span class="text-red-600">*</span>
                                <span class="badge badge-success bgcolorOrange" data-toggle="tooltip" data-placement="top"
                                    title="El número que ingreses no debe contener ningún signo de puntuación. Ej: 50000">?</span>
                            </label>
                            <input type="number" name="value" class="form-control" value="{{ old('value') }}" required>
                        </div>
                        <div class="col-md-12 form-group">
                            <label for="">Fecha factura <span class="text-red-600">*</span> </label>
                            <div class="row">
                                <div class="col-md-4 col-4">
                                    <input type="number" name="day" placeholder="DD" value="{{ old('day') }}"
                                        class="form-control" required>
                                </div>
                                <div class="col-md-3 col-4 paddingLeft0 form-group">
                                    <input type="number" name="month" placeholder="MM" value="{{ old('month') }}"
                                        class="form-control" required>
                                </div>
                                <div class="col-md-5 col-4">
                                    <input type="number" name="year" placeholder="YYYY" value="{{ old('year') }}"
                                        class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 form-group">
                            <label for="">Foto factura <span class="text-red-600">*</span> </label>
                            <input type="file" name="photo" class="form-control" required>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn-pink">SUBIR FACTURA</button>
                        </div>
                    </form>
                </div> --}}
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>No. Factura</th>
                                    <th width="100">Valor</th>
                                    <th width="120">Fecha Fact.</th>
                                    <th>Estado</th>
                                    <th>Tienda / Descripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($bills as $item)
                                    <tr>
                                        <td><a href="{{ asset('storage/' . $item->image) }}"
                                                target="_blank">{{ $item->number }}</a></td>
                                        <td>$ {{ number_format($item->value, 0, ',', '.') }}</td>
                                        <td>{{ $item->date }}</td>
                                        <td>{{ $item->status_name }}</td>
                                        <td>
                                            {{ str_limit($item->shop->name, 25) }} <br>
                                            @if ($item->status == 2)
                                                {{ $item['observations'] }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12 text-center">
                        {{ $bills->links() }}
                    </div>
                </div>
                <div class="col-md-12">
                    <br> <br>
                </div>
            </div>
        </div>
    </div>

    @include('partials.footer')

    @include('partials.modal-bills-icg')
@endsection

@section('scripts')
    <script type="text/javascript">
        $('#bills-icg').modal('show')

        $(function() {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
@endsection