@extends('admin.master_layout')
@section('title')
<title>{{ __('Create Counselor') }}</title>
@endsection
@section('admin-content')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>{{ __('Create 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">{{ __('Create 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>{{ __('Create Post') }}</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.store') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <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') == $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="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>

                                            <!-- 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') }}" required class="form-control" placeholder="Enter 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') }}" 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') }}" 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') }}" 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" 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') }}</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') }}</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') == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                                        <option value="0" {{ old('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">
                                            </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"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="text-center col-md-8 offset-md-2">
                                        <x-admin.save-button :text="__('Save')"></x-admin.save-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 = 0;
    let experienceCount = 1;

    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