@extends('layouts.app', ['title' => 'Crear Nuevos Participantes'])
@section('content')
    <div class="container" id="partakers">

        <form action="{{route('admin.partakers.store')}}" method="post" class="mx-md-4 p-md-3">
            @csrf

            <div class="p-3">
                <p>El proceso de exploración se realiza a través de la información proporcionada por tres tipos de participantes:</p>
                <p>- el(la) niño(a) o joven.</p>
                <p>- los padres de familia o en su defecto, un acudiente.</p>
                <p>- el(la) docente que usted considere más cercano al (a la) niño(a) o joven.</p>
                <p>En este momento debe usted inscribirlos en la APP y ellos recibirán un correo que les informa sobre su participación.</p>
            </div>

            <div class="border rounded p-3">
                <h1 v-show="step == '' || step== 'carer'">Paso 1. Información de padres o acudiente</h1>

                <p v-show="step == ''">Registrar al padre, a la madre o a un acudiente que conozca muy bien al(a la) niño(a) o joven, para garantizar la mejor calidad en la información suministrada. <br>
                ¿Desea registrar al administrador de esta cuenta como padre/madre o acudiente?</p>

                <div class="text-center" v-show="step == ''">
                    <button class="btn btn-success" type="button" @click="nextStep">No</button>
                    <button class="btn btn-primary" type="button" @click="useAdminAsCarer">Si</button>
                </div>

                @include('admin.partakers._includes.carer')

                @include('admin.partakers._includes.teacher')

                @include('admin.partakers._includes.student')

            </div>

            <input type="hidden" name="carer_is_admin" :value="carerIsAdmin">
       </form>

       <div class="my-4">
           <a href="{{route('admin.partakers.index')}}" class="btn btn-secondary">
               <i class="fa fa-arrow-circle-left"></i> Volver al listado
           </a>
       </div>

    </div>
@endsection
@push('js')
    <script>
        new Vue({
            el: '#partakers',
            data() {
                return {
                    step: '',
                    carerIsAdmin: false,
                    carerExists: false,
                    teacherExists: false,
                    carer: {
                        first_name: null,
                        last_name: null,
                        identification_type_id: null,
                        identification: null,
                        email: null,
                        birthday: null,
                        sex: null,
                        kinship_id: null,
                        country_id: @json(Constants::COLOMBIA_ID),
                        state_id: null,
                        city: null,
                    },
                    teacher: {
                        first_name: null,
                        last_name: null,
                        identification_type_id: null,
                        identification: null,
                        email: null,
                        sex: null,
                        birthday: null,
                        
                    },
                    student: {
                        carer_kinship_id: null,
                        country_id: @json(Constants::COLOMBIA_ID),
                        state_id: null,
                        city: null,
                    },
                    studentIdentificationTypes: this.filterStudentIdentificationTypes(),
                    carerTeacherIdentificationTypes: this.filterCarerTeacherIdentificationTypes(),
                    cities: @json($cities),
                }
            },
            computed: {
                carerFilteredCities() {
                    return this.cities.filter(city => city.state_id == this.carer.state_id)
                },
                studentFilteredCities() {
                    return this.cities.filter(city => city.state_id == this.student.state_id)
                },
            },
            methods: {
                previousStep() {
                    if(this.step == 'carer') this.step = ''
                    if(this.step == 'teacher') this.step = 'carer'
                    if(this.step == 'student') this.step = 'teacher'

                    this.saveTempData()
                },
                nextStep() {
                    if(this.step == 'teacher') {
                        if(!this.teacher.first_name ||
                           !this.teacher.last_name ||
                           !this.teacher.identification_type_id ||
                           !this.teacher.identification ||
                           !this.teacher.email) return alert('Por favor, llene todos los campos marcados como requerido (*)')

                        if(!this.isValidEmail(this.teacher.email)) return alert('Ingrese un email válido.')

                        this.step = 'student'
                        this.filterStudentIdentificationTypes()
                    }

                    if(this.step == 'carer') {
                        if(!this.carer.first_name ||
                           !this.carer.last_name ||
                           !this.carer.identification_type_id ||
                           !this.carer.identification ||
                           !this.student.carer_kinship_id ||
                           !this.carer.email) return alert('Por favor, llene todos los campos marcados como requerido (*)')

                        if(!this.isValidEmail(this.carer.email)) return alert('Ingrese un email válido.')

                        this.step = 'teacher'
                    }

                    if(this.step == '') {
                        this.step = 'carer'
                        this.carerIsAdmin = false
                    }

                    this.saveTempData()
                },
                fetchPartaker(source) {
                    let identification = null
                    let identification_type_id = null

                    if(source == 'carer') {
                        identification = this.carer.identification
                        identification_type_id = this.carer.identification_type_id
                    } else if(source == 'teacher') {
                        identification = this.teacher.identification
                        identification_type_id = this.teacher.identification_type_id
                    } else { return false }

                    if(!identification || !identification_type_id) return false

                    axios.get('/api/partakers/find-by-identification', {
                        params:{ identification, identification_type_id }
                    }).then(res => {
                        const partaker = res.data.data.partaker
                        if(res.data.status == 'success' && partaker) {
                            if(source == 'carer') {
                                this.carer = partaker
                                this.carerExists = true
                            } else {
                                this.teacher = partaker
                                this.teacherExists = true
                            }
                        } else {
                            if(source == 'carer') {
                                this.carerExists = false
                            } else {
                                this.teacherExists = false
                            }
                        }
                    }).catch(err => {
                        alert('Error al tratar de traer el participante.')
                        console.log(err.response)
                    })
                },
                useAdminAsCarer() {
                    this.carer = @json(auth()->user());
                    delete this.carer.client
                    this.carerExists = true
                    this.carerIsAdmin = true
                    this.step = 'carer'
                    this.nextStep()
                },
                filterCarerTeacherIdentificationTypes() {
                    const identificationTypes = @json($identificationTypes);
                    const allowedTypes = ['CC', 'CE']
                    return identificationTypes.filter(type => allowedTypes.find(t => t == type.name))
                },
                filterStudentIdentificationTypes() {
                    const identificationTypes = @json($identificationTypes);
                    const allowedTypes = ['RC', 'TI', 'MS']
                    return identificationTypes.filter(type => allowedTypes.find(t => t == type.name))
                },
                fetchTempData() {
                    axios.get('/api/partakers/temp-data?user_id=' + @json(auth()->user()->id))
                        .then(res => {
                            if(res.data.status == 'success') {
                                const tempData = JSON.parse(res.data.data.tempData)
                                console.log(tempData)
                                this.step = tempData.step
                                this.carerIsAdmin = tempData.carerIsAdmin
                                this.carerExists = tempData.carerExists
                                this.teacherExists = tempData.teacherExists
                                this.carer = tempData.carer
                                this.teacher = tempData.teacher
                                this.student = tempData.student
                            }
                        }).catch(err => {
                            if(err.response.status == 404) return false
                            console.log('ERROR al obtener datos temporales: ', err.response)
                        })
                },
                saveTempData() {
                    const tempData = {
                        step: this.step,
                        carerIsAdmin: this.carerIsAdmin,
                        carerExists: this.carerExists,
                        teacherExists: this.teacherExists,
                        carer: this.carer,
                        teacher: this.teacher,
                        student: this.student
                    }

                    axios.post('/api/partakers/temp-data', {
                        user_id: @json(auth()->user()->id),
                        temp_data: JSON.stringify(tempData),
                    }).then(res => {
                        if(res.data.status == 'success') {
                            console.log('Datos temporales guardados.', res.data)
                        }
                    }).catch(err => {
                        console.log('ERROR al guardar datos temporales: ', err.response)
                    })
                }
            },
            mounted() {
                this.fetchTempData()
            }
        })

    </script>
@endpush