{{-- extend layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title','Ordenes de compra')
{{-- vendor styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/dataTables.checkboxes.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
@endsection

<style>
    #btn-filter{
        width: unset !important;
        border-radius: 2%;
    }
</style>

{{-- page content --}}
@section('content')
                <!-- Modal Trigger -->
                <div id="add_bussines" class="modal">
                    @include('pages.purchaseOrders._form')
                </div>
                <div id="edit_bussines" class="modal"></div>
                <div id="load_progress" class="progress" style="display: none">
                    <div class="indeterminate"></div>
                </div>
<div class="breadcrumbs-dark pb-0 pt-0" id="breadcrumbs-wrapper">
  <!-- Search for small screen-->
  <div class="container">
    <div class="row">
      <div class="col s10 m6 l6">
        <h5 class="breadcrumbs-title mt-0 mb-0"><span>Ordenes de compra </span></h5>
      </div>
    </div>
  </div>
</div>

<section class="invoice-list-wrapper section col s12">
  <div class="filter-btn">
    <a class='dropdown-trigger btn waves-effect waves-light purple darken-1 border-round' href='#'
      data-target='btn-filter'>
      <span class="hide-on-small-only">Filtrar</span>
      <i class="material-icons">keyboard_arrow_down</i>
    </a>

        <ul id='btn-filter' class='dropdown-content'>
            <form action="{{ route('bussines.index') }}" method="GET" id="myForm">
                <li><a href="#" onclick="submitFilter(0)">Pendiente</a></li>
                <li><a href="#" onclick="submitFilter(1)">Pagada</a></li>
                <li><a href="#" onclick="submitFilter(2)">Cancelada</a></li>
                <li><a href="#" onclick="submitFilter(3)">Entregada</a></li>
            </form>
        </ul>
        <div class="invoice-create-btn">
            <a href="#"
                class="btn waves-effect waves-light invoice-create border-round z-depth-4 modal-trigger">
                {{-- <i class="material-icons">add</i> --}}
                <span class="hide-on-small-only" onclick="actualizar()">Actualizar</span>
            </a>
        </div>

  </div>

  <div class="responsive-table">
    <table class="table invoice-data-table white border-radius-4 pt-1">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th>Fecha de Creaci&oacuten</th>
          {{-- <th>Productos</th> --}}
          <th>Valor Unit</th>
          <th>Cantidad</th>
          <th>Proveedor</th>
          <th>Total</th>
          <th>Estado</th>
          <th>Acci&oacute;n</th>
        </tr>
      </thead>

      <tbody>
          @forelse ($purchaseOrders as $purchase)
            <tr>
                <td></td>
                <td></td>
                <td><span class="invoice-amount">{{ date('d-m-Y H:i a', strtotime($purchase->creationDate)) }}</span></td>
                {{-- <td>{{ count($purchase->products) }}</td> --}}
                <td>$ {{number_format($purchase->products[0]->price,0,',','.')}}</td>
                <td>
                   {{ $purchase->products[0]->amount }}
                </td>
                <td>
                    @foreach ($suppliers as $supplier)
                        @if($supplier->uuidKey === $purchase->supplierUuidKey)
                            {{ $supplier->name }}
                            @break
                        @endif
                    @endforeach
                 </td>
                <td>
                   $ {{number_format($purchase->totalToPay,0,',','.')}}
                </td>
                <td>
                   {{ ($purchase->state == 0) ? 'Pendiente' : (($purchase->state == 1) ? 'Cancelada' : 'Entregada')  }}
                </td>
                <td>
                    <div class="invoice-action">
                    <!-- <a href="#" class="invoice-action-view mr-4 detele" data-id="{{ $purchase->id }}">
                        <i class="material-icons">clear</i>
                    </a> -->
                    <a href="{{ route('purchaseEdit', ['idOrden' => $purchase->id]) }}" class="invoice-action-edit" data-id="{{ $purchase->id }}">
                        <i class="material-icons">edit</i>
                    </a>

                   <!-- <a href="{{ route('purchaseDelete', ['idOrden' => $purchase->id]) }}" class="invoice-action-edit" data-id="{{ $purchase->id }}">
                        <i class="material-icons">clear</i>
                    </a> -->
                    </div>
                </td>
            </tr>
          @empty

          @endforelse

      </tbody>
    </table>

    <div>
        {{ $acum }} pendiente
    </div>
  </div>
</section>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/datatables.checkboxes.min.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')

<script>
    function actualizar() {
        setTimeout(() => {
            window.location.reload();
        },1000);
    }
</script>
<script src="{{asset('js/scripts/app-categories.js')}}"></script>
<script>
    $(function() {
    $('.modal').modal();
    $('#modal3').modal('open');
    $('#modal3').modal('close');

  });
    const buttons = document.querySelectorAll(".invoice-action-edit");
    const addButton = document.getElementById("addButton");
    const progress = document.getElementById('load_progress');

    addButton.addEventListener('click', function(event) {
        addButton.classList.add("disabled");

        progress.style.display = 'block';

        setTimeout(() => {
                progress.style.display = 'none';
                addButton.classList.remove("disabled");
        }, 1000);
    })

for (const button of buttons) {
    button.addEventListener('click', function (event) {
        const progress = document.getElementById('load_progress');
        progress.style.display = 'block';

        let bussine_id = this.getAttribute('data-id');
        const routeedit = `{{ route('bussines.edit', ['bussine' => ':id']) }}`;
        url = routeedit.replace(':id', bussine_id);
        fetch(url)
            .then(response => {
                return response.text();
            })
            .then(response => {
                const edit_bussines = document.getElementById('edit_bussines');
                edit_bussines.innerHTML = response
                $('#edit_bussines').modal('open');
                $(document).ready(function() {
                    M.updateTextFields();
                });
                progress.style.display = 'none';
            })
            .catch(error => console.log(error));
    })
}
const buttons_delete = document.querySelectorAll(".invoice-action-view");
for (const button_delete of buttons_delete) {
    button_delete.addEventListener('click', function (event) {
        const progress = document.getElementById('load_progress');
        progress.style.display = 'block';

        let bussine_id = this.getAttribute('data-id');
         swal({
            title: "Eliminar?",
            text: "Desea usted eliminar esta empresa!",
            icon: 'warning',
            dangerMode: true,
            buttons: {
            cancel: 'No!',
            delete: 'Si, eliminar!'
            }
        }).then(function (willDelete) {
            if (willDelete) {
                const routeedit = `{{ route('bussines.destroy', ['bussine' => ':id']) }}`;
                    url = routeedit.replace(':id', bussine_id);
                    const fetchOptions = {
                        method: "delete",
                         body: JSON.stringify({
                                    id: bussine_id,
                                    _method: 'DELETE',
                                }),
                    };
                    fetch(url, fetchOptions)
                        .then(response => {
                            return response.text();
                        })
                        .then(response => {
                            progress.style.display = 'none';
                            setTimeout(() => {
                                window.location.reload()
                            }, 1000);
                        })
                        .catch(error => console.log(error));
            } else {
                 progress.style.display = 'none';
            swal("A cancelado el proceso", {
                title: 'Proceso cancelado',
                icon: "error",
            });
            }
        });
    })
}
function submitFilter(frm){
    var url = `{{ route('purchase.index') }}`;
        if(url.indexOf('?') != -1)
            var addon = '&stateParam='+frm;
        else
            var addon = '?stateParam='+frm;

    window.location.assign(url+addon);
}
</script>
@endsection