@extends('metronic.base')
@section('title')
    Editar {{ $muestras->id }}
@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">
                            Editar pedido 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-update" action="{{ route('update.muestra', $muestras->id) }}" 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->id == $muestras->cliente_id ? 'selected' : '' }}>
                                                    {{ $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"
                                            value="{{ $muestras->fecha_entrega }}">
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="ms-label">Muestra</label>
                                        <input type="text" class="ms-input" id="muestra" name="muestra"
                                            placeholder="Ingresa tu muestra" value="{{ $muestras->muestra }}">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <span onclick="activar()"></span>
                                        <label class="ms-label pt-1">Prioridad</label>
                                        <input type="text" class="ms-input" name="prioridad" id="prioridad"
                                            placeholder="Ingresa tu prioridad" value="{{ $muestras->prioridad }}">
                                    </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>
                                            Actualizar
                                        </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-update").on('submit', function(e) {
            e.preventDefault();
            let id = {{ $muestras->id }};
            let cliente_id = $("#cliente_id").val();
            let muestra = $("#muestra").val();
            let fecha_entrega = $("#fecha_entrega").val();
            let prioridad = $("#prioridad").val();
            let status = $("#status").val();

            $.ajax({
                url: '/update/muestra/' + id,
                method: 'POST',
                data: {
                    cliente_id: cliente_id,
                    muestra: muestra,
                    fecha_entrega: fecha_entrega,
                    prioridad: prioridad,
                    status: status,
                },
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val(),
                },
                success: function() {
                    Swal.fire({
                        title: 'Datos actualizados',
                        icon: 'success',
                    });
                    setTimeout(() => {
                        window.location.href = '{{ route('muestra.index') }}'
                    }, 4000);
                },
                error: function(e) {
                    if (e.status === 422) {
                        let errors = e.responseJSON.errors;
                        let errorMshg = '';
                        $.each(errors, function(key, value) {
                            errorMshg += value[0] + '<br>'
                        });
                        Swal.fire({
                            title: 'Errores en las validaciones.',
                            html: errorMshg,
                            icon: 'error',
                        });
                    } else {
                        Swal.fire({
                            title: 'Algo salio mal al querer actualizar los datos revisa.',
                            icon: 'error',
                        });
                    }

                    setTimeout(() => {
                        window.location.href = '{{ route('muestra.index') }}'
                    }, 4000);
                }
            });
        });
    });
</script>