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

@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>Hello There,
                            <br> 
                            <a href="{{route('login')}}" class="text-i">I'm</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">Short Profile About Me</h3>
                        @foreach ($profiles as $profile)
                            {!! $profile->short_profile_en !!}
                        @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">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>

                <!-- 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 That I Still Continue To Practice</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 That I Still Continue To Practice</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">NEW SKILL</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">VIEW MORE</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- EXPERIENCE & ACHIEVEMENT -->
            <div class="my-5" id="point">
                <!-- Add Experience Modal -->
                <div class="modal fade" id="experienceAddModal" tabindex="-1" role="dialog" aria-labelledby="experienceAddModal" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="experienceAddModal">New Experience</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.storeExperienceEn')}}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="">What Experience</label>
                                        <input type="text" class="form-control" name="experience_en" placeholder="Type here...">
                                    </div>

                                    <button type="submit" class="btn btn-primary btn-sm px-4">Save</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add Achievement Modal -->
                <div class="modal fade" id="achievementAddModal" tabindex="-1" role="dialog" aria-labelledby="achievementAddModal" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="achievementAddModal">New Achievement</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.storeAchievementEn')}}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="">What achievement</label>
                                        <input type="text" class="form-control" name="achievement_en" placeholder="Type here...">
                                    </div>

                                    <button type="submit" class="btn btn-primary btn-sm px-4">Save</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <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}}</li>
                                @endforeach
                                @if(Auth::user())
                                <li data-toggle="modal" data-target="#experienceAddModal" class="cursor-pointer"><i class='fas fa-plus mr-2'></i>New Experience</li>
                                @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> My Achievement</p>
                            <ul>
                                @foreach ($achievements as $achievement)
                                    <li>{{$achievement->achievement_en}}</li>
                                @endforeach
                                @if(Auth::user())
                                <li data-toggle="modal" data-target="#achievementAddModal" class="cursor-pointer"><i class='fas fa-plus mr-2'></i>New Achievement</li>
                                @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>I'm Ready!!</b> 
                <br>
                Feel free to contact me <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