@extends('layouts.user_dashboard_main')
@section('content')
<div class="content-heading1">
    <h3>Profile</h3>
</div>
@if(Session::has('success'))
<div class="alert alert-success">
    {{ Session::get('success') }}
</div>
@endif
<div class="list-container profileList_wrap">
    <ul class="profList">
        <li data-toggle="modal" data-target="#profileModal" class="profList_itm">
            <div class="prfList_cmnIcon"></div>
            <div class="prfList_cont">
                <p>Profile</p>
                <span class="arrow_icon"></span>
            </div>
        </li>
        <li data-toggle="modal" data-target="#documentModal" class="profList_itm">
            <div class="prfList_cmnIcon"></div>
            <div class="prfList_cont">
                <p>ID document</p>
                <span class="arrow_icon"></span>
            </div>
        </li>
        <li data-toggle="modal" data-target="#passwordModal" class="profList_itm">
            <div class="prfList_cmnIcon"></div>
            <div class="prfList_cont">
                <p>Change password</p>
                <span class="arrow_icon"></span>
            </div>
        </li>
    </ul>
</div>
<div class="loadingScreen">
    <div class="loaderBox"></div>
</div>

<!-- ID DOCUMENT MODAL -->
<div class="modal fade" id="documentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">ID document</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 class="form-horizontal" method="POST" action="{{ route('user-update-document') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="auth-from-box">
                        <div class="row fix-row">
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1 {{ $errors->has('country') ? ' has-error' : '' }}">
                                    <label>Country</label>
                                    <select class="form-control-s1" id="country" name="country">
                                        <option value="" selected disabled>Select</option>
                                        @if(isset($countries))
                                        @foreach($countries as $country)
                                        <option value="{{$country->id}}">{{$country->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    @if ($errors->has('country'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('country') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1 {{ $errors->has('state') ? ' has-error' : '' }}">
                                    <label>State/Province</label>
                                    <select class="form-control-s1" id="state" name="state">

                                    </select>
                                    @if ($errors->has('state'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('state') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1 {{ $errors->has('document_type') ? ' has-error' : '' }}">
                                    <label>ID type</label>
                                    <select name="document_type" id="document_type" class="form-control-s1">
                                        <option value="" selected disabled>Select</option>
                                        <option value="passport">Passport</option>
                                        <option value="driving_licence">Driving Licence</option>
                                    </select>
                                    @if ($errors->has('document_type'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('document_type') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col d-none" id="number">
                                <div class="custom-form-group-s1 {{ $errors->has('number') ? ' has-error' : '' }}">
                                    <label>Number</label>
                                    <input type="text" name="number" class="form-control-s1">
                                    @if ($errors->has('number'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('number') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col d-none" id="expiry_date">
                                <div class="custom-form-group-s1">
                                    <label>Expiration date</label>
                                    <div class="d-flex expDate_box">
                                        <div class="{{ $errors->has('year') ? ' has-error' : '' }}">
                                            <label>Year</label>
                                            <input type="number" name="year" placeholder="YYYY" class="form-control">
                                            @if ($errors->has('year'))
                                                <span class="errorMsg">
                                                    <strong>{{ $errors->first('year') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                        <div class="{{ $errors->has('month') ? ' has-error' : '' }}">
                                            <label>Month</label>
                                            <input type="number" name="month" placeholder="MM" class="form-control">
                                            @if ($errors->has('month'))
                                                <span class="errorMsg">
                                                    <strong>{{ $errors->first('month') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                        <div class="{{ $errors->has('date') ? ' has-error' : '' }}">
                                            <label>Day</label>
                                            <input type="number" name="date" placeholder="DD" class="form-control">
                                            @if ($errors->has('date'))
                                                <span class="errorMsg">
                                                    <strong>{{ $errors->first('date') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-actions-group-s1">
                                    <button type="submit" class="theme-solid-btn submit-btn">Update changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- CHANGE PASSWORD MODAL -->
<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Change password</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="text-center">Your new password must be different from previous used passwords.</div>
                <form class="form-horizontal" method="POST" action="{{ route('changePassword') }}">
                    {{ csrf_field() }}
                    <div class="auth-from-box">
                        <div class="row fix-row">
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1 {{ $errors->has('current-password') ? ' has-error' : '' }}">
                                    <label>Current Password</label>
                                    <input type="password" class="form-control-s1" placeholder="Enter Current Password" id="current-password" name="current-password" minlength="8" required>
                                    @if ($errors->has('current-password'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('current-password') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1 {{ $errors->has('new-password') ? ' has-error' : '' }}">
                                    <label>Enter New password</label>
                                    <input type="password" class="form-control-s1" placeholder="Enter New password" id="new-password" name="new-password" minlength="8" required>
                                    {{-- <div class="input-btm-text">Must be at least 8 characters.</div> --}}
                                    @if ($errors->has('new-password'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('new-password') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1 {{ $errors->has('new-password_confirmation') ? ' has-error' : '' }}">
                                    <label>Confirm New Password</label>
                                    <input type="password" class="form-control-s1" placeholder="Confirm New Password" id="new-password-confirm" name="new-password_confirmation" minlength="8" required>
                                    @if ($errors->has('new-password_confirmation'))
                                    <span class="errorMsg">
                                        <strong>{{ $errors->first('new-password_confirmation') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-actions-group-s1">
                                    <button type="submit" class="theme-solid-btn submit-btn">Update changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- PROFILE MODAL -->
<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Profile</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 class="m-form m-form--state" name="frm-profile" id="frm-profile" method="post" action="{{ route('user-profile-update') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <figure class="user_profile_image_edit">

                        <img class="image rounded-circle" id="profile_image_view" src="{{ asset('storage/profile_images/' . Auth::user()->profile_image) }}" alt="profile_image">

                        <figcaption>
                            <img src="{{ asset('frontend/assets/images/camera-icon.svg') }}">
                            <input type="file" id="profile_image" onchange="document.getElementById('profile_image_view').src = window.URL.createObjectURL(this.files[0])" name="profile_image">
                        </figcaption>
                    </figure>
                    <div class="auth-from-box">
                        <button type="button" class="edit-btn d-none"><img src="{{ asset('frontend/assets/images/ic_outline-edit.svg') }}"></button>
                        <div class="row fix-row">
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1">
                                    <div class="left-center-icon-with-right-input">
                                        <div class="left-center-icon">
                                            <img src="{{ asset('frontend/assets/images/user-circle-icon.svg') }}">
                                        </div>
                                        <div class="right-input d-flex">
                                            <label>Full Name</label>
                                            <input type="text" class="form-control-s1" id="name" name="name" disabled placeholder="Enter Full Name" value="{{ Auth::user()->name }}" required>
                                            <i class="fa fa-pencil" id="enable_name"></i>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1">
                                    <div class="left-center-icon-with-right-input">
                                        <div class="left-center-icon">
                                            <img src="{{ asset('frontend/assets/images/mail-icon.svg') }}">
                                        </div>
                                        <div class="right-input">
                                            <label>Email Address</label>
                                            <input type="text" class="form-control-s1" placeholder="Enter Email Address" value="{{ Auth::user()->email }}" disabled>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1">
                                    <div class="left-center-icon-with-right-input">
                                        <div class="left-center-icon">
                                            <img src="{{ asset('frontend/assets/images/phone-icon.svg') }}">
                                        </div>
                                        <div class="right-input">
                                            <label>Mobile Number</label>
                                            <div class="input-with-left-prefix">
                                                <span class="prefix left-prefix" disabled>{{ Auth::user()->country_code }}</span>
                                                <input type="tel" class="form-control-s1" placeholder="Enter Mobile Number" value="{{ Auth::user()->phone }}" disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-actions-group-s1">
                                        <button type="submit" class="theme-solid-btn submit-btn">Update changes
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#frm-profile").on("submit", function() {
            $(".loadingScreen").addClass('show');
        }); //submit
    }); //document ready

    $(document).ready(function() {
        $('#enable_name').click(function() {
            $('#name').removeAttr('disabled');
        });
        $('#enable_passport').click(function() {
            $('#passport').removeAttr('disabled');
        });
        $('#enable_licence').click(function() {
            $('#driving_licence').removeAttr('disabled');
        });
    });

    $(document).ready(function() {
        $("#country").change(function() {
            //alert("ok");
            let country_id = this.value;
            $.get('/get-state?country=' + country_id, function(data) {
                //console.log(data)
                $("#state").html(data);
            });

        });
    });

    $(document).ready(function() {
        $('#document_type').change(function() {
            var doc_type = $("#document_type :selected").val();
            // alert(type)
            if(doc_type == 'passport'){
                $('#number').removeClass('d-none');
                $('#expiry_date').removeClass('d-none');
            }else if(doc_type == 'driving_licence'){
                $('#number').removeClass('d-none');
                $('#expiry_date').removeClass('d-none');
            }else{
                $('#number').addClass('d-none');
                $('#expiry_date').addClass('d-none');
            }
        });
    });
</script>