@extends('layouts.index', ['titulo' => 'Biomédicos', 'nombre_titulo' => 'Biomédicos'])

@section('breadcrumb')
    <li class="breadcrumb-item">
        <i class="fas fa-angle-right fs-4 ms-2 mt-1"></i>
    </li>
    <li class="breadcrumb-item text-gray-700"> Crear </li>
@endsection

@section('btns')
    <a type="button" href="{{route('biomedicos.index')}}" 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" 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="h-100">
                    <div class=" pt-3" id="kt_chat_contacts_header">
                    </div class="w-100">
                    <div class="card-body pt-5" id="kt_chat_contacts_body">
                        <form id="formCrearBiomedico" class="form d-flex flex-column flex-lg-row fv-plugins-bootstrap5 fv-plugins-framework">
                            <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">
                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Biomedico</h2>
                                        </div>
                                    </div>
                                    <div class="card-body text-center pt-0">
                                        <div class="image-input image-input-outline" data-kt-image-input="true"
                                            style="background-image: url({{ asset('assets/media/avatars/150-2.jpg') }})">
                                            <div class="image-input-wrapper w-125px h-125px"
                                                style="background-image: url({{ asset('assets/media/avatars/150-2.jpg') }})">
                                            </div>

                                            <label
                                                class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                data-kt-image-input-action="change" data-bs-toggle="tooltip" data-bs-dismiss="click"
                                                title="Cargar Foto">
                                                <i class="las la-pencil-alt fs-3">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                <input type="file" name="avatar" id="avatarUsuario"
                                                    accept="image/png, image/jpeg, image/jpg" />
                                                <input type="hidden" name="avatar_remove" />
                                            </label>

                                            <span
                                                class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                data-kt-image-input-action="cancel" data-bs-toggle="tooltip" data-bs-dismiss="click"
                                                title="Cancel avatar">
                                                <i class="las la-times fs-3"></i>
                                            </span>

                                            <span
                                                class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                                data-kt-image-input-action="remove" data-bs-toggle="tooltip" data-bs-dismiss="click"
                                                title="Remove avatar">
                                                <i class="las la-times fs-3"></i>
                                            </span>
                                        </div>

                                        <div class="text-muted fs-7">Configure la imagen en miniatura del producto. Sólo
                                            se aceptan archivos de imagen *.png, *.jpg y *.jpeg</div>
                                    </div>
                                </div>

                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Estado</h2>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="rounded-circle bg-success w-15px h-15px" id="kt_ecommerce_add_product_status"></div>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <select class="form-select mb-2" data-control="select2" id="selectEstado"
                                            data-hide-search="true" data-placeholder="Seleccione un estado" name="estado">
                                            <option></option>
                                            <option value="1" selected>Publicado</option>
                                            <option value="2">Privado</option>
                                            <option value="0">Eliminado</option>
                                        </select>
                                        <div class="text-muted fs-7">Establecer el estado del producto.</div>
                                    </div>
                                </div>

                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Ventas Semanales</h2>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <span class="text-muted">No hay datos disponibles. Los datos de ventas comenzarán a
                                            capturarse una vez que se haya publicado el producto.</span>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                                <div class="d-flex flex-column gap-7 gap-lg-10">
                                    <div class="card card-flush py-4">
                                        <div class="card-header">
                                            <div class="card-title">
                                                <h2>Información General</h2>
                                            </div>
                                        </div>
                                        <div class="card-body pt-0">
                                            <div id="errores">
                                                @component('sistema/div-errores')
                                                @endcomponent
                                            </div>
                        
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Número de Registro -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Número de Registro</label>
                                                        <input type="text" name="num_registro" class="form-control mb-2" placeholder="Número de Registro" required>
                                                        <div class="text-muted fs-7">Se requiere un número de registro y recomendado para ser único.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Referencia -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Referencia</label>
                                                        <input type="text" name="referencia" class="form-control mb-2" placeholder="Referencia" required>
                                                        <div class="text-muted fs-7">Se requiere la referencia del equipo.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Equipo -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Equipo</label>
                                                        <input type="text" name="equipo" class="form-control mb-2" placeholder="Equipo" required>
                                                        <div class="text-muted fs-7">Se requiere el nombre del equipo.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Marca -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Marca</label>
                                                        <input type="text" name="marca" class="form-control mb-2" placeholder="Marca" required>
                                                        <div class="text-muted fs-7">Se requiere la marca del equipo.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Tipo -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Tipo</label>
                                                        <input type="text" name="tipo" class="form-control mb-2" placeholder="Tipo de Equipo" required>
                                                        <div class="text-muted fs-7">Se requiere el tipo del equipo.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Modelo -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Modelo</label>
                                                        <input type="text" name="modelo" class="form-control mb-2" placeholder="Modelo" required>
                                                        <div class="text-muted fs-7">Se requiere modelo del equipo.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Serie -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Serie</label>
                                                        <input type="text" name="serie" class="form-control mb-2" placeholder="Serie" required>
                                                        <div class="text-muted fs-7">Se requiere la serie del equipo.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Inventario -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Inventario</label>
                                                        <input type="text" name="inventario" class="form-control mb-2" placeholder="Inventario" required>
                                                        <div class="text-muted fs-7">Se requiere la cantidad en el inventario.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Distribuidor -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Distribuidor</label>
                                                        <select name="distribuidor" class="form-control mb-2" id="selectDistribuidor" data-placeholder="Seleccione un Distribuidor" data-control="select2" required>
                                                            <option></option>
                                                            @foreach ($clientes as $item)
                                                                <option value="{{$item->id}}">{{$item->nombre_completo}}</option>
                                                            @endforeach
                                                        </select>
                                                        {{-- <input type="text" name="distribuidor" class="form-control mb-2" placeholder="Distribuidor" required> --}}
                                                        <div class="text-muted fs-7">Se requiere el distribuidor del equipo.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Ciudad -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="form-label fs-4">Ciudad</label>
                                                        <select name="ciudad" class="form-control mb-2" id="selectCiudad" data-placeholder="Seleccione un Ciudad" data-control="select2" required>
                                                            <option></option>
                                                            @foreach ($ciudades as $item)
                                                                <option value="{{$item->id}}">{{$item->nombre}}</option>
                                                            @endforeach
                                                        </select>
                                                        {{-- <input type="text" name="ciudad" class="form-control mb-2" placeholder="Ciudad"> --}}
                                                        <div class="text-muted fs-7">Se requiere la ciudad del cliente.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Cliente -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="form-label fs-4">Cliente</label>
                                                        <select name="cliente" class="form-control mb-2" id="selectCliente" data-placeholder="Seleccione un Cliente" data-control="select2" required>
                                                            <option></option>
                                                            @foreach ($clientes as $item)
                                                                <option value="{{$item->id}}">{{$item->nombre_completo}}</option>
                                                            @endforeach
                                                        </select>
                                                        {{-- <input type="text" name="cliente" class="form-control mb-2" placeholder="Cliente"> --}}
                                                        <div class="text-muted fs-7">Se requiere el cliente del equipo.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Observaciones -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="form-label fs-4">Observaciones</label>
                                                        <textarea name="observaciones" class="form-control mb-2" placeholder="Observaciones"></textarea>
                                                        <div class="text-muted fs-7">Las observaciones son opcionales.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Fecha de Adquisición -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Fecha de Adquisición</label>
                                                        <input type="date" name="fecha_adquisicion" class="form-control mb-2" placeholder="Fecha de Adquisición" required>
                                                        <div class="text-muted fs-7">Se requiere la fecha de adquisición del equipo.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Fecha de Instalación -->
                                                    <div class="mb-5 fv-row fv-plugins-icon-container">
                                                        <label class="required form-label fs-4">Fecha de Instalación</label>
                                                        <input type="date" name="fecha_instalacion" class="form-control mb-2" placeholder="Fecha de Instalación" required>
                                                        <div class="text-muted fs-7">Se requiere la fecha de instalación del equipo.</div>
                                                    </div>
                                                </div>
                                            </div>                                            
                                        </div>
                                    </div>

                                    <!--Precios-->
                                    {{-- <div class="card card-flush py-4">
                                        <!--begin::Card header-->
                                        <div class="card-header">
                                            <div class="card-title">
                                                <h2>Precios</h2>
                                            </div>
                                        </div>
                                        <!--end::Card header-->

                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Input group-->
                                            <div class="mb-10 fv-row fv-plugins-icon-container">
                                                <!--begin::Label-->
                                                <label class="required form-label">Precio base</label>
                                                <!--end::Label-->

                                                <!--begin::Input-->
                                                <input type="text" name="precio" class="form-control mb-2" placeholder="Precio">
                                                <!--end::Input-->

                                                <!--begin::Description-->
                                                <div class="text-muted fs-7">Establecer el precio del producto.</div>
                                                <!--end::Description-->
                                                <div
                                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                </div>
                                            </div>
                                            <!--end::Input group-->

                                            <!--begin::Input group-->
                                            <div class="fv-row mb-10">
                                                <!--begin::Label-->
                                                <label class="fs-6 fw-semibold mb-2">
                                                    Tipo de descuento
                                                    <span class="ms-1" data-bs-toggle="tooltip"
                                                        aria-label="Seleccione un tipo de descuento que se aplicará"
                                                        data-bs-original-title="Seleccione un tipo de descuento que se aplicará">
                                                        <i class="ki-duotone ki-information-5 text-gray-500 fs-6"><span
                                                                class="path1"></span><span class="path2"></span><span
                                                                class="path3"></span></i></span> </label>
                                                <!--End::Label-->

                                                <!--begin::Row-->
                                                <div class="row row-cols-1 row-cols-md-3 row-cols-lg-1 row-cols-xl-3 g-9"
                                                    data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                                                    <!--begin::Col-->
                                                    <div class="col">
                                                        <!--begin::Option-->
                                                        <label
                                                            class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6"
                                                            data-kt-button="true">
                                                            <!--begin::Radio-->
                                                            <span
                                                                class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                                <input class="form-check-input" type="radio" name="discount_option"
                                                                    value="1" checked="checked">
                                                            </span>
                                                            <!--end::Radio-->

                                                            <!--begin::Info-->
                                                            <span class="ms-5">
                                                                <span class="fs-4 fw-bold text-gray-800 d-block">No
                                                                    Descuento</span>
                                                            </span>
                                                            <!--end::Info-->
                                                        </label>
                                                        <!--end::Option-->
                                                    </div>
                                                    <!--end::Col-->

                                                    <!--begin::Col-->
                                                    <div class="col">
                                                        <!--begin::Option-->
                                                        <label
                                                            class="btn btn-outline btn-outline-dashed btn-active-light-primary  d-flex text-start p-6"
                                                            data-kt-button="true">
                                                            <!--begin::Radio-->
                                                            <span
                                                                class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                                <input class="form-check-input" type="radio" name="discount_option"
                                                                    value="2">
                                                            </span>
                                                            <!--end::Radio-->

                                                            <!--begin::Info-->
                                                            <span class="ms-5">
                                                                <span class="fs-4 fw-bold text-gray-800 d-block">Porcentaje %</span>
                                                            </span>
                                                            <!--end::Info-->
                                                        </label>
                                                        <!--end::Option-->
                                                    </div>
                                                    <!--end::Col-->

                                                    <!--begin::Col-->
                                                    <div class="col">
                                                        <!--begin::Option-->
                                                        <label
                                                            class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6"
                                                            data-kt-button="true">
                                                            <!--begin::Radio-->
                                                            <span
                                                                class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                                <input class="form-check-input" type="radio" name="discount_option"
                                                                    value="3">
                                                            </span>
                                                            <!--end::Radio-->

                                                            <!--begin::Info-->
                                                            <span class="ms-5">
                                                                <span class="fs-4 fw-bold text-gray-800 d-block">Fijado
                                                                    Precio</span>
                                                            </span>
                                                            <!--end::Info-->
                                                        </label>
                                                        <!--end::Option-->
                                                    </div>
                                                    <!--end::Col-->
                                                </div>
                                                <!--end::Row-->
                                            </div>
                                            <!--end::Input group-->

                                            <!--begin::Input group-->
                                            <div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_percentage">
                                                <!--begin::Label-->
                                                <label class="form-label">Establecer porcentaje de descuento</label>
                                                <!--end::Label-->

                                                <!--begin::Slider-->
                                                <div class="d-flex flex-column text-center mb-5">
                                                    <div class="d-flex align-items-start justify-content-center mb-7">
                                                        <span class="fw-bold fs-3x" id="kt_ecommerce_add_product_discount_label">10</span>
                                                        <span class="fw-bold fs-4 mt-1 ms-2">%</span>
                                                    </div>
                                                    <div id="kt_ecommerce_add_product_discount_slider" class="noUi-sm noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
                                                    </div>
                                                </div>
                                                <!--end::Slider-->

                                                <!--begin::Description-->
                                                <div class="text-muted fs-7">Establecer un porcentaje de descuento aplicado a este producto.</div>
                                                <!--end::Description-->
                                            </div>
                                            <!--end::Input group-->

                                            <!--begin::Input group-->
                                            <div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_fixed">
                                                <!--begin::Label-->
                                                <label class="form-label">Precio fijo con descuento</label>
                                                <!--end::Label-->

                                                <!--begin::Input-->
                                                <input type="text" name="precio_fijo" class="form-control mb-2"
                                                    placeholder="Precio Fijo">
                                                <!--end::Input-->

                                                <!--begin::Description-->
                                                <div class="text-muted fs-7">Establecer el precio del producto con descuento.
                                                    El producto se reducirá al precio fijo determinado.</div>
                                                <!--end::Description-->
                                            </div>
                                            <!--end::Input group-->

                                            <!--begin::Tax-->
                                            <div class="d-flex flex-wrap gap-5">
                                                <!--begin::Input group-->
                                                <div class="fv-row w-100 flex-md-root fv-plugins-icon-container">
                                                    <!--begin::Label-->
                                                    <label class="required form-label">Clase de impuesto</label>
                                                    <!--end::Label-->

                                                    <!--begin::Select2-->
                                                    <select class="form-select mb-2" data-control="select2" required name="tipo_impuesto"
                                                        data-hide-search="true" data-placeholder="Selecione el tipo de impuesto">
                                                        <option></option>
                                                        <option value="0">Libre de impuestos</option>
                                                        <option value="1">Bienen sujetos a impuestos</option>
                                                        <option value="2">Producto descargable</option>
                                                    </select>
                                                    <!--end::Select2-->

                                                    <!--begin::Description-->
                                                    <div class="text-muted fs-7">Establezca la clase de impuesto del producto.
                                                    </div>
                                                    <!--end::Description-->
                                                    <div
                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                    </div>
                                                </div>
                                                <!--end::Input group-->

                                                <!--begin::Input group-->
                                                <div class="fv-row w-100 flex-md-root">
                                                    <!--begin::Label-->
                                                    <label class="form-label">Importe del IVA (%)</label>
                                                    <!--end::Label-->

                                                    <!--begin::Input-->
                                                    <input type="text" required class="form-control mb-2" name="iva">
                                                    <!--end::Input-->

                                                    <!--begin::Description-->
                                                    <div class="text-muted fs-7">Establecer el IVA del producto.
                                                    </div>
                                                    <!--end::Description-->
                                                </div>
                                                <!--end::Input group-->
                                            </div>
                                            <!--end:Tax-->
                                        </div>
                                        <!--end::Card header-->
                                    </div> --}}
                                </div>
                                <div class="d-flex justify-content-end">
                                    <a href="{{route('biomedicos.index')}}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">Cancelar</a>
                                    <button type="submit" id="kt_ecommerce_add_product_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>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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