@extends('layouts.account')

@section('page-title', 'Profile')

@section('css')
  <style type="text/css">
      .invalid-feedback{
          display: block;
      }
  </style>
@endsection

@section('content')
    <div class="content-wrap">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-12">
                    <a href="#" class="themeBtn mb-5">Personal Information</a>
                    <!-- Modal -->
                    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
                         aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    @foreach($user as $row)
                                    <form action="{{route('updateName', $row->id)}}" method="POST">
                                        @csrf
                                        @method('PATCH')
                                        <input type="text" name="user_name" value="{{ $row->name }}">
                                        <button type="submit" class="themeBtn pinkBtn">Submit</button>
                                    </form>
                                    @endforeach

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>


            <form action="{{route('profile.create')}}" method="post" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                @foreach($user as $row)
                    <div class="profileInfo">
                        <div class="profileImg">
                            <figure>
                                <div class="filSet">
                                    <img src="{{ !empty($row->profile->profile_image) ? asset($row->profile->profile_image) : asset('themes/front/images/team1.jpg') }}" class="rounded-circle" alt="" id="image" style="width: inherit;">
                                    <span><i class="fas fa-camera"></i>
                                        <input type="file" id="gallery_photo_add" name="profile_image" onchange="PreviewImage()" accept="image/*">
                                    </span>
                                </div>
                            </figure>
                        </div>

                        <div class="profileContent">
                            <a data-toggle="modal" class="ml-auto mr-4" data-target="#staticBackdrop" href="javascript:;">
                           <h3 id="profileName">{{$row->name}} <button type="button" onclick="openEditModal()"><i class="fal fa-edit"></i></button></h3>
                            </a>
                            <p>{{$row->profile->gender ?? ''}}</p>
                        </div>
                    </div>

                @endforeach
                        <div class="accountCard">
                            @foreach($user as $row)
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">I am:</label>
                                    <div class="col-sm-9">
{{--                                        <input type="text" class="form-control" name="gender" value="{{$row->profile->gender??''}}" placeholder="Male">--}}
                                        <select class="form-control" id="gender" name="gender" value="{{$row->profile->gender??''}}">
                                            <option  value="">All</option>
                                            <option value="Male" {{ request()->get('gender') === 'Male' ? 'selected' : '' }}>Male</option>
                                            <option value="Women" {{ request()->get('gender') === 'Women' ? 'selected' : '' }}>Women</option>
                                            <option value="other" {{ request()->get('gender') === 'other' ? 'selected' : '' }}>other</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Seeking a:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="seeking_for" class="form-control" value="{{$row->profile->seeking_for??''}}" placeholder="Women">
                                    </div>
                                </div>
{{--                                <div class="form-group row">--}}
{{--                                    @php--}}
{{--                                        $date = explode("/",$row->profile->age??'/');--}}
{{--                                    @endphp--}}
{{--                                        <label class="col-sm-3 col-form-label">Age:</label>--}}
{{--                                        <div class="col-sm-3">--}}
{{--                                            <input type="number" name="month" min="1" max="12" class="form-control" value="{{@$date[0]}}" placeholder="Month">--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-3">--}}
{{--                                            <input type="number" name="date" min="1" max="31" class="form-control" value="{{@$date[1]}}" placeholder="Day">--}}
{{--                                        </div>--}}
{{--                                        <div class="col-sm-3">--}}
{{--                                            <input type="number" name="year" min="1" class="form-control" value="{{@$date[2]}}" placeholder="Year">--}}
{{--                                        </div>--}}
{{--                                </div>--}}

                                <div class="form-group row">
                                    @php
                                        $date = explode("/",$row->profile->age??'/');
                                    @endphp
                                    <label class="col-sm-3 col-form-label">Age:</label>
                                    <div class="col-sm-3">
                                        <input type="number" id="month" name="month" min="1" max="12" class="form-control" value="{{@$date[0]}}" placeholder="Month" onchange="calculateAge()">
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="number" id="day" name="day" min="1" max="31" class="form-control" value="{{@$date[1]}}" placeholder="Day" onchange="calculateAge()">
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="number" id="year" name="year" min="1" class="form-control" value="{{@$date[2]}}" placeholder="Year" onchange="calculateAge()">
                                    </div>
                                </div>

                            <div class="form-group row">
                                <input type="hidden" id="calculated_age" name="calculated_age" >
                            </div>

                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Country:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="country" value="{{$row->profile->country??''}}" class="form-control" placeholder="United States">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">State:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="state" value="{{$row->profile->state??''}}" class="form-control" placeholder="Washington">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">City:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="city" value="{{$row->profile->city??''}}" class="form-control" placeholder="Alder">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Zip:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="zip" value="{{$row->profile->zip??''}}" class="form-control" placeholder="123-456">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Bio:</label>
                                    <div class="col-sm-9">
                                        <textarea name="bio" value="{{$row->profile->bio??''}}" class="form-control" placeholder="About Yourself"></textarea>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Facebook link:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="fb_url" value="{{$row->profile->fb_url??''}}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Twitter link:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="twt_url" value="{{$row->profile->twt_url??''}}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Instagram link:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="insta_url" value="{{$row->profile->insta_url??''}}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">linkedin link:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="linkedin_url" value="{{$row->profile->linkedin_url??''}}" class="form-control">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-5 text-right">
                            <button type="submit" class="themeBtn pinkBtn">Update</button>
                        </div>
                    </form>

                    <a href="#" class="themeBtn my-5">PROFILE QUESTIONS</a>

                    <form action="{{route('profile.question')}}" method="post">
                        @csrf
                        @method('PATCH')
                        <div class="accountCard">
                            @foreach($qst as $row)
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Love Language :</label>
                                    <div class="col-sm-9">
{{--                                        <input type="text" name="love_language" value="{{@$row->profile_qst->love_language}}" class="form-control" placeholder="Acts of service">--}}
                                        <select class="form-control" id="love_language" name="love_language" value="{{@$row->profile_qst->love_language}}">
                                            <option  selected disabled>All</option>
                                            <option value="receiving_gifts" {{ request()->get('love_language') === 'receiving_gifts' ? 'selected' : '' }}>Receiving Gifts</option>
                                            <option value="quality_time" {{ request()->get('love_language') === 'quality_time' ? 'selected' : '' }}>Quality Time</option>
                                            <option value="words_of_affirmation" {{ request()->get('love_language') === 'words_of_affirmation' ? 'selected' : '' }}>Words of Affirmation</option>
                                            <option value="acts_of_service" {{ request()->get('love_language') === 'acts_of_service' ? 'selected' : '' }}>Acts of Service</option>
                                            <option value="physical_touch" {{ request()->get('love_language') === 'physical_touch' ? 'selected' : '' }}>Physical Touch</option>
                                            <option value="physical_touch" {{ request()->get('love_language') === 'acts_of_affirmation' ? 'selected' : '' }}>Acts of Affirmation</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Religion :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="religion" value="{{@$row->profile_qst->religion}}" placeholder="Buddhist">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Seeking :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="seeking" value="{{@$row->profile_qst->seeking}}" placeholder="Not Stated">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Eye Color :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="eye_color" value="{{@$row->profile_qst->eye_color}}" placeholder="Black">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Ethnicity :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="ethnicity" value="{{@$row->profile_qst->ethnicity}}" placeholder="Caucasion">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Marital Status :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="marital_status" value="{{@$row->profile_qst->marital_status}}" placeholder="Single">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Children :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="children" value="{{@$row->profile_qst->children}}" placeholder="No">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Income :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="income" value="{{@$row->profile_qst->income}}" placeholder="Over 100K">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Body Type :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="body_type" value="{{@$row->profile_qst->body_type}}" placeholder="Average">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Smoker :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="smoker" value="{{@$row->profile_qst->smoker}}" placeholder="Yes">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Drink :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="drink" value="{{@$row->profile_qst->drink}}" placeholder="Yes">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Hair Color :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="hair_color" value="{{@$row->profile_qst->hair_color}}" placeholder="Blonde">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Employment :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="employment" value="{{@$row->profile_qst->employment}}" placeholder="Unemployed">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Education :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="education" value="{{@$row->profile_qst->education}}" placeholder="Masters">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">My Match :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="my_match" value="{{@$row->profile_qst->my_match}}" placeholder="All friendly, social, Adventurous">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Are you animal lover? :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="animal_lover" value="{{@$row->profile_qst->animal_lover}}" placeholder="Yes, I am">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">About Me :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="about_me" value="{{@$row->profile_qst->about_me}}" placeholder="Cool">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">My Interests :</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="interest" value="{{@$row->profile_qst->interest}}" placeholder="Cycling">
                                    </div>
                                </div>
                                <div class="form-group form-check row">
                                    <div class="col-sm-9 ml-auto">
                                        <input type="checkbox" name="private" class="form-check-input" id="exampleCheck1" value="1">
                                        <label class="form-check-label" for="exampleCheck1">Make these profile questions private</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-4 text-right">
                            <button type="submit" class="themeBtn pinkBtn">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function calculateAge() {

            var month = document.getElementById('month').value;
            var day = document.getElementById('day').value;
            var year = document.getElementById('year').value;

            var birthDate = new Date(year, month - 1, day);
            var today = new Date();
            var age = today.getFullYear() - birthDate.getFullYear();

            // Update the value of the hidden input field
            document.getElementById('calculated_age').value = age;
        }


    </script>

@endsection

@section('js')
    <script type="text/javascript">
        function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById('gallery_photo_add').files[0]);

            oFReader.onload = function (oFREvent) {
                document.getElementById('image').src = oFREvent.target.result;
            };
        }


    </script>
@endsection