@extends('layouts.dashboard')
@section('title', 'Muhamad Ndaru | Portofolio')

@section('dashboard_content')
    <!-- INTRO -->
    <div>
        <div class="intro wave-background position-relative d-flex justify-content-center align-items-center" id="home">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-4 img-intro" data-aos="fade-up">
                        <img src="{{asset('images/me.jpeg')}}" class="rounded-circle shadow" alt="Muhamad Ndaru">
                    </div>
                    <div class="col-xl-9 col-8 text-intro d-flex align-items-center" data-aos="fade-down">
                        <p>Halo, Apa Kabar!
                            <br> 
                            <a href="{{route('login')}}" class="text-i">Saya</a> <b>Muhamad Ndaru Hestiafin!</b>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- PARTICLE -->
        <div id="particles-js"></div>
        
        <div class="container">
            <!-- SHORT PROFILE -->
            <div data-aos="fade-left" id="intro">
                <div class="row">
                    <div class="col-xl-6 profile-img-display">
                        <img src="{{asset('images/4fun.png')}}" alt="For Fun">
                    </div>
                    <div class="col-xl-6 profile-text">
                        <h3 class="content-heading mb-3">Profil Singkat Tentang Saya</h3>
                        @foreach ($profiles as $profile)
                            {!! $profile->short_profile_id !!}
                        @endforeach
                    </div>
                    <div class="col-xl-6 profile-img">
                        <img src="{{asset('images/4fun.png')}}" alt="For Fun">
                    </div>
                </div>
            </div>
            
            <!-- SKILLS -->
            <div class="mt-5" id="skills">
                <div class="modal fade" id="addSkillModal" tabindex="-1" role="dialog" aria-labelledby="addSkillModal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="addSkillModal">Tambah Skill Baru</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 Apa</label>
                                        <input type="text" class="form-control" placeholder="Name" name="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Kemampuan</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="">Pilih Warna Belakang</label>
                                            <input type="color" class="form-control" placeholder="Background Color" name="background_color">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="">Pilih Warna Teks</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>

                <!-- Skills View -->
                <div class="modal fade" id="skillsView" tabindex="-1" role="dialog" aria-labelledby="skillsView" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="skillsView">Hard Skills Yang Masih Terus Saya Latih</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    @foreach ($skillsModal as $skill)
                                        <div class="col-xl-4 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>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xl-6 skills-image d-flex justify-content-center align-items-center" data-aos="fade-up">
                        <img src="{{asset('images/monitor.png')}}" alt="Monitor">
                    </div>
            
                    <div class="col-xl-6 skills-content">
                        <h3 class="content-heading mb-4" data-aos="fade-up">Hard Skills Yang Masih Terus Saya Latih</h3>
                        <div class="row">
                            @if(Auth::user())
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <a href="#" data-toggle="modal" data-target="#addSkillModal">
                                    <div class="col-md-12 py-3 skill bg-white">
                                        <i class="fas fa-plus fa-2x text-primary"></i>
                                        <p class="pt-2 text-primary font-weight-bold">SKILL BARU</p>
                                    </div>
                                </a>
                            </div>
                            @endif

                            @foreach ($skills as $skill)
                                <div class="col-xl-4 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 class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <a href="#" data-toggle="modal" data-target="#skillsView">
                                    <div class="col-md-12 py-3 skill bg-secondary">
                                        <i class="fas fa-angle-double-right fa-2x text-light"></i>
                                        <p class="pt-2 text-light font-weight-bold">LIHAT SEMUA</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- EXPERIENCE & ACHIEVEMENT -->
            <div class="my-5" id="point">
                <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)
                                @if(Auth::user())
                                <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>
                                @else
                                <li>{{$experience->experience_id}}</li>
                                @endif
                                @endforeach

                                @if(Auth::user())
                                <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>
                                @endif
                            </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)
                                @if(Auth::user())
                                <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>
                                @else
                                <li>{{$achievement->achievement_id}}</li>
                                @endif
                                @endforeach

                                @if(Auth::user())
                                <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>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
        
        <!-- FOOTER -->
        <div class="footer wave-background position-relative d-flex justify-content-center align-items-center">
            <p data-aos="zoom-in-up">
                <b>Saya Siap!!</b> 
                <br>
                Jangan ragu untuk menghubungi saya <i class="far fa-smile ml-1"></i>
                <br>
                <a href="mailto:muhamad.ndaru@gmail.com" target="_blank" class="btn btn-gmail contact-btn rounded-circle shadow" title="Gmail">
                    <i class="fas fa-envelope"></i>
                </a>
                <a href="https://api.whatsapp.com/send?phone=+6285717084803" target="_blank" class="btn btn-whatsapp contact-btn rounded-circle shadow" title="Whatsapp">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </p>
        </div>
    </div>
@endsection