@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Ordenes de la sucursal {{ $sucursal->name }}</div>

                <div class="card-body">
                    <div class="sk-folding-cube" id="loading">
                        <div class="sk-cube1 sk-cube"></div>
                        <div class="sk-cube2 sk-cube"></div>
                        <div class="sk-cube4 sk-cube"></div>
                        <div class="sk-cube3 sk-cube"></div>
                    </div>

                    <form method="POST" action="{{ route('orders.search') }}" autocomplete="off">
                    @csrf
                        @if($sucursales->count() > 1)
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group row" style="margin-bottom: .3rem;">
                                    <label for="id_sucursal" class="col-md-4 col-form-label text-md-right">Sucursal</label>
                                    <div class="col-md-8">
                                        <select id="id_sucursal" name="id_sucursal" class="form-control">
                                            @foreach ($sucursales as $item => $value)
                                                <option value="{{ $value->id }}" {{ ($value->id == $sucursal->id) ? 'selected' : '' }}>{{ $value->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        @if($sucursales->count() == 1)
                            <input value="{{ $sucursal->id }}" id="id_sucursal" name="id_sucursal" type="hidden">
                        @endif
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group row">
                                    <label for="fecha_ini" class="col-md-4 col-form-label text-md-right">Fecha Inicio</label>
                                    <div class="col-md-8">
                                        <input id="fecha_ini" type="date" class="form-control @error('fecha_ini') is-invalid @enderror" value="{{ $startDateText }}" name="fecha_ini" required autofocus>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-4">
                                <div class="form-group row">
                                    <label for="fecha_fin" class="col-md-4 col-form-label text-md-right">Fecha Fin</label>
                                    <div class="col-md-8">
                                        <input id="fecha_fin" type="date" class="form-control @error('fecha_fin') is-invalid @enderror" value="{{ $endDateText }}" name="fecha_fin"  required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary col-md-6 m-auto">
                                    Consultar
                                </button>
                            </div>
                        </div>
                    </form>
                    <hr>
                    <h3 style="text-align: center"><strong>Total Vendido: Q. {{ $total }}</strong></h3>

                    <table class="table table-striped d-none" id="orders">
                        <thead>
                          <tr>
                            <th scope="col">No.</th>
                            <th scope="col">Fecha y Hora</th>
                            <th scope="col">Nombre Cliente</th>
                            <th scope="col">Tipo</th>
                            <th scope="col">Estado</th>
                            <th scope="col">Tiempo</th>
                            <th scope="col">Subtotal</th>
                            <th scope="col">Descuento</th>
                            <th scope="col">Total</th>
                            <th scope="col" style="min-width: 70px;">Acciones</th>
                          </tr>
                        </thead>
                        <tbody>
                        @foreach ($orders as $key => $order)
                            <tr>
                                <td>{{ $order->order_number }}</td>
                                <td>{{ $order->start }}</td>
                                <td>{{ $order->cliente }}</td>
                                <td >{{ $order->categoryname }}</td>
                                <td id="estado{{$order->id }}">{{ $order->status }}</td>
                                <td >{{ $order->time }}</td>

                                <td id="sub{{$order->id }}"> {{ $order->total + $order->discount }} </td>
                                <td id="desc{{$order->id }}">{{ $order->discount }}</td>
                                <td id="tot{{$order->id }}">{{ $order->total }}</td>

                                <td>
                                    @if($order->status != 'anulada')
                                        <a href="{{ route('order.print', $order->id) }}">
                                            <button type='button' class='btn btn-outline-success' id="print{{$order->id }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16">
                                            <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                                            <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
                                            </svg>
                                            </button>
                                        </a>
                                        <button type='button' class='btn btn-outline-danger' onClick="cancelarOrden({{ $order->id}}, {{$order->order_number}})" id="cancel{{$order->id }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                            </svg>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript" >
    window.onload = function() {
        $('#loading').addClass('d-none');
        $('#orders').removeClass('d-none');
        $('#orders').DataTable({
            'language' : datatableSpanish,
            "pageLength": 50,
            "bLengthChange": false,
            "order": [[0, "desc"]]
        });

    }
</script>


<script>
function cancelarOrden(valor, id) {
  if(confirm("Esta seguro que desea cancelar la orden?")){
    $.ajax({
        method: 'POST',
        url: '{{  route('order.anular') }}',
        data: {id : valor },
        headers: {
            'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
        }
    }).done(function(response) {
        alert('Orden '+ id+ ' ha sido anulada');
        $('#estado'+valor).text("anulada");

        $('#sub'+valor).text('0');
        $('#desc'+valor).text('0');
        $('#tot'+valor).text('0');
        $('#print'+valor).hide();
        $('#cancel'+valor).hide();


    });
  }
}

</script>
@endsection