@extends($activeTemplate.'layouts.master')
@section('content')
<div class="col-xl-9 ps-xl-4">
    <div class="row g-2">

        <div class="col-12">
            <h4 class="section-title text-center">Add/Update Educational Qualification</h4>
            <div class="custom--card mt-2">
                <div class="card-body p-0">
                    <div class="table-responsive--md">
                        <table class="table custom--table">
                            <thead>
                                <tr>
                                    <th>@lang('Exam/ Degree Name')</th>
                                    <th>@lang('Level Of Degree')</th>
                                    <th>@lang('Institute Name')</th>
                                    <th>@lang('Board')</th>
                                    <th>@lang('Department/ Group')</th>
                                    <th>@lang('Passing Year')</th>
                                    <th>@lang('Result')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($educations as $education)
                                    <tr>
                                        <td>{{__(@$education->exam_name)}}</td>
                                        <td>{{__(@$education->levelOfEducation->name)}}</td>
                                        <td>{{__(@$education->institute)}}</td>
                                        <td>{{__(@$education->board)}}</td>
                                        <td>{{__(@$education->department)}}</td>
                                        <td>{{__(@$education->passing_year)}}</td>
                                        <td>{{__(@$education->result)}}</td>
                                        <td>
                                            <button type="button"  data-education="{{json_encode($education->only(['id','exam_name', 'level_of_education_id','institute','passing_year','board','department','result'])) }}" 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 class="col-12 text-center">
            <button type="button" class="btn btn--base btn-sm add-btn">
                <i class="las la-plus"></i>@lang('Add more Educational Qualification')
            </button>
        </div>
    </div>
    <div class="navigator">
        <div class="left mt-4">
            <a href="{{ route('user.profile.setting') }}" class="btn btn--base btn"><i class="fas fa-angle-double-left"></i> General Information</a>
        </div>
        <div class="right mt-4">
            <a href="{{ route('user.employment.index') }}" class="btn btn--base btn">Experience <i class="fas fa-angle-double-right"></i></a>
        </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('Exam/Degree Name')</label>
                        <input type="text" name="exam_name" class="form--control" value="{{old('exam_name')}}" placeholder="@lang('e.g:SSC/HSC/B.SC.')"required>
                    </div>
                    <div class="form-group">
                        <label>@lang('Level Of Degree')</label>
                        <select class="form--control" name="level_of_education" 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('Board')</label>
                        <input type="text" name="board" class="form--control" value="{{old('board')}}">
                    </div>
                    <div class="form-group">
                        <label>@lang('Department/Group')</label>
                        <input type="text" name="department" class="form--control" value="{{old('department')}}" 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('Result')</label>
                        <input type="text" name="result" class="form--control" value="{{old('result')}}" placeholder="@lang('e.g:3.9/4 or 1st class')" required>
                    </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 Educational Qualification')")
                modal.find('select[name=level_of_education]').val(data.level_of_education_id);
                modal.find('input[name=exam_name]').val(data.exam_name);
                modal.find('input[name=institute]').val(data.institute);
                modal.find('input[name=board]').val(data.board);
                modal.find('input[name=department]').val(data.department);
                modal.find('input[name=passing_year]').val(data.passing_year);
                modal.find('input[name=result]').val(data.result);
                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 Educational Qualification')");
                modal.find('form').trigger('reset');
                modal.find('form').attr('action',action);
                modal.modal('show');
            });

        })(jQuery);

    </script>
@endpush