@extends('layouts.frontend.user_master')
@section('title', 'User Dashbaord')

@section('css')
@endsection

@section('script')

    <script>
        $(document).ready(function(){
            $('.submitBtn').hide();
            $('.ppSubmitBtn').hide();
            $('.input_fields').hide();
            setTimeout(() => { 
             $('.nice-select').remove();
            }, 200);
            $('#imageUpload').on('change', function(){
                $('.ppSubmitBtn').show();
            });
            $('.edit_user_info').on('click', function() {
                var $ul = $(this).closest('.user-info-card').find('ul');
                $ul.find('input').prop('disabled', false);
                $(this).closest('.user-info-card').find('.submitBtn').show();
                $(this).closest('.user-info-card').find('.input_fields').show();
                $(this).closest('.user-info-card').find('.span_fields').hide();
            });
        });
    </script>
@endsection

@section('content')
    <!-- inner-hero-section start -->
    <div class="inner-hero-section style--five">
    </div>
    <!-- inner-hero-section end -->

    <!-- user section start -->
    <div class="mt-minus-150 pb-120">
        <div class="container">
            <div class="row">
                @php
                    $languages = app('bmf')->getLanguages();
                    $timezones = app('bmf')->getTimeZones();
                @endphp

                @include('application.user.side_nav')
                    <div class="col-lg-8 mt-lg-0 mt-5">
                        <form action="{{route('frontend.user.update-info')}}" enctype="multipart/form-data" method="post">
                            <input type="hidden" name="id" value="{{$user->id}}"/>
                            @csrf
                            <div class="user-info-card">
                                <div class="user-info-card__header">
                                    <h3 class="user-info-card__title">Personal Details</h3>
                                    <button type="button" class="edit_user_info"><i class="far fa-edit"></i> Edit</button>
                                </div>
                                <ul class="user-info-card__list">
                                    <li>
                                        <span class="caption">Name</span>
                                        <span class="value span_fields">{{$user?->name}}</span>
                                        <input type="text" class="value input_fields" name="user[name]" value="{{$user?->name}}" disabled>
                                        <!-- <span class="value">{{$user->name}}</span> -->
                                    </li>
                                    <li>
                                        <span class="caption">Date of Birth</span>
                                        <span class="value span_fields">{{$user?->additional_info?->dob}}</span>
                                        <input type="date" class="value input_fields" name="additional[dob]" value="{{$user?->additional_info?->dob}}" disabled>
                                        <!-- <span class="value">15-03-1974</span> -->
                                    </li>
                                    <li>
                                        <span class="caption">Address</span>
                                        <span class="value span_fields">{{$user?->additional_info?->address}}</span>
                                        <input type="text" class="value input_fields" name="additional[address]" value="{{$user?->additional_info?->address}}" disabled>
                                        <!-- <span class="value">8198 Fieldstone Dr.La Crosse, WI 54601</span> -->
                                    </li>
                                </ul>
                                <div class="user-info-card__header">
                                    <button type="submit" class="cmn-btn style--three btn--sm submitBtn">Submit</button>
                                </div>
                            </div><!-- user-info-card end -->
                            <div class="user-info-card">
                                <div class="user-info-card__header">
                                    <h3 class="user-info-card__title">Account Settings</h3>
                                    <button type="button" class="edit_user_info"><i class="far fa-edit"></i> Edit</button>
                                </div>
                                <ul class="user-info-card__list">
                                    <li>
                                        <span class="caption">Language</span>
                                        <span class="value span_fields">{{$languages[$user?->additional_info?->language] ?? ''}}</span>
                                        <select class="input_fields value" name="additional[language]">
                                            <option>Select Language</option>
                                            @foreach($languages as $key => $language)
                                                <option value={{$key}} {{$user?->additional_info?->language==$key?'selected':''}}>{{$language}}</option>
                                            @endforeach
                                        </select>
                                    </li>
                                    <li>
                                        <span class="caption">Time Zone</span>
                                        <span class="value span_fields">{{$timezones[$user?->additional_info?->timezone] ?? ''}}</span>
                                        <select class="input_fields value" name="additional[timezone]">
                                            <option>Select Timezone</option>
                                            @foreach($timezones as $key => $timezone)
                                                <option value={{$key}} {{$user?->additional_info?->timezone==$key?'selected':''}}>{{$timezone}}</option>
                                            @endforeach
                                        </select>
                                        <!--  -->
                                    </li>
                                    <li>
                                        <span class="caption">Status</span>
                                        <span class="value status-{{$user->status==1?'active':'inactive'}}">{{$user->status==1?'Active':'In active'}}</span>
                                        <!-- <input type="text" class="value input_fields" name="status" value="{{$user->name}}" disabled> -->
                                    </li>
                                </ul>
                                <div class="user-info-card__header">
                                    <button type="submit" class="cmn-btn style--three btn--sm submitBtn">Submit</button>
                                </div>
                            </div><!-- user-info-card end -->
                            <div class="user-info-card">
                                <div class="user-info-card__header">
                                    <h3 class="user-info-card__title">Email Addresses</h3>
                                    <button type="button" class="edit_user_info"><i class="far fa-edit"></i> Edit</button>
                                </div>
                                <ul class="user-info-card__list">
                                    <li>
                                        <span class="caption">Email</span>
                                        <span class="value span_fields">{{$user?->email}}</span>
                                        <input type="text" class="value input_fields" name="language" value="{{$user?->email}}" disabled>
                                    </li>
                                </ul>
                                <div class="user-info-card__header">
                                    <button type="submit" class="cmn-btn style--three btn--sm submitBtn">Submit</button>
                                </div>
                            </div><!-- user-info-card end -->
                            <div class="user-info-card">
                                <div class="user-info-card__header">
                                    <h3 class="user-info-card__title">Phone</h3>
                                    <button type="button" class="edit_user_info"><i class="far fa-edit"></i> Edit</button>
                                </div>
                                <ul class="user-info-card__list">
                                    <li>
                                        <span class="caption">Mobile</span>
                                        <span class="value span_fields">{{$user?->additional_info?->phone}}</span>
                                        <input type="text" class="value input_fields" name="additional[phone]" value="{{$user?->additional_info?->phone}}" disabled>
                                    </li>
                                </ul>
                                <div class="user-info-card__header">
                                    <button type="submit" class="cmn-btn style--three btn--sm submitBtn">Submit</button>
                                </div>
                            </div><!-- user-info-card end -->
                            <div class="user-info-card">
                                <div class="user-info-card__header">
                                    <h3 class="user-info-card__title">Security</h3>
                                    <button type="button" class="edit_user_info"><i class="far fa-edit"></i> Edit</button>
                                </div>
                                <ul class="user-info-card__list">
                                    <li>
                                        <span class="caption">Password</span>
                                        <span class="value span_fields user-password">***************</span>
                                        <input type="text" class="value input_fields" name="user[password]" disabled>
                                    </li>
                                </ul>
                                <div class="user-info-card__header">
                                    <button type="submit" class="cmn-btn style--three btn--sm submitBtn">Submit</button>
                                </div>
                            </div><!-- user-info-card end -->
                        </form>
                    </div>
            </div>
        </div>
    </div>
    <!-- user section end -->
@endsection

@section('script')
@endsection