@extends('admin.master_layout')
@section('title')
<title>{{ __('Edit Counselor ') }}</title>
@endsection
@section('admin-content')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>{{ __('Edit Counselor Ad') }}</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                </div>
                <div class="breadcrumb-item active"><a href="{{ route('admin.counselor.index') }}">{{ __('Counselor List') }}</a>
                </div>
                <div class="breadcrumb-item">{{ __('Edit Counselor') }} </div>
            </div>
        </div>

        <div class="section-body">
            <div class="mt-4 row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h4>{{ __('Edit Counselor Ad') }}</h4>
                            <div>
                                <a href="{{ route('admin.counselor.index') }}" class="btn btn-primary"><i
                                        class="fa fa-arrow-left"></i>{{ __('Back') }}</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.counselor.update', $model->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                <div class="row">
                                    <div class="form-group col-md-8 offset-md-2">

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="user_id">{{ __('Counselor') }}</label>
                                                    <select name="user_id" class="form-control" required>
                                                        <option value="">{{ __('Select Company') }}</option>
                                                        @foreach($company as $category)
                                                        <option value="{{ $category->id }}" {{ old('user_id',$model->user_id) == $category->id ? 'selected' : '' }}>
                                                            {{ $category->company_name ? $category->company_name : $category->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-12 mt-3">
                                                <div class="form-group">
                                                    <label for="user_id">{{ __('Counselor') }}</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="form-group 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>

                                            <!-- Title -->
                                            <div class="col-md-12 mt-3">
                                                <div class="form-group">
                                                    <label for="title">{{ __('Title') }}</label>
                                                    <input type="text" name="title" value="{{ old('title', $model->title) }}" required class="form-control" placeholder="Enter internship title">
                                                </div>
                                            </div>

                                            <!-- Phone -->
                                            <div class="col-md-4  mt-3">
                                                <div class="form-group">
                                                    <label for="Phone">{{ __('Phone') }}</label>
                                                    <input type="text" name="phone" value="{{ old('phone', $model->phone) }}" class="form-control" placeholder="Phone">
                                                </div>
                                            </div>

                                            <!-- whatapp -->
                                            <div class="col-md-4  mt-3">
                                                <div class="form-group">
                                                    <label for="whatapp">{{ __('Whatapp') }}</label>
                                                    <input type="text" name="whatapp" value="{{ old('whatapp', $model->whatapp) }}" class="form-control" placeholder="Whatapp">
                                                </div>
                                            </div>

                                            <!-- Email -->
                                            <div class="col-md-4  mt-3">
                                                <div class="form-group">
                                                    <label for="email">{{ __('Email') }}</label>
                                                    <input type="text" name="email" value="{{ old('email', $model->email) }}" class="form-control" placeholder="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-group">
                                                    <label for="description">{{ __('Description') }}</label>
                                                    <textarea name="description" class="form-control  summernote" cols="30" rows="10" placeholder="Enter description">{{ old('description', $model->description) }}</textarea>
                                                </div>
                                            </div>


                                            <div class="col-md-12  mt-3">
                                                <div class="form-group">
                                                    <label for="universitie_details">{{ __('Universitie Details') }}</label>
                                                    <textarea name="universitie_details" class="form-control  summernote" cols="30" rows="10" placeholder="Enter Universitie Details">{{ old('universitie_details', $model->universitie_details) }}</textarea>
                                                </div>
                                            </div>

                                            <!-- Status -->
                                            <div class="col-md-12  mt-3">
                                                <div class="form-group">
                                                    <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 mt-3">
                                                <div class="form-group">
                                                    <label for="description" style="width: 100%;">
                                                        {{ __('Experiences') }}
                                                        <a  onclick="addExperience(this)" class="text-primart float-end"  style="font-size:30px;float: right;cursor: pointer;">
                                                            <i class="fas fa-plus" style="font-size:30px;"></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 mt-3">
                                                <div class="form-group">
                                                    <label for="description" style="width: 100%;">
                                                        {{ __('FAQ') }}
                                                        <a onclick="addFaq(this)" class="text-primart float-end" style="font-size:30px;float: right;cursor: pointer;">
                                                            <i class="fas fa-plus" style="font-size:30px;"></i>
                                                        </a>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-12 mt-3" 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>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="text-center col-md-8 offset-md-2">
                                        <x-admin.update-button :text="__('Update')"></x-admin.update-button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection


@push('js')

<script>
    $(document).ready(function() {
        $('#skills').select2({
            tags: true, // Allow users to add new items
            placeholder: 'Select qualifications',
            allowClear: true
        });
    });
</script>
<style>
    textarea {
        height: 100px;
    }

    .instructor__profile-form .form-group textarea {
        min-height: 30px !important;
        max-height: 301px !important;
    }
</style>


<script>
    let faqCount = {{ count($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 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">
            <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