@extends('layouts.dashboard')
@section('title', 'Edit Your Web')

@section('dashboard_content')
<div class="container">
    <!-- PROFILES -->
    <div id="intro" class="mb-5">
        <h1 class="content-heading">Your Profile</h1>
        <ul class="nav nav-tabs mb-2" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">EN</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">ID</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                @if($profiles->count() == null)
                    <form action="{{route('content.storeProfileEn')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <textarea name="short_profile_en" cols="30" rows="10" class="form-control"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm px-4">Save</button>
                    </form>
                @else
                    <form action="{{route('content.updateProfileEn', Auth::user()->id)}}" method="post">
                        @method('patch')
                        @csrf
                        <div class="form-group">
                            @foreach ($profiles as $profile)
                                <textarea name="short_profile_en" cols="30" rows="10" class="form-control">{{$profile->short_profile_en}}</textarea>
                            @endforeach
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm px-4">Save</button>
                    </form>
                @endif
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                @if($profiles->count() == null)
                <form action="{{route('content.storeProfileId')}}" method="post">
                    @csrf
                    <div class="form-group">
                        <textarea name="short_profile_id" cols="30" rows="10" class="form-control"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Simpan</button>
                </form>
                @else
                <form action="{{route('content.updateProfileId', Auth::user()->id)}}" method="post">
                    @method('patch')
                    @csrf
                    <div class="form-group">
                        @foreach ($profiles as $profile)
                            <textarea name="short_profile_id" cols="30" rows="10" class="form-control">{{$profile->short_profile_id}}</textarea>
                        @endforeach
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Simpan</button>
                </form>
                @endif
            </div>
        </div>
    </div>

    <!-- SKILLS -->
    <div id="skills" class="mb-5">
        <h1 class="content-heading">Your Skill</h1>
        <div class="modal fade" id="addSkillModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add New Skill</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('content.storeSkill')}}" method="post">
                            @csrf
                            <div class="form-group">
                                <label for="">Skill Name</label>
                                <input type="text" class="form-control" placeholder="Name" name="name">
                            </div>
                            <div class="form-group">
                                <label for="">Ability</label>
                                <input type="text" class="form-control" placeholder="Ability" name="ability">
                            </div>
                            <div class="form-group">
                                <label for="">Icon</label>
                                <input type="text" class="form-control" placeholder="Icon" name="icon">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label for="">Select Background</label>
                                    <input type="color" class="form-control" placeholder="Background Color" name="background_color">
                                </div>
                                <div class="form-group col-6">
                                    <label for="">Select Color</label>
                                    <input type="color" class="form-control" placeholder="Text Color" name="text_color">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-2 col-4 skill-spacing" data-aos="flip-left">
                <a href="#" data-toggle="modal" data-target="#addSkillModal">
                    <div class="col-md-12 py-3 skill">
                        <i class="fas fa-plus fa-2x text-primary"></i>
                        <p class="pt-2 text-primary font-weight-bold">NEW SKILL</p>
                    </div>
                </a>
            </div>
            @foreach ($skills as $skill)
                <div class="col-xl-2 col-4 skill-spacing" data-aos="flip-left">
                    <div class="col-md-12 py-3 skill" style="background: {{$skill->background_color}};color: {{$skill->text_color}};">
                        <i class="{{$skill->icon}} fa-2x"></i>
                        <p class="pt-2">{{$skill->name}} @if($skill->ability != null) ({{$skill->ability}}) @endif</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- EXPERIENCE & ACHIEVEMENT -->
    <div id="point" class="mb-5">
        <h1 class="content-heading">Your Experience & Achievement</h1>
        <nav class="mb-2">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">EN</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">ID</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="row">
                    <div class="col-xl-6 point-spacing" data-aos="fade-up">
                        <div class="col-md-12 point experience">
                            <p class="mb-3"><i class="fas fa-paper-plane mr-2"></i> My Experiences</p>
                            <ul>
                                @foreach ($experiences as $experience)
                                <li>{{$experience->experience_en}} <span data-toggle="collapse" data-target="#experienceEditCollapse{{$experience->id}}" aria-expanded="false" aria-controls="experienceEditCollapse{{$experience->id}}" class="cursor-pointer font-weight-bold"><i class="fas fa-pencil-alt ml-2"></i></span></li>
                                <div class="collapse" id="experienceEditCollapse{{$experience->id}}">
                                    <form action="{{route('content.updateExperienceEn', $experience->id)}}" method="post">
                                        @csrf
                                        @method('patch')
                                        <div class="form-row">
                                            <div class="form-group col-10">
                                                <input type="text" class="form-control" name="experience_en" placeholder="What experience..." value="{{$experience->experience_en}}">
                                            </div>
                                            <div class="form-group col-2">
                                                <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                @endforeach
                                <li data-toggle="collapse" data-target="#experienceCollapse" aria-expanded="false" aria-controls="experienceCollapse" class="cursor-pointer font-weight-bold"><i class='fas fa-plus mr-2'></i>New Experience</li>
                                <div class="collapse" id="experienceCollapse">
                                    <form action="{{route('content.storeExperienceEn')}}" method="post">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-10">
                                                <input type="text" class="form-control" name="experience_en" placeholder="What experience...">
                                            </div>
                                            <div class="form-group col-2">
                                                <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-6 point-spacing" data-aos="fade-down">
                        <div class="col-md-12 point achievement">
                            <p class="mb-3"><i class="fas fa-trophy mr-2"></i> My Achievements</p>
                            <ul>
                                @foreach ($achievements as $achievement)
                                    <li>{{$achievement->achievement_en}} <span data-toggle="collapse" data-target="#achievementEditCollapse{{$achievement->id}}" aria-expanded="false" aria-controls="achievementEditCollapse{{$achievement->id}}" class="cursor-pointer font-weight-bold"><i class="fas fa-pencil-alt ml-2"></i></span></li>
                                    <div class="collapse" id="achievementEditCollapse{{$achievement->id}}">
                                        <form action="{{route('content.updateAchievementEn', $achievement->id)}}" method="post">
                                            @csrf
                                            @method('patch')
                                            <div class="form-row">
                                                <div class="form-group col-10">
                                                    <input type="text" class="form-control" name="achievement_en" placeholder="What achievement..." value="{{$achievement->achievement_en}}">
                                                </div>
                                                <div class="form-group col-2">
                                                    <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                @endforeach
                                <li data-toggle="collapse" data-target="#achievementCollapse" aria-expanded="false" aria-controls="achievementCollapse" class="cursor-pointer font-weight-bold"><i class='fas fa-plus mr-2'></i>New Achievement</li>
                                <div class="collapse" id="achievementCollapse">
                                    <form action="{{route('content.storeAchievementEn')}}" method="post">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-10">
                                                <input type="text" class="form-control" name="achievement_en" placeholder="What achievement...">
                                            </div>
                                            <div class="form-group col-2">
                                                <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="row">
                    <div class="col-xl-6 point-spacing" data-aos="fade-up">
                        <div class="col-md-12 point experience">
                            <p class="mb-3"><i class="fas fa-paper-plane mr-2"></i> Pengalaman Saya</p>
                            <ul>
                                @foreach ($experiences as $experience)
                                <li>{{$experience->experience_id}} <span data-toggle="collapse" data-target="#experienceEditCollapse{{$experience->id}}" aria-expanded="false" aria-controls="experienceEditCollapse{{$experience->id}}" class="cursor-pointer font-weight-bold"><i class="fas fa-pencil-alt ml-2"></i></span></li>
                                <div class="collapse" id="experienceEditCollapse{{$experience->id}}">
                                    <form action="{{route('content.updateExperienceId', $experience->id)}}" method="post">
                                        @csrf
                                        @method('patch')
                                        <div class="form-row">
                                            <div class="form-group col-10">
                                                <input type="text" class="form-control" name="experience_id" placeholder="Pengalaman apaan..." value="{{$experience->experience_id}}">
                                            </div>
                                            <div class="form-group col-2">
                                                <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                @endforeach
                                <li data-toggle="collapse" data-target="#experienceCollapse" aria-expanded="false" aria-controls="experienceCollapse" class="cursor-pointer font-weight-bold"><i class='fas fa-plus mr-2'></i>Pengalaman Baru</li>
                                <div class="collapse" id="experienceCollapse">
                                    <form action="{{route('content.storeExperienceId')}}" method="post">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-10">
                                                <input type="text" class="form-control" name="experience_id" placeholder="Pengalaman apaan...">
                                            </div>
                                            <div class="form-group col-2">
                                                <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-6 point-spacing" data-aos="fade-down">
                        <div class="col-md-12 point achievement">
                            <p class="mb-3"><i class="fas fa-trophy mr-2"></i> Prestasi Saya</p>
                            <ul>
                                @foreach ($achievements as $achievement)
                                    <li>{{$achievement->achievement_id}} <span data-toggle="collapse" data-target="#achievementEditCollapse{{$achievement->id}}" aria-expanded="false" aria-controls="achievementEditCollapse{{$achievement->id}}" class="cursor-pointer font-weight-bold"><i class="fas fa-pencil-alt ml-2"></i></span></li>
                                    <div class="collapse" id="achievementEditCollapse{{$achievement->id}}">
                                        <form action="{{route('content.updateAchievementId', $achievement->id)}}" method="post">
                                            @csrf
                                            @method('patch')
                                            <div class="form-row">
                                                <div class="form-group col-10">
                                                    <input type="text" class="form-control" name="achievement_id" placeholder="Penghargaan apaan..." value="{{$achievement->achievement_id}}">
                                                </div>
                                                <div class="form-group col-2">
                                                    <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                @endforeach
                                <li data-toggle="collapse" data-target="#achievementCollapse" aria-expanded="false" aria-controls="achievementCollapse" class="cursor-pointer font-weight-bold"><i class='fas fa-plus mr-2'></i>Penghargaan Baru</li>
                                <div class="collapse" id="achievementCollapse">
                                    <form action="{{route('content.storeAchievementId')}}" method="post">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-10">
                                                <input type="text" class="form-control" name="achievement_id" placeholder="Penghargaan apaan...">
                                            </div>
                                            <div class="form-group col-2">
                                                <button type="submit" class="btn btn-light w-100"><i class="fas fa-save"></i></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </div>
</div>
@endsection

@section('jsExternalAdd')
<script>
    CKEDITOR.replace('short_profile_en');
    CKEDITOR.replace('short_profile_id');
</script>
@endsection