@extends('layouts.admin')
@section('styles')
<link rel="stylesheet" href="{{asset('assets/theme/vendor/select2/select2.min.css')}}">
@endsection


@section('content')
<div class="row d-flex align-items-stretch">
    <div class="col-12 ">
        <div class="card card-primary card-tabs">
            <div class="card-header p-0 pt-1">
                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="false">Datos Ingresados </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Actualizar Datos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="custom-tabs-one-messages-tab" data-toggle="pill" href="#custom-tabs-one-messages" role="tab" aria-controls="custom-tabs-one-messages" aria-selected="true">Asignar Repuesto</a>
                    </li>

                    <li class="nav-item">
                        <a target="_blanck" class="btn btn-info" href="{{route('servi.printService', ['id' => $servi->id])}}">Imprimir</a>
                    </li>

                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="custom-tabs-one-tabContent">
                    <div class="tab-pane active " id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title text-capitalize">{{$servi->articulo}} - {{$servi->tipo}} / Estado: {{$estado}}</h3>
                            </div>
                            <div class="card-body" style="display: block;">
                                <div class="row">
                                    <div class="col-12 col-md-12 col-lg-8 order-2 order-md-1">
                                        <div class="row">
                                            <div class="col-12 col-sm-4">
                                                <div class="info-box bg-light">
                                                    <div class="info-box-content">
                                                        <span class="info-box-text text-center text-muted">Total</span>
                                                        <span class="info-box-number text-center text-muted mb-0">Q {{$servi->total}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4">
                                                <div class="info-box bg-light">
                                                    <div class="info-box-content">
                                                        <span class="info-box-text text-center text-muted">Anticipo</span>
                                                        <span class="info-box-number text-center text-muted mb-0">Q {{$servi->anticipo}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4">
                                                <div class="info-box bg-light">
                                                    <div class="info-box-content">
                                                        <span class="info-box-text text-center text-muted">Pendiente</span>
                                                        <span class="info-box-number text-center text-muted mb-0">Q {{$servi->pendiente}} <span>
                                                            </span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <h4>Respuestos</h4>

                                                @foreach($repuesto as $rep)
                                                <div class="post">
                                                    <div class="user-block">

                                                        <span class="username text-capitalize">
                                                            <a href="#">{{$rep->nombre}}</a>
                                                        </span>
                                                        <span class="description">Fecha de Colocacion: {{$rep->repuesto->fechadeventa}}</span>
                                                    </div>

                                                    <p>
                                                    <p class="text-sm"><i class="fas fa-link mr-1"></i> Precio Venta: Q. {{$rep->repuesto->cotos }}</p>
                                                    @can('servi.costo')
                                                    <p class="text-sm"><i class="fas fa-link mr-1"></i> Precio Costo Q. {{$rep->repuesto->p_costo }}</p>
                                                    @endcan

                                                    <br>

                                                    <a class="btn btn-danger btn-sm" href="{{route('servi.deleteserviciorepuesto', ['id' => $rep->id])}}"> <i class="fa fa-trash" aria-hidden="true"></i> Eliminar Repuesto</a>

                                                    </p>
                                                </div>
                                                @endforeach

                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-12 col-md-12 col-lg-4 order-1 order-md-2">
                                        <h3 class="text-primary text-capitalize"><i class="fas fa-paint-brush"></i> {{$servi->articulo}}</h3>

                                        <br>
                                        <br>
                                        <br>

                                        <p><b>Caso:</b>No. 000{{$servi->id}} </p>

                                        <hr>
                                        <p class="text-muted text-capitalize">Problema: {{$servi->problema}} <br> Solucion: {{$servi->solucion}} <br> Total + Repuestos: {{$total}}</p>
                                        <hr>


                                        <br>
                                        <div class="text-muted">
                                            <p class="text-sm">Fecha de Recivido
                                                <b class="d-block">{{$servi->fecha_rev}}</b>
                                            </p>
                                            <p class="text-sm">Fecha de Entrega
                                                <b class="d-block">{{$servi->fecha_ent}}</b>
                                            </p>
                                        </div>

                                        <hr>

                                        <p>Datos de Cliente</p>
                                        <p><b>Nombre: </b>{{$servi->cliente->nombre}}</p>
                                        <p><b>Telefono: </b>{{$servi->cliente->telefono1}}</p>
                                        <p><b>Teledono Securidad: </b>{{$servi->cliente->telefono2}}</p>
                                        <hr>



                                        <h5 class="mt-5 text-muted"><i class="fas fa-boxes    "></i> Numero de Caja</h5>
                                        <p>Caja: {{$servi->caja}}</p>


                                        <h5 class="mt-5 text-muted">Observacion</h5>
                                        <ul class="list-unstyled text-capitalize">
                                            <li>
                                                <a href="#" class="btn-link text-secondary "><i class="far fa-fw fa-file-word"></i> {{$servi->observacion}}</a>
                                            </li>
                                        </ul>
                                        <h5 class="mt-5 text-muted">Tecnico / Encargado del Caso</h5>
                                        <ul class="list-unstyled text-capitalize">
                                            <li>
                                                <a href="#" class="btn-link text-secondary "><i class="fa fa-user-circle" aria-hidden="true"></i> {{$servi->name}}</a>
                                            </li>
                                        </ul>

                                        @if($estado == 'Activo')
                                        <div class="text-center mt-5 mb-3">
                                            <a href="{{route('servi.entregar',['id' => $servi->id])}}" class="btn btn-sm btn-primary">Entregar {{$servi->articulo}}</a>
                                        </div>
                                        @endif

                                        @if($estado == 'Inactivo')
                                        <div class="text-center mt-5 mb-3">
                                            <a href="{{route('servi.entregar',['id' => $servi->id])}}" class="btn btn-sm btn-primary">Activar {{$servi->articulo}}</a>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>

                    </div>

                    <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">



                        <form action="{{route('servi.update', ['id' => $servi->id])}}" method="post">
                            @csrf()
                            @method('PUT')


                            @include('admin.servicios.forms.from')


                            <button type="submit" class="btn btn-warning btn-block">Actualizar</button>

                        </form>


                    </div>

                    <div class="tab-pane fade show" id="custom-tabs-one-messages" role="tabpanel" aria-labelledby="custom-tabs-one-messages-tab">

                        <h5>Datos de Repuesto</h5>

                        <form action="{{route('servi.storerepuesto')}}" method="post">
                            @csrf()

                            <input type="hidden" name="servicio" value="{{$servi->id}}">

                            <div class="form-row">
                                <div class="form-group col-md">
                                    <label for="inputCity">Nombre </label>
                                    <input type="text" class="form-control" required name="nombre">
                                </div>
                                <div class="form-group col-md">
                                    <label for="inputState">Fecha de Colocacion</label>
                                    <input type="date" class="form-control" required name="fecha">
                                </div>

                                <div class="form-group col-md">
                                    <label for="inputState">Precio Venta</label>
                                    <input type="number " step="any" class="form-control" required name="costo">
                                </div>

                                <div class="form-group col-md">
                                    <label for="inputState">Precio Costo</label>
                                    <input type="number" step="any" class="form-control" required name="p_costo">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-success btn-block"> <i class="fa fa-save    "></i> Guardar</button>


                        </form>


                    </div>

                </div>
            </div>
            <!-- /.card -->
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{asset('assets/theme/vendor/select2/select2.min.js')}}"></script>

<script>
    $(document).ready(function() {
        $('#idcliente').select2({
            width: '100% !important'
        });
        $('#medicamento').select2({
            width: '100% !important'
        });
    });
</script>
@endsection