@extends('layouts_old.main')
@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/forms.css')}}"/>
@endsection
@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div class="main-wrapper">
        <div class="row justify-content-between Header mb-5">
            <div class="col-md-8 d-flex flex-column justify-content-center justify-content-md-start Header-breadcrumbs">
                {{ Breadcrumbs::render('createuser') }}
                <h2 class="page-title">Create New User</h2>

            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end Header-buttons">

            </div>
        </div>


        @if ($errors->any())
            <div class="alert alert-danger">
                <div class="d-flex justify-content-between">
                    <span><strong>Whoops!</strong> There were some problems with your input.</span>
                    <button onclick="this.parentElement.parentElement.remove()">X</button>

                </div>
                <p>{{$errors->first()}}</p>
                <ul>
                    @foreach ($errors as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{route('user.store')}}" method="POST">
            @csrf
            <div class="form-inner-container">

                <div class="form-group-container">
                    <div class="form-group">
                        <label>Firstname (ΕΛ):</label>
                        <input type="text" name="firstname" class="form-control name" placeholder="Όνομα" >
                    </div>
                    <div class="form-group">
                        <label>Lastname (ΕΛ):</label>
                        <input type="text" name="lastname" class="form-control name" placeholder="Επίθετο" >
                    </div>
                </div>

                <div class="form-group-container">
                    <div class="form-group">
                        <label>Firstname (EN):</label>
                        <input type="text" name="firstname_en" class="form-control name" placeholder="First Name (EN)" >
                    </div>
                    <div class="form-group">
                        <label>Lastname (EN):</label>
                        <input type="text" name="lastname_en" class="form-control name" placeholder="Last Name (EN)" required>
                    </div>
                </div>

                <div class="form-group-container">
                    <div class="form-group">
                        <label>Father name (ΕΛ):</label>
                        <input type="text" name="father_name" class="form-control name" placeholder="Πατρώνυμο (ΕΛ)" >
                    </div>
                    <div class="form-group">
                        <label>Father name (EN):</label>
                        <input type="text" name="father_name_en"
                               class="form-control name" placeholder="Father Name (EN)" >
                    </div>
                </div>
                <div class="form-group-container">
                    <div class="form-group">
                        <label>AFM:</label>
                        <input type="text" name="afm" class="form-control name" placeholder="AFM" required pattern="[0-9]{8,9}" autofocus title="AFM must be exactly 8 or 9 numbers" data-rule='[0-9]{9}' data-error="AFM must be exactly 9 numbers">
                    </div>
                    <div class="form-group">
                        <label>AMKA:</label>
                        <input type="text" name="amka" class="form-control name" placeholder="AMKA" required pattern="[0-9]{10,11}" autofocus title="AMKA must be exactly 10 or 11 numbers">
                    </div>
                </div>

                <div class="form-group-container">
                    <div class="form-group">
                        <label>Email :</label>
                        <input type="text" name="email" class="form-control name" placeholder="Email" >
                    </div>
                    <div class="form-group">
                        <label class="form-check-label">Email Verified :</label>
                        <input type="checkbox" name="email_verified_at" class="form-check-input"
                               placeholder="Verification Date">
                    </div>
                </div>
                <div class="form-group-container">
                    <div class="form-group">
                        <label>Mobile Phone :</label>
                        <input type="text" name="mobile_phone" class="form-control name">
                    </div>
                    <div class="form-group ">
                        <label class="form-select-label" for="buildings"> Buildings</label>
                        <select name="building_id" id="buildings" class="form-select" >
                            <option value="" disabled selected hidden>Παρακαλώ επιλέξτε...</option>
                            @foreach($buildings as $building)
                                <option value="{{$building->number}}">{{$building->name_en}}</option>
                            @endforeach
                        </select>
                    </div>


                </div>


                <div class="form-group-container">
                    <div class="form-group">
                        <label class="form-select-label" for="education_categories">Education Categories</label>
                        <select name="education_category_id" id="education_categories" class="form-select" >
                            <option value="" disabled selected hidden>Παρακαλώ επιλέξτε...</option>
                            @foreach($education_categories as $education_category)
                                <option value="{{$education_category->id}}">{{$education_category->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-select-label" for="work_relations">Work Relations</label>
                        <select name="work_relation_id" id="work_relations" class="form-select" >
                            <option value="" disabled selected hidden>Παρακαλώ επιλέξτε...</option>
                            @foreach($work_relations as $work_relation)
                                <option value="{{$work_relation->id}}">{{$work_relation->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>



                <div class="form-group-container">
                    <div class="form-group">
                        <label class="form-select-label" for="staff_categories"> Staff Categories</label>
                        <select name="staff_category_id" id="staff_categories" class="form-select" >
                            <option value="" disabled selected hidden>Παρακαλώ επιλέξτε...</option>
                            @foreach($staff_categories as $staff_category)
                                <option value="{{$staff_category->id}}" data-work_relations="{{json_encode($staff_category->work_relation_ids)}}">{{$staff_category->name}}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="form-group">
                        <label class="form-select-label" for="ranks"> Rank</label>
                        <select name="rank_id" id="ranks" class="form-select">
                            <option value="" disabled selected hidden>Παρακαλώ επιλέξτε...</option>
                            @foreach($ranks as $rank)
                                <option value="{{$rank->id}}">{{$rank->name}}</option>
                            @endforeach
                        </select>
                    </div>


                </div>


                <div class="form-group-container">

                </div>

                <div class="form-group-container">
                    <div class="form-group">
                        <label class="form-select-label" for="units">Units</label>
                        <select name="unit_id" id="units" class="form-select" >
                            <option value="" disabled selected>Παρακαλώ επιλέξτε...</option>
                            @foreach($units as $unit)
                                <option value="{{$unit->id}}"
                                        data-category="{{$unit->unit_category}}">{{$unit->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-select-label" for="departments">Departments</label>
                        <select name="department_id" id="departments" class="form-select">
                            <option value="" disabled selected hidden>Παρακαλώ επιλέξτε...</option>
                            @foreach($departments as $department)
                                <option value="{{$department->id}}"
                                        data-unit="{{$department->unit_id}}">{{$department->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-select-label" for="research_groups">Research Groups</label>
                        <select name="research_group_id" id="research_groups" class="form-select">
                            <option value="" disabled selected>Παρακαλώ επιλέξτε...</option>
                            @foreach($research_groups as $research_group)
                                <option value="{{$research_group->id}}"
                                        data-unit="{{$research_group->unit_id}}">{{$research_group->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                <div class="form-group-container last-row">

                    <div class="form-group d-flex email-verified-group">
                        <label class="form-check-label">Email Verified at :</label>
                        <input type="datetime-local" name="email_verified_at" class="date">
                    </div>
                    <div class="form-group">
                        <label class="form-check-label">Active :</label>
                        <input class="form-check-input" type="checkbox" name="isActive">
                    </div>
                </div>

                <div id="rescom-data" style="display: contents">
                    <div class="form-group-container">
                        <div class="form-group">
                            <label class="form-select-label" for="contract_id">Contract Id</label>
                            <input type="text" name="contract_id" id="contract_id" class="form-control name">
                        </div>

                        <div class="form-group">
                            <label class="form-select-label" for="rescom_user_id">Rescom User Is</label>
                            <input type="text" name="rescom_user_id" id="rescom_user_id" class="form-control name">
                        </div>
                    </div>

                    <div class="form-group-container">
                        <div class="form-group">
                            <label class="form-select-label" for="project_code">Porject Code</label>
                            <input type="text" name="project_code" id="project_code" class="form-control name">
                        </div>

                        <div class="form-group">
                            <label class="form-select-label" for="project_title">Project Title</label>
                            <input type="text" name="project_title" id="project_title" class="form-control name">
                        </div>
                    </div>

                    <div class="form-group-container">
                        <div class="form-group">
                            <label class="form-select-label" for="contract_start">Contract Start</label>
                            <input type="date" name="contract_start" id="contract_start" class="form-control name">
                        </div>

                        <div class="form-group">
                            <label class="form-select-label" for="contract_end">Contract End</label>
                            <input type="date" name="contract_end" id="contract_end" class="form-control name">
                        </div>
                    </div>

                </div>
                <div class="btn-container">
                    <button type="submit" class="btn">Create User</button>
                </div>
            </div>
        </form>
    </div>

    </div>
@endsection

@section('javascripts')
    <script>

        const departments = $('#departments').parent('.form-group').hide()
        const research_groups = $('#research_groups').parent('.form-group').hide()

        /**
         *On unit change show and filter research groups / departments/
         */
        $('#units').on('change', function () {

            const selected_category = $(this).find(":selected").data('category').id
            const selected_unit = $(this).val()

            /**
             * id 1 == kentrikh dioikish => show tmhmata
             * id 2 == inst => show research groups
             * id 3 == autoteles
             */
            switch (selected_category) {
                case 1:
                    research_groups.find('select').val('')
                    research_groups.hide()
                    departments.find('option:not(:disabled)').each(function () {
                        $(this).data('unit') == selected_unit ? $(this).show() : $(this).hide()

                    })
                    departments.show()
                    break;
                case 2:
                    departments.find('select').val('')
                    departments.hide()
                    research_groups.find('option:not(:disabled)').each(function () {
                        $(this).data('unit') == selected_unit ? $(this).show() : $(this).hide()

                    })
                    research_groups.show()
                    break;
                case 3:
                    departments.hide()
                    departments.find('select').val('')
                    research_groups.hide()
                    research_groups.find('select').val('')
                    break;
            }
        })


        const ranks = $('#ranks').parent('.form-group').hide()
        /**
         *On staff_categories show/hide rank
         */
        $('#staff_categories').on('change', function () {

            /**
             * id == 2 (Ερευνητησ) | 3 (ΕΔΕ) => show ranks
             */
            const selected_cat = $(this).val()
            if (selected_cat == 2 || selected_cat == 3) {
                ranks.show()
            } else {
                ranks.find('select').val('')
                ranks.hide()
            }


        })

        const rescom_data = $('#rescom-data').hide()
        const staff_categories_select = $('#staff_categories')


        /**
         *  On work_relations change 1: show/hide rescom data
         *                           2: filter staff categories
         */
        $('#work_relations').on('change', function () {

            /**
             * id == 2 (taktiko) | => show rescom
             */
            const selected_rel = $(this).val()
            if (selected_rel == 2) {
                rescom_data.show()
            } else {
                rescom_data.hide()
            }

            staff_categories_select.val('')
            staff_categories_select.change()
            staff_categories_select.find('option:not(:disabled)').each(function () {
                $(this).data('work_relations').includes(Number(selected_rel)) ? $(this).show() : $(this).hide()
            })


        })



    </script>
@endsection