@extends('layouts.app', ['title' => 'Editar Participante: '.$partaker->name])
@section('content')
    <div class="container" id="partakers">

        <p class="ml-3">Los campos marcados con asterisco (*) son obligatorios</p>

        <form action="{{route('admin.partakers.update', $partaker)}}" method="post" class="mx-4 p-3">
            @csrf @method('put')

            <h2>Información básica</h2>
            <div class="row mb-4 p-3 border rounded">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="">Nombres *</label>
                        <input type="text"
                               class="form-control"
                               name="first_name"
                               value="{{old('first_name', $partaker->first_name)}}"
                               required>
                        @error('first_name')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="">Apellidos *</label>
                        <input type="text"
                               class="form-control"
                               name="last_name"
                               value="{{old('last_name', $partaker->last_name)}}"
                               required>
                        @error('last_name')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="">Tipo de Identificación *</label>
                        <select id="" name="identification_type_id" class="form-control" required>
                            <option value=""></option>
                            @foreach($identificationTypes as $type)
                                <option value="{{$type->id}}"
                                        @if(old('identification_type_id', $partaker->identification_type_id) == $type->id) selected @endif>
                                    {{$type->name}} - {{$type->description}}
                                </option>
                            @endforeach
                        </select>
                        @error('identification_type_id')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="">Número de Identificación *</label>
                        <input type="text"
                               class="form-control"
                               name="identification"
                               value="{{old('identification', $partaker->identification)}}"
                               required>
                        @error('identification')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
            </div>


            <h2>Información complementaria</h2>
            <div class="row mb-4 p-3 border rounded">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="">Email *</label>
                        <input type="email"
                               class="form-control"
                               name="email"
                               value="{{old('email', $partaker->email)}}"
                               required>
                        @error('email')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="">Teléfono</label>
                        <input type="text"
                               class="form-control"
                               name="phone"
                               value="{{old('phone', $partaker->phone)}}">
                        @error('phone')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    @institution
                    @if($partaker->carer_id) {{-- es niño/joven --}}
                        <div class="form-group">
                            <label for="">Grado</label>
                            <input type="text"
                                   class="form-control"
                                   name="grade"
                                   value="{{old('grade', $partaker->grade)}}">
                               @error('grade')
                                   <span class="text-danger">{{$message}}</span>
                               @enderror
                        </div>
                    @endif
                    @endinstitution

                    <div class="form-group">
                        <label for="">Estado</label>
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="active"
                                   id="active"
                                   @if(old('active', $partaker->active)) checked @endif>
                            <label class="form-check-label" for="active">
                                Activo
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="">Fecha de nacimiento <small>(* requerido para niños/jóvenes)</small></label>
                        <input type="date"
                               name="birthday"
                               class="form-control"
                               value="{{old('birthday', $partaker->birthday)}}"
                               :required="typeStudentSelected">
                        @error('birthday')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="">Sexo</label>
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="radio"
                                   name="sex"
                                   id="sex-m"
                                   value="M"
                                   @if(old('sex', $partaker->sex) == 'M') checked @endif>
                            <label class="form-check-label" for="sex-m">
                                Masculino
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="radio"
                                   name="sex"
                                   id="sex-f"
                                   value="F"
                                   @if(old('sex', $partaker->sex) == 'F') checked @endif>
                            <label class="form-check-label" for="sex-f">
                                Femenino
                            </label>
                        </div>
                    </div>

                    @institution
                    @if($partaker->carer_id) {{-- es niño/joven --}}
                        <div class="form-group">
                            <label for="">Jornada</label>
                            <input type="text"
                                   class="form-control"
                                   name="session"
                                   value="{{old('session', $partaker->session)}}">
                               @error('session')
                               <span class="text-danger">{{$message}}</span>
                               @enderror
                        </div>
                    @endif
                    @endinstitution
                </div>
            </div>


            @institution
                {{-- <h2>Información extra</h2> --}}
                {{-- <div class="row mb-4 p-3 border rounded"> --}}
                {{--     <div class="col-lg-6"> --}}
                {{--         <template v-if="typeStudentSelected"> --}}
                {{--             <div class="form-group"> --}}
                {{--                 <label for="">Grado</label> --}}
                {{--                 <select id="type" --}}
                {{--                         class="form-control" --}}
                {{--                         name="grade_id" --}}
                {{--                         required --}}
                {{--                         :disabled="!typeStudentSelected"> --}}
                {{--                     @foreach($grades as $grade) --}}
                {{--                         <option value="{{$grade->id}}" --}}
                {{--                                 @if(old('grade_id', $partaker->grade_id) == $grade->id) selected @endif> --}}
                {{--                                 {{$grade->name}} --}}
                {{--                         </option> --}}
                {{--                     @endforeach --}}
                {{--                 </select> --}}
                {{--                 @error('grade_id') --}}
                {{--                 <span class="text-danger">{{$message}}</span> --}}
                {{--             @enderror --}}
                {{--             </div> --}}
                {{--  --}}
                {{--             <div class="form-group"> --}}
                {{--                 <label for="">Jornada</label> --}}
                {{--                 <select id="type" --}}
                {{--                         class="form-control" --}}
                {{--                         name="session_id" --}}
                    {{--                     required --}}
                    {{--                     :disabled="!typeStudentSelected"> --}}
                    {{--                 @foreach($sessions as $session) --}}
                    {{--                     <option value="{{$session->id}}" --}}
                    {{--                             @if(old('session_id', $partaker->session_id) == $session->id) selected @endif> --}}
                    {{--                             {{$session->name}} --}}
                    {{--                     </option> --}}
                    {{--                 @endforeach --}}
                    {{--             </select> --}}
                    {{--             @error('session_id') --}}
                    {{--             <span class="text-danger">{{$message}}</span> --}}
                    {{--         @enderror --}}
                    {{--         </div> --}}
                    {{--     </template> --}}
                    {{--  --}}
                    {{-- </div> --}}

                    @admin
                    {{-- <input type="hidden" name="client_id" value="{{auth()->user()->client->id}}"> --}}
                    @endadmin

                {{--     <div class="col-lg-6"> --}}
                {{--         <template v-if="typeStudentSelected"> --}}
                {{--             <div class="form-group"> --}}
                {{--                 <label for="">Modalidad</label> --}}
                {{--                 <select id="type" --}}
                {{--                         class="form-control" --}}
                {{--                         name="modality_id" --}}
                {{--                         required --}}
                {{--                         :disabled="!typeStudentSelected"> --}}
                {{--                     @foreach($modalities as $modality) --}}
                {{--                         <option value="{{$modality->id}}" --}}
                {{--                                 @if(old('modality_id', $partaker->modality_id) == $modality->id) selected @endif> --}}
                {{--                                 {{$modality->name}} --}}
                {{--                         </option> --}}
                {{--                     @endforeach --}}
                {{--                 </select> --}}
                {{--                 @error('modality_id') --}}
                {{--                 <span class="text-danger">{{$message}}</span> --}}
                {{--                 @enderror --}}
                {{--             </div> --}}
                {{--         </template> --}}
                {{--     </div> --}}
                {{-- </div> --}}
            @endinstitution

            <div :class="{'d-none': !typeStudentSelected}">
                <h2>Responsables del niño/joven</h2>
                <div class="row mb-4 p-3 border rounded">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="">Familiar/Cuidador</label>
                            <select id="carer_id"
                                    class="form-control selectpicker with-ajax-carer"
                                    name="carer_id"
                                    data-live-search="true"
                                    data-live-search-normalize="true"
                                    data-style=""
                                    data-style-base="form-control"
                                    data-none-selected-text=""
                                    :required="typeStudentSelected">
                                <option value="{{old('carer_id', $partaker->carer_id)}}">
                                    {{old('carer_id', @$partaker->carer->fullName)}}
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="">Docente</label>
                            <select id="teacher_id"
                                    class="form-control selectpicker with-ajax-teacher"
                                    name="teacher_id"
                                    data-live-search="true"
                                    data-live-search-normalize="true"
                                    data-style=""
                                    data-style-base="form-control"
                                    data-none-selected-text=""
                                    :required="typeStudentSelected">
                                <option value="{{old('teacher_id', $partaker->teacher_id)}}">
                                    {{old('teacher_id', @$partaker->teacher->fullName)}}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="my-4">
                <a href="javascript:history.go(-1)" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Volver
                </a>
                <button class="btn btn-primary" type="submit">
                    <i class="fa fa-save"></i> Guardar
                </button>
            </div>

        </form>

    </div>
@endsection
@push('js')
    <script>
        new Vue({
            el: '#partakers',
            data() {
                return {
                    typeStudentSelected: @json($partaker->pot_source_id == 1)
                }
            },
            mounted() {
                this.setClientSelect()
                this.setCarerSelect()
                this.setTeacherSelect()
            },
            methods: {
                typeChanged(ev) {
                    this.typeStudentSelected = ev.target.value == 1 ? true : false
                    $('#carer_id').val(@json(old('carer_id', $partaker->carer_id))).change()
                    $('#teacher_id').val(@json(old('teacher_id', $partaker->teacher_id))).change()
                },
                setCarerSelect() {
                    const url = '/api/partakers/get-carers'
                    const placeholder = 'Escriba el nombre del cuidador'
                    const fields = (record) => { return {
                        text: record.first_name + ' ' + record.last_name,
                        value: record.id
                    }}
                    $(".selectpicker")
                        .selectpicker()
                        .filter(".with-ajax-carer")
                        .ajaxSelectPicker(this.getAjaxSelectpickerOptionsObject(url, placeholder, fields));
                },
                setClientSelect() {
                    const url = '/api/clients/get-all'
                    const placeholder = 'Escriba el nombre del cliente'
                    const fields = (record) => { return { text: record.name, value: record.id } }
                    $(".selectpicker")
                        .selectpicker()
                        .filter(".with-ajax-client")
                        .ajaxSelectPicker(this.getAjaxSelectpickerOptionsObject(url, placeholder, fields));
                },
                setTeacherSelect() {
                    const url = '/api/partakers/get-teachers'
                    const placeholder = 'Escriba el nombre del docente'
                    const fields = (record) => { return {
                        text: record.first_name + ' ' + record.last_name,
                        value: record.id
                    }}
                    $(".selectpicker")
                        .selectpicker()
                        .filter(".with-ajax-teacher")
                        .ajaxSelectPicker(this.getAjaxSelectpickerOptionsObject(url, placeholder, fields));
                },
                getAjaxSelectpickerOptionsObject(url, placeholder, getFields) {
                    return {
                        ajax: {
                            url: url,
                            type: "GET",
                            dataType: "json",
                            data: { q: "@{{{q}}}" }
                        },
                        locale: {
                            emptyTitle: placeholder,
                            statusInitialized: "",
                            searchPlaceholder: "Buscar...",
                            statusSearching: "Buscando...",
                            statusTooShort: "Por favor, escriba mas letras",
                            statusNoResults: "No se encontraron resultados"
                        },
                        log: 0,
                        preprocessData: function(res) {
                            const i = 0, len = res.data.length, array = [];
                            if (len) {
                                for (let i = 0; i < len; i++) {
                                    array.push($.extend(true, res.data[i], getFields(res.data[i])));
                                }
                            }
                            return array;
                        }
                    };
                },
            }
        })

        const options = {
            ajax: {
                url: "/api/clients/get-all",
                type: "GET",
                dataType: "json",
                data: { q: "@{{{q}}}" }
            },
            locale: {
                emptyTitle: "Escriba el nombre del cliente",
                statusInitialized: "",
                searchPlaceholder: "Buscar...",
                statusSearching: "Buscando...",
                statusTooShort: "Por favor, escriba mas letras",
                statusNoResults: "No se encontraron resultados"
            },
            log: 0,
            preprocessData: function(res) {
                const i = 0, len = res.data.length, array = [];
                if (len) {
                    for (let i = 0; i < len; i++) {
                        array.push(
                            $.extend(true, res.data[i], {
                                text: res.data[i].name,
                                value: res.data[i].id,
                            })
                        );
                    }
                }
                return array;
            }
        };

        $(".selectpicker")
            .selectpicker()
            .filter(".with-ajax")
            .ajaxSelectPicker(options);
    </script>
@endpush