@extends('metronic.base')
@section('title')
    Muestra pedido
@endsection
@section('content')
    <div class="container-fluid mt-5 text-center pt-1">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card" style="box-shadow: 0px 21px 10px -17px rgba(0,0,0,0.1);">
                    <div class="card-header">
                        <h3 class="card-title">
                            Pedidos de muestra
                        </h3>
                        <div class="card-toolbar">
                            <a href="{{ route('muestra.index') }}" class="btn btn-sm btn-light"><i
                                    class="ki-outline ki-black-left fs-2"></i> Atras</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="form-muestra" action="{{ route('muestra.add') }}" method="POST" id="form-host">
                            @csrf
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="ms-label">Escoge un cliente</label>
                                        <select name="cliente_id" id="cliente_id" class="ms-input js-example-basic-single">
                                            <option value="Elegir">Elegir</option>
                                            @foreach ($clientes as $cl)
                                                <option value="{{ $cl['id'] }}">{{ $cl->nombre_cliente }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="ms-label pt-1">Fecha entrega</label>
                                        <input type="date" class="ms-input" id="fecha_entrega" name="fecha_entrega" min="{{ \Carbon\Carbon::now()->format('Y-m-d') }}">
                                    </div>
                                </div>
                                
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="ms-label">Muestra</label>
                                        <input type="text" class="ms-input" id="muestra" name="muestra"
                                            placeholder="Ingresa tu muestra">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="ms-label">Linea producción</label>
                                        <select name="line_producction_id" id="line_producction_id" class="ms-input" >
                                            <option value="" disabled selected>Elegir linea</option>
                                            @foreach ($linea_produccion as $linea)
                                            <option value="{{ $linea['id'] }}">{{ $linea->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="ms-label pt-1">Prioridad</label>
                                        <input type="number" class="ms-input" name="prioridad" id="prioridad"
                                            placeholder="Ingresa tu prioridad" min="1">
                                    </div>
                                </div>
                                <div class="col-sm-6 mx-auto">
                                    <div class="form-group">
                                        <label class="ms-label pt-1">Enviar <i class="fas fa-paper-plane"></i></label>
                                        <button type="submit" class="btn btn-success w-100">
                                            <i class='ki-outline ki-check-circle fs-2'></i>
                                            Ingresar muestra
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('reportes.styles')
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>

<script>
    $(document).ready(function() {
        $("#form-muestra").on('submit', function(e) {
            e.preventDefault();
            let cliente_id = $("#cliente_id").val();
            let muestra = $("#muestra").val();
            let fecha_entrega = $("#fecha_entrega").val();
            let prioridad = $("#prioridad").val();
            let line_producction_id = $("#line_producction_id").val();

            $.ajax({
                url: '{{ route('muestra.add') }}',
                method: 'POST',
                data: {
                    cliente_id: cliente_id,
                    muestra: muestra,
                    fecha_entrega: fecha_entrega,
                    prioridad: prioridad,
                    line_producction_id: line_producction_id
                },
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val(),
                },
                success: function() {
                    Swal.fire({
                        title: "Datos insertados correctamente por pantalla",
                        icon: 'success'
                    });
                    setTimeout(() => {
                        window.location.href = '{{ route('muestra.index') }}'
                    }, 4000);
                },
                error: function(e) {
                    if (e.status === 422) {
                        let errors = e.responseJSON.errors;
                        let errorMessage = '';
                        $.each(errors, function(key, value) {
                            errorMessage += value[0] + '<br>';
                            /* verificamos si el error es de prioridad y podemos manejar la sugerencia */
                            if (value[0].includes('prioridad')) {
                                /* Extraemos el numero sugerido */
                                let sugerencia = value[0].match(/\d+/)[0];
                                Swal.fire({
                                    title: 'Errores de validación.',
                                    html: errorMessage,
                                    icon: 'error',
                                    footer: `Sugerencia: Intenta con la prioridad ${sugerencia}`,
                                });
                            } else {
                                Swal.fire({
                                    title: 'Errores de validaciones.',
                                    html: errorMessage,
                                    icon: 'error',
                                });
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Algo salio mal al insertar datos de muestra',
                            icon: 'error'
                        });
                    }
                    // setTimeout(() => {
                    //     window.location.href = '{{ route('muestra.index') }}';
                    // }, 2000);
                }
            });
        });
    });
</script>