@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">{{ __('Edit counselor') }}</h4>
    </div>
    <form action="{{ route('counselor.counselor.update', $model->id) }}" method="POST" class="instructor__profile-form">
        @csrf
        @method('PUT')
        <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', $model->title) }}" required class="form-control" placeholder="Enter title">
                </div>
            </div>

            <div class="col-md-12 mt-3">
                <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', $model->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', $model->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', $model->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', $model->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', $model->email) }}" class="form-control" placeholder="Enter email">
                </div>
            </div>


            <div class="col-md-12 mt-3">
                <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" value="{{ old('thumb_image',$model->thumb_image) }}" type="text" name="thumb_image">
                    </div>
                </div>
            </div>
            <!-- Description -->
            <div class="col-md-12 mt-3">
                <div class="form-grp">
                    <label for="description">{{ __('Description') }}</label>
                    <textarea name="description" class="form-control text-editor" placeholder="Enter description">{{ old('description', $model->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', $model->universitie_details) }}</textarea>
                </div>
            </div>

            <!-- Status -->
            <div class="col-md-12 mt-3">
                <div class="form-grp">
                    <label for="status">{{ __('Status') }}</label>
                    <select name="status" class="form-control" required>
                        <option value="1" {{ old('status', $model->status) == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                        <option value="0" {{ old('status', $model->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">
                @if (!empty($experience))
                    @foreach ($experience as $index => $exp)
                    


                        <div class="experience-entry row mb-3">
                        <div class="col-md-3">
                            
                            <input type="text" class="form-control" id="companyName{{ $index }}" value="{{ $exp['company'] }}" name="experience[{{ $index }}][company]" placeholder="Enter company name" required>
                        </div>
                        <div class="col-md-3">
                            
                            <input type="text" class="form-control" id="position{{ $index }}"  value="{{ $exp['position'] }}"  name="experience[{{ $index }}][position]" placeholder="Enter position" required>
                        </div>
                        <div class="col-md-3">
                            
                            <input type="date" class="form-control" id="startDate{{ $index }}"  value="{{ $exp['start_date'] }}"  name="experience[{{ $index }}][start_date]" required>
                        </div>
                        <div class="col-md-2">
                            
                            <input type="date" class="form-control" id="endDate{{ $index }}"  value="{{ $exp['end_date'] }}"  name="experience[{{ $index }}][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>


                    @endforeach
                @endif

            </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">
                @if (!empty($faqs))
                    @foreach ($faqs as $index => $faq)
                        <div class="faq-item row mb-3">
                            <div class="col-md-11 mb-2">
                                <input type="text" class="form-control" id="faq_question_{{ $index }}" name="faq[{{ $index }}][question]" value="{{ $faq['question'] }}" placeholder="Enter question">
                            </div>
                            <div class="col-1 text-end">
                                <a  onclick="removeFaq(this)" class="text-danger"><i class="fas fa-trash-alt"></i></a>
                            </div>
                            <div class="col-md-12 mb-2">
                                <textarea row="3" class="form-control" id="faq_answer_{{ $index }}" name="faq[{{ $index }}][answer]" placeholder="Enter answer">{{ $faq['answer'] }}</textarea>
                            </div>
                            <hr>
                        </div>
                    @endforeach
                @endif

            </div>




        </div>

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

@push('scripts')

<script>
    // let faqCount = 0;
    let faqCount = {{ count($faqs) }}; // Start counting based on existing FAQs
    let experienceCount = {{ count($experience) }}; // 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 row="3" class="form-control" 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">
            <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>
<style>
    textarea.form-control{
        height: auto;
        min-height: 100px !important;
    }
    .select2-selection.select2-selection--multiple{
        height: auto !important;
    }
    .delete-item{
        cursor: pointer;
    }
</style>
@endpush