@extends('adminlte::page')
@section('plugins.Select2', true)
@section('title', 'Modificar Orden de trabajo')

@section('content_header')
    <a class="btn btn-dark btn" href="javascript:history.back()"><i class="fas fa-solid fa-arrow-left"></i> REGRESAR</a>
@stop

@section('content')
    <div class="container">
        <div class="card card-dark">
            <div class="card-header">
                <h3 class="card-title">Orde De Trabajo {{ $order->code }}</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <x-validation-errors class="mb-4" />
                <form data-action="{{ route('workorder.update', $order->id) }}" method="POST" id="workorderEditForm">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Fecha inicio del trabajo:</label>
                                <input type="date" id="date_start_id" value="{{ $order->date_start }}"
                                    class="form-control" name="date_start" onchange="changeDate()">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Fecha final del trabajo(Estimada):</label>
                                <input type="date"" id="date_end_id" value="{{ $order->date_end }}" class="form-control"
                                    name="date_end">
                            </div>
                        </div>
                    </div>
                    <div class="row" id="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Cliente:</label>
                                <input type="text" disabled id="client_id_id" class="form-control" name="client_id"
                                    value="{{ $order->client }}">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Faena:</label>
                                <select class="form-control" style="width: 100%" id="chore_id_id" name="chore_id">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Estado Terreno</label>
                                <select class="form-control" style="width: 100%" id="status_land_id" name="status_land">
                                    <option @selected($order->status_land == 'Pendiente') value="Pendiente">Pendiente</option>
                                    <option @selected($order->status_land == 'Realizado') value="Realizado">Realizado</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Estado Gabinete:</label>
                                <select class="form-control" style="width: 100%" id="status_cabinet_id"
                                    name="status_cabinet">
                                    <option @selected($order->status_cabinet == 'Pendiente') value="Pendiente">Pendiente</option>
                                    <option @selected($order->status_cabinet == 'Realizado') value="Realizado">Realizado</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Estado General:</label>
                        <select class="form-control" style="width: 100%" id="status_id" name="status">
                            <option @selected($order->status == 'En Proceso') value="En Proceso">En Proceso</option>
                            <option @selected($order->status == 'Finalizado') value="Finalizado">Finalizado</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Descripción(Opcional)</label>
                        <textarea class="form-control" id="description_id" name="description" rows="4">{{ $order->description }}</textarea>
                    </div>



                    <x-adminlte-button class="float-right mt-2" type="submit" label="MODIFICAR" theme="primary" />
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>


@stop

@section('js')
    <script>
        var price = "{{ $order->price_id }}";
        $(document).ready(function() {
            $.fn.select2.defaults.set('language', 'es');
            $('#chore_id_id').select2({
                ajax: {
                    url: "{{ route('api.autopriceworkorder') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term,
                            price: price
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un cliente',
                theme: "bootstrap4",
            });
            var chore_id = "{{ $order->chore_id }}";
            var chore_name = "{{ $order->chore }}";
            var optionChore = new Option(chore_name, chore_id, true, true);
            $('#chore_id_id').append(optionChore).trigger('change');
        });
        $('#workorderEditForm').validate({
            submitHandler: function(form) {
                var url = $(form).attr('data-action');
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: new FormData(form),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data) {
                        msjExito(data['success'])
                    },
                    error: function(err) {
                        msjError('¡Hubo un error al modiicar la orden de trabajo!');
                    }
                });

            },
            rules: {
                chore_id: {
                    required: true,
                },
                description: {
                    maxlength: 600,
                },
                date_start: {
                    required: true,
                    date: true,
                },
                date_end: {
                    required: true,
                    date: true,
                },
                status_land: {
                    required: true,
                },
                status_cabinet: {
                    required: true,
                },
                status: {
                    required: true,
                },
            },
            messages: {
                chore_id: {
                    required: "El campo es obligatorio",
                },
                description: {
                    maxlength: "El campo permite maximo 300 caracteres",
                },
                date_start: {
                    required: "El campo es obligatorio",
                    date: "El campo permite solo fechas"
                },
                date_end: {
                    required: "El campo es obligatorio",
                    date: "El campo permite solo fechas"
                },
                status_land: {
                    required: "El campo es obligatorio",
                },
                status_cabinet: {
                    required: "El campo es obligatorio",
                },
                status: {
                    required: "El campo es obligatorio",
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        function changeDate() {
            var valor = $('#date_start_id').val();
            const fechaInput = document.querySelector('#date_end_id');
            fechaInput.min = valor;
            fechaInput.value = valor;
        }
    </script>
    <script src="/js/general/sweet.js"></script>
    <script src="/js/workorder/form.js"></script>
@stop