@extends('web.layouts.layout')

@section('container_content')
    <section class="box valign profile">
        <div class="container-fluid">
            <div class="content">
                <!-- <h3 class="title mb-5 wow fadeInUp">Profile
                    <strong class="float-right"><a href="{{route('user.editProfile')}}" class="butn small"><span>Edit</span></a>
                    </strong>
                </h3> -->
                <h3 class="title mb-5 wow fadeInUp">Profile
                    <strong class="float-right"><button type="button" data-toggle="modal" data-target="#imgModal" class="butn small"><span>Edit</span></button>
                    </strong>
                </h3>
                <div class="row">
                    @include('web.layouts.messages')
                    <div class="col-lg-9">
                        <div class="info">
                            <div class="img">
                                <img src="{{asset('assets/web/images/user.png')}}" alt="">
                            </div>
                            <div class="user-info">
                                <strong class="sub-color d-block">{{$name}}</strong>
                                <small class="sub-color d-block"></small>
                                <ul>
                                    <li><a href="{{$facebook}}"><small class="main-color"><i class="fab fa-facebook-square"></i> {{trim(parse_url($facebook)['path'] ?? '', '/') == '' ? 'Facebook' : trim(parse_url($facebook)['path'] ?? '', '/')}}</small></a></li>
                                    <li><a href="{{$twitter}}"><small class="main-color"><i class="fab fa-twitter"></i> {{trim(parse_url($twitter)['path'] ?? '', '/') == '' ? 'Twitter' : trim(parse_url($twitter)['path'] ?? '', '/')}}</small></a></li>
                                    <li><a href="{{$instagram}}"><small class="main-color"><i class="fab fa-instagram"></i> {{trim(parse_url($instagram)['path'] ?? '', '/') == '' ? 'Instagram' : trim(parse_url($instagram)['path'] ?? '', '/')}}</small></a></li>
                                </ul>
                            </div>
                            <p class="sub-color">
                                {{$about_me}}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="strength text-center">
                            <h6>Profile Strength</h6>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <p>100% Intermediate</p>
                        </div>
                    </div>
                </div>

                <div class="loops mt-5">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="items">
                                <h6>Remaining to collect</h6>
                                <ul class="countdown-date">
                                    <li><span id="days">0</span>D : </li>
                                    <li><span id="hours">0</span>H : </li>
                                    <li><span id="minutes">0</span>M : </li>
                                    <li><span id="seconds">0</span>S</li>
                                </ul>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="items">
                                <h6>Joined Loops</h6>
                                <div class="d-flex justify-content-between">
                                    <div class="cur-loops">

                                        @php
                                            $i = 0;
                                        @endphp

                                        @foreach($loops as $loopDetails)
                                            @php
                                                if(++$i > 3) break;
                                            @endphp
                                            <a href="{{ route('loops.details', [ 'loop_id'=> $loopDetails['loop_id'] ]) }}">
                                                <span>{{ date('M', strtotime($loopDetails['loop']['date'])) }}</span>
                                            </a>
                                        @endforeach
                                    </div>
                                    @if(count($loops) > 3)
                                        <div class="join-loops">
                                            <span>+({{ count($loops)-3 }})</span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="items valign">
                                <p><i class="fas fa-phone-volume"></i> {{$phone ?? '050025453'}}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </section>

@endsection

@section('container_modals')
    <!-- Modal -->
    <div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Add Image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @include('web.layouts.messages')
                <div class="modal-body">
                    <form action="{{route('user.updateProfile')}}" method="post" enctype="multipart/form-data" class="form-row update_profile_form">
                        @csrf()
                        <input type="hidden" name="id" value="{{$user->id}}">
                        <div class="form-group col-12">
                            <input type="text" class="form-control" name="name" placeholder="your name" value="{{old('name', $name)}}">
                        </div>
                        <div class="form-group col-12">
                            <input type="url" class="form-control" name="facebook_url" placeholder="facebook" value="{{old('facebook_url', $facebook)}}">
                        </div>
                        <div class="form-group col-12">
                            <input type="url" class="form-control" name="twitter_url" placeholder="twitter" value="{{old('twitter_url', $twitter)}}">
                        </div>
                        <div class="form-group col-12">
                            <input type="url" class="form-control" name="instagram_url" placeholder="instagram" value="{{old('instagram_url', $instagram)}}">
                        </div>
                        <div class="form-group col-12">
                            <input type="tel" class="form-control" name="phone" placeholder="Phone number" value="{{old('phone', $phone)}}">
                        </div>
                        <div class="form-group col-7">
                            <textarea class="form-control" rows="7" name="about_me" placeholder="about me">{{old('about_me', $about_me)}}</textarea>
                        </div>
                        <div class="form-group col-5">
                            <div class="img">
                                <img id="addImg" class="img-fluid image-product02" src="{{asset($photo) ?? asset('assets/web/images/user.png')}}" alt="">
                                <input type="file" name="photo" class="custom-file-input" id="addImg-input" />
                                <span>Click To Change Image</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="butn small update_profile_button">Done</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('container_js')
    @if($nearestEncashmentMonth)
    <script>
        $(document).ready(function () {
            // date countdown -----------------
            const second = 1000,
                minute = second * 60,
                hour = minute * 60,
                day = hour * 24,
                week = hour * 24 * 7;

            // let countDown = new Date('Nov 29, 2020 12:30:00').getTime(),
            let countDown = new Date('{{ $nearestEncashmentMonth }}').getTime(),
            x = setInterval(function() {

                let now = new Date().getTime(),
                    distance = countDown - now;

                document.getElementById('days').innerText = Math.floor(distance / (day)),
                    document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
                    document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
                    document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
            }, second)
        });
    </script>
    @endif

    <script>
        $(document).ready(function () {
            $(function() {
                $("#addImg-input").change(function() {
                    readURL1(this);
                });
            });


            function readURL1(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        //alert(e.target.result);
                        $('#addImg').attr('src', e.target.result);
                    };

                    reader.readAsDataURL(input.files[0]);
                }
            }
        })
    </script>
@endsection