@extends('layouts.app')

@section('content')
    <div class="bgc-white p-20 bd">
        <h3>Editar Registro - Correo Contacto</h3>

        <form action="{{ route('facturas-factorizadas.correos.update', ['id' => $correo->id]) }}" method="post">
            @csrf
            @method('PUT')
            <div class="card">
                <div class="card-body">
                    @component('components.form-group', ['titulo' => 'Usuario', 'nombre' => 'user_id'])
                        <select v-model="user_id" name="user_id" id="user_id" class="form-control">
                            <option value="">Seleccione</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->full_name }} - {{ $user->email }}</option>
                            @endforeach
                        </select>
                    @endcomponent

                    @component('components.form-group', ['titulo' => 'Area', 'nombre' => 'area'])
                        @foreach($areas as $key => $area)
                            <input v-model="areas" id="area{{ $key + 1 }}" name="areas[]" type="checkbox"
                                   value="{{ $area->id }}">
                            <label for="area{{ $key + 1 }}">{{ $area->nombre }}</label>
                        @endforeach
                    @endcomponent
                </div>

                <div class="card-footer">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary">Guardar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                user_id: '{{ $correo->user_id }}',
                areas: @json($areasSeleccionadas),

                loading: false,
                errors: {},
                status: null
            }),

            methods: {
                onSubmit(evt) {
                    evt.preventDefault()
                }
            }
        })
    </script>
@endpush