@extends('layouts.app')

@section('style')
<style>
.form-group .input-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1c2437;
    text-transform: uppercase;
    display: block;
}
.tab-btn{
    margin-top:10px;
}
</style>
@endsection

@section('sub-header')


@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            @if(session('alert-green'))
                <div  id="mydiv" class="alert alert-success mt-3 text-center">
                    {{ session('alert-green') }}
                </div>
            @endif

            @if(session('alert-danger'))
                <div id="mydiv" class="alert alert-danger mt-3 text-center">
                    {{ session('alert-danger') }}
                </div>
            @endif
            @if($errors->any())
                <div id="mydiv" class="row">
                    <div class="col-md-12 mb-5">
                        @foreach ($errors->all() as $error)
                        <div class="text-danger small mb-1">* {{$error}}</div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-lg-10 mx-auto"> 
            <div class="profile_update">
                <form id="wrapped" method="POST" action="{{ route('employee.updateEmployee', ['id' => $user->id]) }}" enctype="multipart/form-data">
                @csrf
                    @include('Employment::form.employee-form')
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">

    $(document).ready(function () { 
        
        $('.hide_bkash').hide();
        
        $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        var activeTab = localStorage.getItem('activeTab');
        if(activeTab){
            $('#myTab a[href="' + activeTab + '"]').tab('show');
        }
        
        setTimeout(function() {
            $('#mydiv').fadeOut('fast');
        }, 3000);

    });

    $(document).on('change', "#payment_method", function (e) {
        e.preventDefault();
        let val = $('#payment_method').val();
        if(val == 'Bkash'){
            $('.hide_bkash').show();
            $('.hide_bank').hide();
        }
        else{
            $('.hide_bank').show();
            $('.hide_bkash').hide();
        }
    });

 //Experience
    var count = 1;
    $(document).on('click', "#more_company_btn", function (e) {
        e.preventDefault();
        var html = '';
        html = html +
            '<tr id="loaded_tr_' + count + '">' +
            '<td><input   type="text"  name="company_name[]" class="form-control"></td>' +
            '<td><input type="text"  name="job_title[]" class="form-control"></td>' +
            '<td><input type="date"  name="from_date[]" class="form-control "></td>' +
            '<td><input  type="date"  name="to_date[]" class="form-control  "></td>' +
            '<td><textarea  name="remarks[]" class="form-control"></textarea></td>' +
            '<td><button onclick="remove_job(' + count + ')" class="btn btn-danger pull-right"><i class="fa fa-trash"></i></button></td>' +
            '</tr>';
        count++;
        $('#load_company_table').append(html);
    });
    function remove_job(id) {
        event.preventDefault();
        id = '#loaded_tr_' + id;
        $(id).remove();
    }

    function remove_experience(id){
        $.ajax({
            type: "POST",
            url: '{{ url("employee/experience/destroy")}}/'+id, // This is what I have updated
            data: {
                "_token": "{{ csrf_token() }}"
                }
            
        }).done(function( msg ) {
            location.reload();
        });
    }

    //education
    var count_2 = 1;
    $(document).on('click', "#more_education_btn", function (e) {
        e.preventDefault();
        var html = '';
        html = html +
            '<tr id="loaded_edu_tr_' + count_2 + '">' +
            '<td><input   type="text"  name="education_level[]" class="form-control"></td>' +
            '<td><input   type="text"  name="year[]" class="form-control"></td>' +
            '<td><input   type="text"  name="result[]" class="form-control"></td>' +
            '<td><input   type="text"  name="institution[]" class="form-control"></td>' +
            '<td><button onclick="remove_education(' + count_2 + ')" class="btn btn-danger pull-right"><i class="fa fa-trash"></i></button></td>' +
            '</tr>';
        count_2++;
        $('#load_education_table').append(html);
    });
    
    function remove_education(id) {
        event.preventDefault();
        id = '#loaded_edu_tr_' + id;
        $(id).remove();
    }

    function remove_education_data(id){
        //alert(id);
        $.ajax({
            type: "POST",
            url: '{{ url("employee/education/destroy")}}/'+id, // This is what I have updated
            data: {
                "_token": "{{ csrf_token() }}"
                }
            
        }).done(function( msg ) {
            location.reload();
        });
    }

    $( ".date_of_birth" ).datepicker({
          dateFormat: "yy-mm-dd",
          changeMonths: "true",
          changeYear: "true"
        });
    
</script>
@endsection