@extends('layouts.index', ['titulo' => 'Vincular equipos', 'nombre_titulo' => 'Vincular equipos'])

@section('breadcrumb')
    <!-- Breadcrumb -->
@endsection

@section('btns')
    <a href="{{ route('clientes.index') }}" type="button" class="btn btn-iniciar">
        Atrás
    </a>
@endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="contenedor card " id="kt_content_container">
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 mb-10 mb-lg-0 h-100">
                    <div class="card-flush h-100">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2 class="fs-1">Equipos seleccionados</h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('vinculacion.store') }}" method="POST">
                            @csrf
                            <!-- Cliente -->
                            <div class="mb-3">
                                <label class="form-label">Cliente:</label>
                                <label class="form-label">{{$cliente->nombre_completo}}</label>
                            </div>

                                <!--begin::Order details-->
                                <!--begin::Input group-->
                                <div>
                                    <!--begin::Label-->
                                    <label class="form-label fs-3 mt-4">Agregar equipos a este espacio</label>
                                    <!--end::Label-->

                                    <!--begin::Selected products-->
                                    <div class="row row-cols-1 row-cols-xl-3 row-cols-md-2 border border-dashed rounded pt-3 pb-1 px-2 mb-5 mh-300px overflow-scroll"
                                        id="kt_ecommerce_edit_order_selected_products">
                                        <!--begin::Empty message-->
                                        <span class="w-100 text-muted fs-4">Seleccione uno o más equipos de la lista a
                                            continuación marcando la casilla de verificación.</span>
                                        <!--end::Empty message-->
                                        <div id="productos_seleccionados">
                                            <div class="seccionProductos"></div>
                                        </div>

                                    </div>
                                    <!--begin::Selected products-->
                                </div>

                                <!--begin::Search products-->
                                <div class="d-flex align-items-center position-relative mb-n7 ">
                                    <i class="fas fa-search fs-3 position-absolute ms-4"><span class="path1"></span><span
                                            class="path2"></span></i> <input type="text"
                                        data-kt-ecommerce-edit-order-filter="search"
                                        class="form-control form-control-solid w-100 w-lg-50 ps-12"
                                        placeholder="Buscar">
                                </div>
                            </div>

                            <div class="table-responsive m-4">
                                <table class="table  align-middle" id="tabla_productos">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th scope="col" class="text-center">Seleccionar</th>
                                            <th scope="col">Referencia</th>
                                            <th scope="col">Equipo</th>
                                            <th scope="col">Serie</th>
                                            <th scope="col">Tipo</th>
                                            <th scope="col" class="text-center">Cantidad</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($productos as $producto)
                                            <tr>
                                                <td class="text-center">
                                                    <div class="">
                                                        <input class="form-check-input" type="checkbox" name="productos[]" value="{{ $producto->id }}">
                                                    </div>
                                                </td>
                                                <td class="text-center pe-5">
                                                    <span class="fw-bold">{{ $producto->referencia }}</span>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center" data-producto data-producto-id="{{ $producto->id }}">
                                                        <a href="#" class="symbol symbol-50px me-3">
                                                            <span class="symbol-label" style="background-image:url('{{ asset($producto->foto) }}'); background-size: cover; background-position: center;"></span>
                                                        </a>
                                                        <div>
                                                            <a href="#" class="text-gray-800 text-hover-primary fs-6 fw-bold">{{ $producto->nombre }}</a>
                                                            <div class="text-muted fs-7">SKU: {{ $producto->id }}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-center pe-5">
                                                    <span class="fw-bold">{{ $producto->serie }}</span>
                                                </td>
                                                <td class="text-center pe-5">
                                                    <span class="fw-bold">{{ $producto->tipo }}</span>
                                                </td>
                                                <td class="text-center pe-5">
                                                    <span class="fw-bold">{{ $producto->inventario }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>  
                            </div>
                            
    
                                <div class="d-flex justify-content-end mb-6 me-7">
                                         <a href="/star-html-pro/apps/ecommerce/catalog/products.html"
                                        id="kt_ecommerce_edit_order_cancel" class="btn btn-cancelar me-5">
                                        Cancelar
                                         </a>

                                            <button type="submit" id="kt_ecommerce_edit_order_submit" class="btn btn-iniciar">
                                        <span class="indicator-label">
                                            Guardar
                                        </span>
                                        <span class="indicator-progress">
                                            Cargando... <span
                                                class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                        </button>
                                 </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script src="{{ mix('/js/ventas/crear.js') }}"></script>
@endsection