@extends($activeTemplate.'layouts.master')
@section('content')
<div class="col-xl-9 ps-xl-4">
    <div class="row g-2">
        <div class="col-12 text-end">
            <button type="button" class="btn btn--base-outline btn-sm add-btn">
                <i class="las la-plus"></i>@lang('Add New')
            </button>
        </div>
        <div class="col-12">
            <div class="custom--card">
                <div class="card-body p-0">
                    <div class="table-responsive--md">
                        <table class="table custom--table">
                            <thead>
                                <tr>
                                    <th>@lang('Level Of Education')</th>
                                    <th>@lang('Passing Year')</th>
                                    <th>@lang('Exam/Degree')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($educations as $education)
                                    <tr>
                                        <td>{{__(@$education->levelOfEducation->name)}}</td>
                                        <td>{{__(@$education->passing_year)}}</td>
                                        <td>{{__(@$education->degree->name)}}</td>
                                        <td>
                                            <button type="button"  data-education="{{json_encode($education->only(['id','level_of_education_id','institute','passing_year','degree_id'])) }}" class="btn btn--success-outline btn-sm edit-btn">
                                                <i class="las fa-pencil-alt"></i> @lang('Edit')
                                            </button>
                                            <button type="button" class="btn btn--danger-outline btn-sm confirmationBtn"
                                                data-question="@lang('Are you sure to delete this educational qualification')"
                                                data-action="{{ route('user.education.delete',$education->id) }}">
                                                <i class="las la-trash-alt"></i> @lang('Delete')
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-muted text-center" colspan="100%">@lang('No data found')</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start Education Qualification -->
<div class="modal fade custom--modal" id="education-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{route('user.education.store')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>@lang('Level Of Education')</label>
                        <select class="form--control" name="level_id" required>
                            <option value="" selected disabled>@lang('Select One')</option>
                            @foreach($levels as $level)
                                <option value="{{$level->id}}">{{__($level->name)}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>@lang('Institute Name')</label>
                        <input type="text" name="institute" class="form--control" value="{{old('Institute')}}" required>
                    </div>
                    <div class="form-group">
                        <label>@lang('Passing Year')</label>
                        <input type="text" name="passing_year" class="form--control" value="{{old('passing_year')}}" placeholder="@lang('e.g:2020')" required>
                    </div>
                    <div class="form-group">
                        <label>@lang('Exam/Degree')</label>
                        <select class="form--control" name="degree" required>
                            <option selected disabled value="">@lang('Select One')</option>
                            @foreach($degrees as $degree)
                                <option value="{{$degree->id}}">{{__($degree->name)}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>
<x-confirmation-modal/>
@endsection

@push('script')
    <script>
        "use strict";
        (function ($) {

            let modal=$('#education-modal');

            $('.edit-btn').on('click', function(){
                let action = "{{route('user.education.store',':id')}}"
                let data   = $(this).data('education');

                modal.find('.modal-title').text("@lang('Update Education Qualification')")
                modal.find('select[name=level_id]').val(data.level_of_education_id);
                modal.find('input[name=institute]').val(data.institute);
                modal.find('input[name=passing_year]').val(data.passing_year);
                modal.find('select[name=degree]').val(data.degree_id);
                modal.find('form').attr('action',action.replace(':id',data.id))
                modal.modal('show');
            });

            $('.add-btn').on('click',function(e){
                let action = "{{route('user.education.store')}}";
                modal.find('.modal-title').text("@lang('Add Education Qualification')");
                modal.find('form').trigger('reset');
                modal.find('form').attr('action',action);
                modal.modal('show');
            });

        })(jQuery);

    </script>
@endpush