@extends('frontend.counselor-dashboard.layouts.master')

@section('dashboard-contents')

<div class="dashboard__content-wrap dashboard__content-wrap-two mt-3">
    <div class="dashboard__content-title">
        <h4 class="title">{{ __('Create an counselor') }}</h4>
    </div>
    <form action="{{ route('counselor.counselor.store') }}" method="POST" class="instructor__profile-form">
        @csrf
        <div class="row">
            <!-- Title -->
            <div class="col-md-12">
                <div class="form-grp">
                    <label for="title">{{ __('Title') }}</label>
                    <input type="text" name="title" value="{{ old('title') }}" required class="form-control" placeholder="Enter title">
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-grp">
                    <label for="location_id">{{ __('Location') }}</label>
                    <select name="location_id" class="form-control" required>
                        <option value="">{{ __('Select location') }}</option>
                        @foreach($location as $category)
                        <option value="{{ $category->id }}" {{ old('location_id') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>


            <div class="col-md-12 mt-3" style="display: none;">
                <div class="partner_instructor_list">
                    <label for="cpacity">{{ __('Universities') }} <code></code></label>
                    @php
                        $selectedUniversitie = old('universities');
                        if(!is_array($selectedUniversitie))
                            $selectedUniversitie =[];
                    @endphp
                    <select class="select2 form-select" name="universities[]"
                        multiple="multiple">
                        @foreach ($universities as $university)
                            <option value="{{ $university->id }}" {{  in_array($university->id, $selectedUniversitie) ? 'selected' : '' }}>
                                {{ $university->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

        
            <div class="col-md-4 mt-3">
                <div class="form-grp">
                    <label for="phone">{{ __('Phone') }}</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" class="form-control" placeholder="Enter Phone">
                </div>
            </div>
            <div class="col-md-4 mt-3">
                <div class="form-grp">
                    <label for="whatapp">{{ __('whatapp') }}</label>
                    <input id="whatapp" name="whatapp" value="{{ old('whatapp') }}" class="form-control" placeholder="Enter whatapp">
                </div>
            </div>

            <div class="col-md-4 mt-3">
                <div class="form-grp">
                    <label for="whatapp">{{ __('email') }}</label>
                    <input id="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="Enter email">
                </div>
            </div>


            <div class="col-md-12">
                <div class="from-group mb-3">
                    <label class="form-file-manager-label" for="">{{ __('Thumbnail') }}
                        <code>*</code></label>
                    <div class="input-group">
                        <span class="input-group-text" id="basic-addon1">
                            <a data-input="thumbnail" data-preview="holder" class="file-manager-image">
                                <i class="fas fa-link"></i> {{ __('Choose') }}
                            </a>
                        </span>
                        <input id="thumbnail" readonly class="form-control file-manager-input" type="text" name="thumb_image">
                    </div>
                </div>
            </div>
            <!-- Description -->
            <div class="col-md-12">
                <div class="form-grp">
                    <label for="description">{{ __('Description') }}</label>
                    <textarea name="description" class="form-control text-editor" placeholder="Enter description">{{ old('description') }}</textarea>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-grp">
                    <label for="universitie_details">{{ __('Universitie Details') }}</label>
                    <textarea name="universitie_details" class="form-control text-editor" placeholder="Enter Universitie Details">{{ old('universitie_details') }}</textarea>
                </div>
            </div>

            <!-- Status -->
            <div class="col-md-12">
                <div class="form-grp">
                    <label for="status">{{ __('Status') }}</label>
                    <select name="status" class="form-control" required>
                        <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                    </select>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-grp">
                    <label for="description">
                        {{ __('Experiences') }}
                        <a  onclick="addExperience(this)" class="text-primart float-end" style="font-size: 30px;"><i class="fas fa-plus"></i></a>
                    </label>
                    
                </div>
            </div>
            
            <div class="col-md-12" id="experience-wrapper"></div>


            <div class="col-md-12">
                <div class="form-grp">
                    <label for="description">
                        {{ __('FAQ') }}
                        <a  onclick="addFaq(this)" class="text-primart float-end" style="font-size: 30px;"><i class="fas fa-plus"></i></a>
                    </label>
                    
                </div>
            </div>
            <div class="col-md-12" id="faqContainer"></div>




        </div>

        <!-- Submit Button -->
        <div class="mb-4 mt-4">
            <button type="submit" class="btn btn-primary">{{ __('Create') }}</button>
        </div>
    </form>

</div>



@endsection


@push('scripts')
<script src="{{ asset('frontend/js/default/courses.js') }}"></script>
<style>
    textarea {
        height: 100px;
    }

    .instructor__profile-form .form-grp textarea {
        min-height: 30px !important;
        max-height: 301px !important;
    }
    .select2-selection.select2-selection--multiple{
        height: auto !important;
    }
</style>


<script>
    let faqCount = 0;
    let experienceCount = 1; // Counter for experiences

    function addFaq() {
        faqCount++;
        const faqContainer = document.getElementById('faqContainer');

        const faqItem = document.createElement('div');
        faqItem.classList.add('faq-item', 'row', 'mb-3');
        faqItem.innerHTML = `
            <div class="col-md-11 mb-2"> 
                <input type="text" class="form-control" id="faq_question_${faqCount}" name="faq[${faqCount}][question]" placeholder="Enter question">
            </div>
            <div class="col-1 text-end">
                <a  onclick="removeFaq(this)" class="text-danger delete-item"><i class="fas fa-trash-alt"></i></a>
            </div>
            <div class="col-md-12 mb-2">
                <textarea class="form-control" row="3" id="faq_answer_${faqCount}" name="faq[${faqCount}][answer]" placeholder="Enter answer"></textarea>
            </div>
            
        `;
        faqContainer.appendChild(faqItem);
    }

    function removeFaq(button) {
        button.closest('.faq-item').remove();
    }

    
    function addExperience() {
      experienceCount++;
      $('#experience-wrapper').append(`
        <div class="experience-entry row mb-3">
          <div class="col-md-3">
            <!-- <label for="companyName${experienceCount}" class="form-label">Company</label> --!>
            <input type="text" class="form-control" id="companyName${experienceCount}" name="experience[${experienceCount}][company]" placeholder="Enter company name" required>
          </div>
          <div class="col-md-3">
            <!-- <label for="position${experienceCount}" class="form-label">Position</label> --!>
            <input type="text" class="form-control" id="position${experienceCount}" name="experience[${experienceCount}][position]" placeholder="Enter position" required>
          </div>
          <div class="col-md-3">
            <!-- <label for="startDate${experienceCount}" class="form-label">Start Date *</label> --!>
            <input type="date" class="form-control" id="startDate${experienceCount}" name="experience[${experienceCount}][start_date]" required>
          </div>
          <div class="col-md-2">
            <!-- <label for="endDate${experienceCount}" class="form-label">End Date *</label> --!>
            <input type="date" class="form-control" id="endDate${experienceCount}" name="experience[${experienceCount}][end_date]" required>
          </div>
          <div class="col-md-1 d-flex align-items-center">
            <a  onclick="removeExperience(this)" class="text-danger delete-item"><i class="fas fa-trash-alt"></i></a>
          </div>
        </div>
      `);
    }

    // Function to remove an experience entry
    function removeExperience(element) {
      $(element).closest('.experience-entry').remove();
    }

</script>
@endpush