@extends('authenticated')

@section('title', 'Dashboard')

@section('content')
            <!-- Main Content -->
            <div id="content">

                @include('commons.topbar')

                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <div class="row mb-4">
                        <div class="col-lg-10">
                            <h1 class="h3 mb-2 text-gray-800">Profile</h1>
                        </div>
                        <div class="col-lg-2">
                            <div class="text-right">
                                <button id="edit" type="button" class="btn btn-md btn-primary mb-2">Edit</button>
                                <button id="cancel" type="button" class="btn btn-md btn-secondary mb-2 hide">Cancel</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <div class="card shadow mb-4">
                                <div class="card-body">
                                    <form id="avatar" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <a href="#" id="avatar-picker"></a>
                                        @if(!is_null($user->profile->avatar))
                                        <img class="img-profile rounded-circle" src="{{ asset('storage/'.$user->profile->avatar) }}">
                                        @else
                                            <img class="img-profile rounded-circle" src="{{ mix('img/undraw_profile.svg') }}">
                                        @endif
                                            <input type="file" name="item" id="inputFile" class="form-control mt-2">
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                            <div class="card shadow mb-4" id="profile-display">
                                <div class="card-body">
                                    <h2>{{trim($user->profile->firstname.' '.$user->profile->lastname)}}</h2>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <tr>
                                                <td>Username/Email:</td><td>{{$user->email}}</td>
                                            </tr>
                                            <tr>
                                                <td>Mobile:</td><td>{{$user->profile->mobile}}</td>
                                            </tr>
                                            <tr>
                                                <td>Address:</td><td>{{$user->profile->address}}</td>
                                            </tr>
                                            <tr>
                                                <td>Role:</td><td>{{ucfirst($user->role)}}</td>
                                            </tr>
                                            <tr>
                                                <td>Receive Newsletter:</td><td>{{$user->profile->newsletter > 0 ? 'Yes' : 'No'}}</td>
                                            </tr>
                                            <tr>
                                                <td>Member since:</td><td>{{$user->created_at}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <form class="card shadow mb-4 hide" id="profile-form">
                                <div class="card-body">
                                    <h2>{{trim($user->profile->firstname.' '.$user->profile->lastname)}}</h2>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <tr>
                                                <td><label for="email">Username/Email:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control required" name="email" readonly placeholder="Email" value="{{$user->email}}">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label for="firstname">First Name:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control required" name="firstname" placeholder="John" value="{{$user->profile->firstname}}">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label for="lastname">Last Name:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control required" name="lastname" placeholder="John" value="{{$user->profile->lastname}}">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label for="mobile">Mobile:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="mobile" placeholder="6391712345678" value="{{$user->profile->mobile}}">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label for="address">Address:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <textarea class="form-control" placeholder="Put your address here." name="address">
                                                            {{trim($user->profile->address)}}
                                                        </textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label for="address">Receive Newsletter:</label></td>
                                                <td>
                                                    <div class="row">
                                                                                                                @foreach($noption as $option)
                                                            <div class="col-sm-6">
                                                                <label for="rv-{{$option}}">
                                                                    @if ($user->profile->newsletter > 0)
                                                                        <input type="radio" name="newsletter_validation" {{$option == 'yes'  ? 'checked="checked"': ''}} id="av-{{$option}}" value="{{$option}}">
                                                                    {{ ucfirst($option) }}
                                                                    @else
                                                                        <input type="radio" name="newsletter_validation" {{$option == 'no'  ? 'checked="checked"': ''}} id="av-{{$option}}" value="{{$option}}">
                                                                    {{ ucfirst($option) }}
                                                                    @endif
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr><td colspan="2"><strong>Leave blank if you're not updating this.</strong></td></tr>
                                            <tr>
                                                <td><label for="password">Password:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="password" class="form-control" name="password" placeholder="">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label for="password_confirmation">Confirm Password:</label></td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="password" class="form-control" name="password_confirmation" placeholder="">
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <button type="submit" class="btn btn-lg btn-success btn-lg">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- End of Main Content -->
            @include('commons.modal', ['modal_id'=>'user-modal', 'save_btn_classes' => 'save-user'])

@endsection
@section('modulescript')
    @parent

    <script type="text/javascript" src="{{ mix('/js/modules/profile.js') }}"></script>
@endsection