@extends('adminlte::page')

@section('title', $title ?? '')

@section('content_header')
    <h1>{{ $title ?? ''}}</h1>
@stop

@section('content')
<div class="row">
    <div class="col-xl-12">
        <form action="{{route('sales.frames.store')}}" id="formSale" method="POST">
            @csrf
            <input type="hidden" name="exchangeRate" value="{{$exchangeRate}}">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-xl-2 col-lg-2">Datos del Cliente</div>
                        <div class="col-xl-6 col-lg-6 text-center"><span class="font-weight-bold badge badge-success" id="title_customer">NUEVO CLIENTE</span></div>
                        <div class="col-xl-2 col-lg-2 text-right"><div>Fecha de Boleta:</div></div>
                        <div class="col-xl-2 col-lg-2"><input type="date" name="date_sale" value="{{$date}}" class="form-control" readonly required></div>
                    </div>
                </div>
                <div class="card-body" id="divCustomer">
                    <fieldset>
                        <div></div>
                        <div class="row">
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Carnet de Identidad</span>
                                <input type="search" name="cicustomer" class="form-control" autofocus>
                                <small class="d-block mt-n1 text-muted">Presione Enter para buscar al paciente</small>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Apellido Paterno</span>
                                <input type="search" name="lastnamecustomer" class="form-control">

                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Apellido Materno</span>
                                <input type="search" name="motherlastnamecustomer" class="form-control">
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Nombres</span>
                                <input type="search" name="namescustomer" class="form-control">
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Celular</span>
                                <input type="search" name="cellphonecustomer" class="form-control">
                                <small class="d-block mt-n1 text-muted">Ej: 732123456, Si no cuenta, déjelo vacio</small>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Teléfono Fijo</span>
                                <input type="search" name="phonecustomer" class="form-control">
                                <small class="d-block mt-n1 text-muted">Si no cuenta, déjelo vacio</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-2 col-lg-2">
                                <input type="hidden" name="id_customer">
                                <input type="hidden" name="id_person">
                                <input type="button" class="btn btn-primary btn-sm form-control mb-2" value="Búsqueda Avanzada" id="btnSearchDetail">
                                <input type="button" class="btn btn-secondary btn-sm form-control mb-2" value="Nuevo Cliente" id="btnNewCustomer">
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <div class="d-block mt-n1 text-muted pl-5" style="">
                                    <small>Clasificación</small>
                                    <div style="position: relative">
                                        <input type="radio" value="R" name="clasification" id="clasificationR" required>
                                        <input type="radio" value="A" name="clasification" id="clasificationY" required>
                                        <input type="radio" value="V" name="clasification" id="clasificationG" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Teléfonos Adicionales</span>
                                <input type="text" name="additional_phonescustomer" class="form-control">
                                <small class="d-block mt-n1 text-muted"></small>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Observación</span>
                                <input type="text" name="observationcustomer" class="form-control">
                                <small class="d-block mt-n1 text-muted"></small>
                            </div>

                            <div class="col-xl-4 col-lg-4">
                                <span class="label-sale-frame">Correo Electrónico</span>
                                <input type="email" name="emailcustomer" class="form-control">
                                <small class="d-block mt-n1 text-muted"></small>
                            </div>
                        </div>
                        <div class="row" id="dataSaleRow">
                            <div class="col-xl-4 col-lg-4">

                            </div>
                            <div class="col-xl-2 col-lg-2">
                               <small>Datos de Ventas Anteriores:</small>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <small>Cantidad de Ventas: </small><span id="totalCountSales" class="badge badge-secondary"></span>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <small>Fecha de Última Venta: </small> <span id="dateLastSale" class="badge badge-secondary"></span>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <small>Sucursal de la última venta: </small> <span id="branchLastSale" class="badge badge-secondary"></span>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>

            <div class="card">
                <div class="card-header">Datos del Doctor</div>
                <div class="card-body">
                    <fieldset>
                        <div></div>
                        <div class="row">
                            <div class="col-xl-5 col-l-5">
                                <select class="form-control selectdoctor" name="id_doctor" required>
                                    <option value="">Seleccionar</option>
                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <input type="button" class="btn btn-primary newDoctor" value="Nuevo Doctor">
                            </div>
                            <div class="col-xl-3 col-l-3">
                                <small class="d-block mt-n1 text-muted"><span class="font-weight-bold">Número de Celular:</span> <span id="doctor_cellphone"></span></small>
                                <small class="d-block mt-n1 text-muted"><span class="font-weight-bold">Número Fijo:</span> <span id="doctor_phone"></span></small>
                                <small class="d-block mt-n1 text-muted"><span class="font-weight-bold">Números de Télefonos Adicionales:</span> <span id="doctor_additional_phones"></span></small>
                            </div>
                            <div class="col-xl-2 col-l-2">
                                <small class="d-block mt-n1 text-muted"><span class="font-weight-bold">Dirección:</span> <span id="doctor_direction"></span></small>
                                <small class="d-block mt-n1 text-muted"><span class="font-weight-bold">Observaciones:</span> <span id="doctor_observation"></span></small>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>

            {{-- LEJOS --}}
            <div class="card">
                <div class="card-header">Lejos</div>
                <div class="card-body">
                    <fieldset>
                        <div></div>
                        {{-- LEJOS OJO DERECHO --}}
                        <div class="row border-bottom pb-2">
                            <div class="col-xl-1 col-l-1">
                                <div class="pt-3" style="height: 100%">
                                    O.D.
                                </div>
                            </div>
                            <div class="col-xl-11 col-lg-11">
                                <div class="row">
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Esférico</span>
                                        <input type="search" name="far_right_eye_spherical" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Cilíndrico</span>
                                        <input type="search" name="far_right_eye_cylinder" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Eje</span>
                                        <input type="search" name="far_right_eye_axis" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Prisma</span>
                                        <input type="search" name="far_right_eye_prism" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Base</span>
                                        <input type="search" name="far_right_eye_base" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">ADD</span>
                                        <input type="search" name="far_right_eye_add" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- FIN LEJOS OJO DERECHO --}}
                        {{-- LEJOS OJO IZQUIERDO --}}
                        <div class="row">
                            <div class="col-xl-1 col-l-1">
                                <div class="pt-3" style="height: 100%">
                                    O.I.
                                </div>
                            </div>
                            <div class="col-xl-11 col-lg-11">
                                <div class="row">
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Esférico</span>
                                        <input type="search" name="far_left_eye_spherical" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Cilíndrico</span>
                                        <input type="search" name="far_left_eye_cylinder" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Eje</span>
                                        <input type="search" name="far_left_eye_axis" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Prisma</span>
                                        <input type="search" name="far_left_eye_prism" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Base</span>
                                        <input type="search" name="far_left_eye_base" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">ADD</span>
                                        <input type="search" name="far_left_eye_add" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- FIN LEJOS OJO IZQUIERDO --}}
                    </fieldset>
                </div>
            </div>
            {{-- Fin Lejos --}}

            {{-- Cerca --}}
            <div class="card">
                <div class="card-header">Cerca</div>
                <div class="card-body">
                    <fieldset>
                        <div></div>
                        {{-- cerca OJO DERECHO --}}
                        <div class="row border-bottom pb-2">
                            <div class="col-xl-1 col-l-1">
                                <div class="pt-3" style="height: 100%">
                                    O.D.
                                </div>
                            </div>
                            <div class="col-xl-11 col-lg-11">
                                <div class="row">
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Esférico</span>
                                        <input type="search" name="near_right_eye_spherical" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Cilíndrico</span>
                                        <input type="search" name="near_right_eye_cylinder" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Eje</span>
                                        <input type="search" name="near_right_eye_axis" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Distancia Pupilar Lejos</span>
                                        <input type="search" name="far_pupillary_distance" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Distancia Pupilar Cerca</span>
                                        <input type="search" name="near_pupillary_distance" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- FIN cerca OJO DERECHO --}}
                        {{-- cerca OJO IZQUIERDO --}}
                        <div class="row">
                            <div class="col-xl-1 col-l-1">
                                <div class="pt-3" style="height: 100%">
                                    O.I.
                                </div>
                            </div>
                            <div class="col-xl-11 col-lg-11">
                                <div class="row">
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Esférico</span>
                                        <input type="search" name="near_left_eye_spherical" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Cilíndrico</span>
                                        <input type="search" name="near_left_eye_cylinder" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Eje</span>
                                        <input type="search" name="near_left_eye_axis" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Altura</span>
                                        <input type="search" name="height" class="form-control">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- FIN cerca OJO IZQUIERDO --}}
                    </fieldset>
                </div>
            </div>
            {{-- Fin Cerca --}}

            {{-- Lejos Cristal Armazon --}}
            <div class="card">
                <div class="card-header">Lejos</div>
                <div class="card-body">
                    <fieldset>
                        <div></div>
                        {{-- Cristal de Lejos --}}
                        <div class="row border-bottom pb-2">

                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Tipo de Cristal</span>
                                <select class="form-control select2" name="id_crystal_type_far">
                                    <option value="">Seleccionar</option>
                                    @foreach ($crystalTypes as $crystalType)
                                        <option value="{{$crystalType->id_crystal_type}}">{{$crystalType->name}}</option>
                                    @endforeach
                                </select>
                                <small class="d-block mt-n1 text-muted"></small>
                            </div>
                            <div class="col-xl-10 col-lg-10">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Subtipo de Cristal</span>
                                        <select class="form-control select3" name="id_crystal_sub_type_far">
                                            <option value="">Seleccionar</option>
                                            @foreach ($crystalSubtypes as $crystalSubtype)
                                                <option value="{{$crystalSubtype->id_crystal_subtype}}" data-type="{{$crystalSubtype->id_crystal_type}}" class="optInvisible">{{$crystalSubtype->name}}</option>
                                            @endforeach
                                        </select>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Detalle</span>
                                        <input type="search" name="far_crystal_details" class="form-control" placeholder="Detalle">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle que NO se Imprimirá</span>
                                        <input type="search" name="far_crystal_details_no_print" class="form-control detail_no_print" placeholder="Detalle que NO se Imprimirá">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio $us</span>
                                        <input type="number" name="far_crystal_price_sus" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="far_crystal_price_sus_help"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio Bs</span>
                                        <input type="number" name="far_crystal_price_bs" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="far_crystal_price_bs_help"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- FIN Cristal de Lejos --}}
                        {{-- Montura Lejos --}}
                        <div class="row" id="div_container_far">
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Montura</span>
                                <div style="position: relative">
                                    <input type="text" name="frame_far_qrcode" class="form-control" placeholder="Código de Barra">
                                    <input type="button" value="X" class="btn btn-secondary btn-sm btnCleanFrame" style="position: absolute;top:3px;right:3px" data-type="far" title="Eliminar">
                                </div>
                                <input type="hidden" name="id_inventory_frame_far" value="">
                                <small class="d-block mt-n1 text-muted"></small>
                                <div class="text-center mt-2">

                                    <div id="carouselControlsFar" class="carousel slide" data-ride="carousel" data-interval="2000" style="height: 150px">
                                        <div class="carousel-inner-far">

                                        </div>
                                        <a class="carousel-control-prev" href="#carouselControlsFar" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselControlsFar" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- DIV 10 --}}
                            <div class="col-xl-10 col-lg-10">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Marca</span>
                                        <input type="search" name="frame_far_brand" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Código</span>
                                        <input type="search" name="frame_far_code" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle</span>
                                        <input type="search" name="frame_far_detail" class="form-control" placeholder="Detalle">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio $us</span>
                                        <input type="number" name="frame_far_price_sus" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="frame_far_price_sus_help"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio Bs</span>
                                        <input type="number" name="frame_far_price_bs" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="frame_far_price_bs_help"></small>
                                    </div>

                                </div>

                                {{-- Montura Extra Lejos --}}
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Tipo de Montura</span>
                                        <input type="search" name="type_frame_far" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio Sugerido</span>
                                        <input type="search" name="frame_far_price_suggested" class="form-control text-right" readonly>
                                        <small class="d-block mt-n1 text-muted" id="frame_far_price_suggested_help"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle que NO se Imprimirá</span>
                                        <input type="search" name="frame_far_detail_no_print" class="form-control detail_no_print" placeholder="Detalle que NO se Imprimirá">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                </div>
                                {{-- FIN Montura Extra Lejos --}}

                                {{-- Montura Extra Lejos --}}
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Medidas</span>
                                        <input type="search" name="frame_far_size" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Color</span>
                                        <input type="search" name="frame_far_color" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle de la Montura</span>
                                        <textarea name="frame_far_detail_intern" class="form-control" placeholder="Detalle de la Montura" readonly rows="1"></textarea>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                </div>
                                {{-- FIN Montura Extra Lejos --}}

                            </div>
                            {{-- FIN 10 --}}
                        </div>
                        {{-- FIN Montura Lejos --}}

                    </fieldset>
                </div>
            </div>
            {{-- Fin Lejos --}}

            {{-- Cerca Cristal Armazon --}}
            <div class="card">
                <div class="card-header">Cerca</div>
                <div class="card-body">
                    <fieldset>
                        <div></div>
                        {{-- Cristal de Cerca --}}
                        <div class="row border-bottom pb-2">

                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Tipo de Cristal</span>
                                <select class="form-control select2" name="id_crystal_type_near">
                                    <option value="">Seleccionar</option>
                                    @foreach ($crystalTypes as $crystalType)
                                        <option value="{{$crystalType->id_crystal_type}}">{{$crystalType->name}}</option>
                                    @endforeach
                                </select>
                                <small class="d-block mt-n1 text-muted"></small>
                            </div>
                            <div class="col-xl-10 col-lg-10">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Subtipo de Cristal</span>
                                        <select class="form-control select3" name="id_crystal_sub_type_near">
                                            <option value="">Seleccionar</option>
                                            @foreach ($crystalSubtypes as $crystalSubtype)
                                                <option value="{{$crystalSubtype->id_crystal_subtype}}" data-type="{{$crystalSubtype->id_crystal_type}}" class="optInvisible">{{$crystalSubtype->name}}</option>
                                            @endforeach
                                        </select>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Detalle</span>
                                        <input type="search" name="near_crystal_details" class="form-control" placeholder="Detalle">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle que NO se Imprimirá</span>
                                        <input type="search" name="near_crystal_details_no_print" class="form-control detail_no_print " placeholder="Detalle que NO se Imprimirá">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio $us</span>
                                        <input type="number" name="near_crystal_price_sus" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="near_crystal_price_sus_help"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio Bs</span>
                                        <input type="number" name="near_crystal_price_bs" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="near_crystal_price_bs_help"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- FIN Cristal de Cerca --}}
                        {{-- Montura Cerca --}}
                        <div class="row" id="div_container_near">
                            <div class="col-xl-2 col-lg-2">
                                <span class="label-sale-frame">Montura</span>
                                <div style="position: relative;">
                                    <input type="text" name="frame_near_qrcode" class="form-control" placeholder="Código de Barra">
                                    <input type="button" value="X" class="btn btn-secondary btn-sm btnCleanFrame" style="position: absolute;top:3px;right:3px" data-type="near" title="Eliminar">
                                </div>

                                <input type="hidden" name="id_inventory_frame_near" value="">
                                <small class="d-block mt-n1 text-muted"></small>
                                <div class="text-center mt-2">
                                    <div id="carouselControlsNear" class="carousel slide" data-ride="carousel" data-interval="2000" style="height: 150px">
                                        <div class="carousel-inner-near">

                                        </div>
                                        <a class="carousel-control-prev" href="#carouselControlsNear" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselControlsNear" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- DIV 10 --}}
                            <div class="col-xl-10 col-lg-10">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Marca</span>
                                        <input type="search" name="frame_near_brand" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Código</span>
                                        <input type="search" name="frame_near_code" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle</span>
                                        <input type="search" name="frame_near_detail" class="form-control" placeholder="Detalle">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio $us</span>
                                        <input type="number" name="frame_near_price_sus" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="frame_near_price_sus_help"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio Bs</span>
                                        <input type="number" name="frame_near_price_bs" class="form-control text-right" min="0" step="0.01" value="0">
                                        <small class="d-block mt-n1 text-muted" id="frame_near_price_bs_help"></small>
                                    </div>
                                </div>

                                {{-- Montura Extra Cerca --}}
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Tipo de Montura</span>
                                        <input type="search" name="type_frame_near" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Precio Sugerido</span>
                                        <input type="search" name="frame_near_price_suggested" class="form-control text-right" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle que NO se Imprimirá</span>
                                        <input type="search" name="frame_near_detail_no_print" class="form-control detail_no_print " placeholder="Detalle que NO se Imprimirá">
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                </div>
                                {{-- FIN Montura Extra Cerca --}}

                                {{-- Montura Extra Cerca --}}
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Medidas</span>
                                        <input type="search" name="frame_near_size" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <span class="label-sale-frame">Color</span>
                                        <input type="search" name="frame_near_color" class="form-control" readonly>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>
                                    <div class="col-xl-3 col-lg-3">
                                        <span class="label-sale-frame">Detalle de la Montura</span>
                                        <textarea name="frame_near_detail_intern" class="form-control" placeholder="Detalle de la Montura" readonly rows="1"></textarea>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">

                                    </div>
                                </div>
                                {{-- FIN Montura Extra Cerca --}}

                            </div>
                            {{-- FIN 10 --}}
                        </div>
                        {{-- FIN Montura Cerca --}}

                    </fieldset>
                </div>
            </div>
            {{-- Fin Cerca --}}


            {{-- Detalles Finales--}}
            <div class="card">
                <div class="card-header">Detalles Finales
                    {{-- Right --}}
                    <div class="card-tools float-right">
                       <div class="alert alert-secondary text-center h5 p-1 mb-0">TC: <span id="exchangeRate">{{$exchangeRate}}</span></div>
                    </div>
                </div>
                <div class="card-body">
                    <fieldset>
                        <div></div>
                        {{-- Campos detalles --}}
                        <div class="row  pb-2">

                            <div class="col-xl-2 col-l-2">
                                <span class="label-sale-frame">Observaciones</span>
                                <textarea name="observations" class="form-control" rows="3"></textarea>
                                <small class="d-block mt-n1 text-muted"></small>
                            </div>
                            <div class="col-xl-10 col-l-10">
                                <div class="row">
                                    <div class="col-xl-3 col-l-3">
                                        <span class="label-sale-frame">Observaciones que no se imprimirá</span>
                                        <textarea name="observations_no_print" class="form-control detail_no_print" rows="3" placeholder="Observaciones que no se imprimirá"></textarea>
                                        <small class="d-block mt-n1 text-muted"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2">
                                        <div>
                                            <span class="label-sale-frame">Fecha de Entrega</span>
                                            <input type="date" name="date_delivery" class="form-control" value="{{$date_delivery}}" required min="{{$date}}">
                                            <small class="d-block mt-n1 text-muted"></small>
                                        </div>
                                        <div>
                                            <span class="label-sale-frame">Hora de Entrega</span>
                                            <input type="time" name="time_delivery" class="form-control" value="{{$time_delivery}}" required>
                                            <small class="d-block mt-n1 text-muted"></small>
                                        </div>
                                        <div>
                                            <span class="label-sale-frame">Sucursal de Entrega</span>
                                            <select name="id_branch_delivery" class="form-control select2" required>
                                                @foreach ($branches as $branch)
                                                    <option value="{{$branch->id_branch}}" {{session('id_branch')==$branch->id_branch?'selected':''}}>{{$branch->name}}</option>
                                                @endforeach
                                            </select>
                                            <small class="d-block mt-n1 text-muted"></small>
                                        </div>
                                    </div>

                                    <div class="col-xl-1 col-lg-1">
                                        <div class="">

                                        </div>
                                    </div>
                                    <div class="col-xl-2 col-lg-2">
                                        <div class="mt-2"></div>
                                        <span class="label-sale-frame">Tipo de Pago</span><br>
                                        <div class="payment_type ml-3">
                                            <input type="radio" name="payment_type" class="" value="cash" required id="cash">
                                            <label for="cash" class="mb-0"><i class="fas fa-money-bill-wave"></i> Efectivo</label>
                                        </div>
                                        <div class="payment_type ml-3">
                                            <input type="radio" name="payment_type" class="" value="card" required id="card">
                                            <label for="card" class="mb-0"><i class="fas fa-credit-card"></i> Tarjeta</label>
                                        </div>
                                        <div class="payment_type ml-3">
                                            <input type="radio" name="payment_type" class="" value="qr" required id="qr">
                                            <label for="qr" class="mb-0"><i class="fas fa-qrcode"></i> Pago QR</label>
                                        </div>
                                        <div class="payment_type ml-3">
                                            <input type="radio" name="payment_type" class="" value="deposit" required id="deposit">
                                            <label for="deposit" class="mb-0"><i class="fas fa-university"></i> Deposito</label>
                                        </div>
                                        <small class="d-block mt-n1 text-muted"></small>
                                        <div class="mt-2">Entrega Rápida</div>
                                        <div class="with_invoice ml-3">
                                            <input type="radio" name="with_invoice" class="" value="yes" id="with_invoice" checked>
                                            <label for="with_invoice" class="mb-0"> Si </label>
                                        </div>
                                        <div class="with_invoice ml-3">
                                            <input type="radio" name="with_invoice" class="" value="no"  id="without_invoice">
                                            <label for="without_invoice" class="mb-0"> No</label>
                                        </div>

                                    </div>

                                    <div class="col-xl-2 col-lg-2" style="">
                                        <span class="label-sale-frame">Total $us</span>
                                        <input type="number" name="total_sus" class="form-control text-right h1 notcero" readonly value="0" required>
                                        <small class="d-block mt-n1 text-muted" id="total_sus_help"></small>

                                        <span class="label-sale-frame">Descuento $us</span>
                                        <input type="number" name="discount_sus" class="form-control text-right" value="0" min="0" step="0.01" required>
                                        <small class="d-block mt-n1 text-muted" id="discount_sus_help"></small>

                                        <span class="label-sale-frame">A cuenta $us</span>
                                        <input type="number" name="down_payment_sus" class="form-control text-right" value="0" min="0" step="0.01" required>
                                        <small class="d-block mt-n1 text-muted" id="down_payment_sus_help"></small>

                                        <span class="label-sale-frame">Saldo $us</span>
                                        <input type="number" name="balance_sus" class="form-control text-right" value="0" min="0" step="0.01" required readonly>
                                        <small class="d-block mt-n1 text-muted" id="balance_sus_help"></small>
                                    </div>

                                    <div class="col-xl-2 col-lg-2" style="">
                                        <span class="label-sale-frame">Total Bs</span>
                                        <input type="number" name="total_bs" class="form-control text-right h1 notcero" readonly value="0" required>
                                        <small class="d-block mt-n1 text-muted" id="total_bs_help"></small>

                                        <span class="label-sale-frame">Descuento Bs</span>
                                        <input type="number" name="discount_bs" class="form-control text-right" value="0" min="0" step="0.01" required>
                                        <small class="d-block mt-n1 text-muted" id="discount_bs_help"></small>

                                        <span class="label-sale-frame">A cuenta Bs</span>
                                        <input type="number" name="down_payment_bs" class="form-control text-right" value="0" min="0" step="0.01" required>
                                        <small class="d-block mt-n1 text-muted" id="down_payment_bs_help"></small>

                                        <span class="label-sale-frame">Saldo Bs</span>
                                        <input type="number" name="balance_bs" class="form-control text-right" value="0" min="0" step="0.01" required readonly>
                                        <small class="d-block mt-n1 text-muted" id="balance_bs_help"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 text-center">
                                <input type="button" class="btn btn-success" value="Confirmar Orden de Trabajo" id="btnConfirmFormSale">
                            </div>
                        </div>

                        {{-- FIN Campos detalles --}}
                    </fieldset>
                </div>
            </div>
            {{-- Fin Observaciones --}}



        </form>
    </div>
    {{-- FIN Formulario --}}
</div>

<div class="modal fade" id="newDoctorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Nuevo Doctor</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="{{route('doctors.store')}}" method="POST" id="formNewDoctor">
              @csrf
            <div class="row">
                <div class="col-xl-3 col-lg-3">
                    <span class="label-sale-frame">Nombres:</span>
                    <input type="text" class="form-control" name="doctor_names" required>
                </div>
                <div class="col-xl-3 col-lg-3">
                    <span class="label-sale-frame">Apellido Paterno:</span>
                    <input type="text" class="form-control" name="doctor_last_name" required>
                </div>
                <div class="col-xl-3 col-lg-3">
                    <span class="label-sale-frame">Apellido Materno:</span>
                    <input type="text" class="form-control" name="doctor_mother_last_name">
                </div>
                <div class="col-xl-3 col-lg-3">
                    <span class="label-sale-frame">Carnet de Identidad:</span>
                    <input type="text" class="form-control" name="doctor_identity_document">
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6 col-lg-6">
                    <span class="label-sale-frame">Número de Celular:</span>
                    <input type="text" class="form-control" name="doctor_cellphone">
                    <small class="d-block mt-n1 text-muted">Número de Celular Principal Ej: 732123456  (Preferencia Número de Celular)</small>
                </div>
                <div class="col-xl-3 col-lg-3">
                    <span class="label-sale-frame">Número Fijo:</span>
                    <input type="text" class="form-control" name="doctor_phone">
                </div>
                <div class="col-xl-3 col-lg-3">
                    <span class="label-sale-frame">Números de Télefonos Adicionales:</span>
                    <input type="text" class="form-control" name="doctor_additional_phones">
                </div>
            </div>
            <div class="row">
                <div class="col-xl-5 col-lg-5">
                    <span class="label-sale-frame">Dirección:</span>
                    <textarea class="form-control" name="doctor_direction"></textarea>
                </div>
                <div class="col-xl-5 col-lg-5">
                    <span class="label-sale-frame">Observaciones:</span>
                    <textarea class="form-control" name="doctor_observation"></textarea>
                </div>
                <div class="col-xl-2 col-lg-2">
                    <span class="label-sale-frame">Porcentaje:</span>
                    <input type="number" class="form-control text-right" name="doctor_percentage" value="0" min="0" step="0.01" required>
                </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary" id="btnSaveNewDoctor">Guardar</button>
        </div>
      </div>
    </div>
</div>

<div class="modal fade" id="searchCustomerModal" tabindex="-1"  aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" >Buscar Cliente</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="{{route('customers.searchcustomer')}}" method="GET" id="formsearchcustomer">
              @csrf
            <div class="row">
                <div class="col-xl-2 col-lg-2">
                    <span class="label-sale-frame">Carnet de Identidad:</span>
                    <input type="text" class="form-control" name="customer_search_identity_document">
                </div>
                <div class="col-xl-2 col-lg-2">
                    <span class="label-sale-frame">Nombres:</span>
                    <input type="text" class="form-control" name="customer_search_names" >
                </div>
                <div class="col-xl-2 col-lg-2">
                    <span class="label-sale-frame">Apellido Paterno:</span>
                    <input type="text" class="form-control" name="customer_search_last_name" >
                </div>
                <div class="col-xl-2 col-lg-2">
                    <span class="label-sale-frame">Apellido Materno:</span>
                    <input type="text" class="form-control" name="customer_search_mother_last_name">
                </div>
                <div class="col-xl-2 col-lg-2">
                    <span class="label-sale-frame">Número de Teléfonos</span>
                    <input type="text" class="form-control" name="customer_search_phones">
                </div>
                <div class="col-xl-2 col-lg-2">
                    <br>
                    <input type="submit" class="btn btn-primary" value="Buscar Cliente">
                </div>
            </div>
            <div class="row">
                <hr>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12" id="responseSearchCustomers">

                </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
</div>
@stop

@section('css')
<style type="text/css">
.payment_type label{
    font-weight: normal !important;
    cursor: pointer;
}
/** */

[name=clasification]{
    width: 0px;
    height: 0px;

}
[name=clasification]::after{
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #335a99;
}

[name=clasification]:checked::after{
    border:4px solid #335a99;
    border:2px solid #fff;
    outline: 2px solid #335a99;
}

#clasificationR::after{
    left: 0px !important;
    background-color: rgb(216, 73, 73);
}
#clasificationY::after{
    left: 25px !important;
    background-color: rgb(211, 180, 3);
}
#clasificationG::after{
    left: 50px !important;
    background-color: rgb(0, 139, 86);
}
.notcero{
    background-color: #d4edda !important;
}
</style>
@stop

@section('js')
<script>
    let urlSearchFrame = "{{route('inventory.frames.searchframe')}}";
    let urlDoctors = "{{route('doctors.all')}}";
    let urlSearchCustomer = "{{route('customers.searchcustomerbyid')}}";
</script>
<script src="{{asset("js/sales/sale.js")}}"></script>
@stop