@extends('layouts.main')

@section('title', 'Manage user profile')

@section('css')

@endsection

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')

    <div class="main-body">
        <div class="page-wrapper">
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <div class="page-header">

                <div class="page-header-title">
                    <h3>Profile</h3>
                </div>

                <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="{{ url('property/'.Session::get('property_id').'/dashboard') }}">
                                <i class="icofont icofont-home"></i>
                            </a>
                        </li>
                        {{--<li class="breadcrumb-item"><a href="#!">Users</a>--}}
                        {{--</li>--}}
                        <li class="breadcrumb-item"><a href="">Profile</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /.box-header -->

            <div class="row">

                <div class="col-md-6">

                    <div class="box-header">
                        <h4 class="box-title">Your Properties</h4>
                    </div><!-- /.box-header -->

                    <table class="table table-bordered table-striped">
                        <tr>
                            <td><b>Property Name </b></td>
                            <td><b>Property ID </b></td>
                        </tr>
                        @foreach( $properties as $property )
                            <tr>
                                <td>{{ $property->actual_name }}</td>
                                <td>{{ $property->five_digit_property_id }}</td>
                            </tr>
                        @endforeach
                    </table>

                </div>


                <div class="col-md-6">
                    @if(Auth::user()->account_number)
                        <div class="box-header">
                            <h4 class="box-title">Bank Details</h4>
                        </div><!-- /.box-header -->

                        <table class="table table-bordered table-striped">
                            <tr>
                                <td><b>Account Name</b></td>
                                <td>{{ Auth::user()->account_name }}</td>
                            </tr>
                            <tr>
                                <td><b>Account Number</b></td>
                                <td>{{ Auth::user()->account_number }}</td>
                            </tr>
                            <tr>
                                <td><b>Bank</b></td>
                                <td>{{ Auth::user()->bank }}</td>
                            </tr>
                            <tr>
                                <td><b>Branch</b></td>
                                <td>{{ Auth::user()->bank_branch }}</td>
                            </tr>
                        </table>

                        <div class="alert alert-info" role="alert">
                            <strong>Note!</strong> Please contact Yoho Bed in case if you need to update your bank
                            details..
                        </div>

                    @else
                        <div class="box box-primary">

                            <div class="box-header">
                                <h4 class="box-title">Bank Details</h4>
                            </div><!-- /.box-header -->

                            <!-- form start -->
                            {!! Form::open(['url' => 'user/store/bank/details', 'method' => 'post']) !!}
                            <div class="box-body">

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" for=""><b>Account Name</b></label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="" placeholder="Account Name"
                                               name="account_name"
                                               required>
                                    </div>
                                </div>


                                <div class="form-group row">

                                    <label class="col-sm-4 col-form-label" for=""><b>Account Number</b></label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="" placeholder="Account Number"
                                               name="account_number"
                                               required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" for=""><b>Bank</b></label>
                                    <div class="col-sm-8">
                                        <select name="bank" id="" class="form-control" required>
                                            <option value="Amana Bank">Amana Bank</option>
                                            <option value="Axis Bank Ltd">Axis Bank Ltd</option>
                                            <option value="Bank of Ceylon">Bank of Ceylon</option>
                                            <option value="Cargills Bank Ltd">Cargills Bank Ltd</option>
                                            <option value="Commercial Bank">Commercial Bank</option>
                                            <option value="Citibank N.A.">Citibank N.A.</option>
                                            <option value="Deutsche Bank AG">Deutsche Bank AG</option>
                                            <option value="DFCC Bank PLC">DFCC Bank PLC</option>
                                            <option value="Habib Bank Ltd">Habib Bank Ltd</option>
                                            <option value="Hatton National Bank PLC">Hatton National Bank PLC</option>
                                            <option value="ICICI Bank Ltd">ICICI Bank Ltd</option>
                                            <option value="Indian Bank">Indian Bank</option>
                                            <option value="Indian Overseas Bank">Indian Overseas Bank</option>
                                            <option value="MCB Bank Ltd">MCB Bank Ltd</option>
                                            <option value="National Development Bank PLC">National Development Bank
                                                PLC
                                            </option>
                                            <option value="Nations Trust Bank PLC">Nations Trust Bank PLC</option>
                                            <option value="Pan Asia Banking Corporation PLC">Pan Asia Banking
                                                Corporation PLC
                                            </option>
                                            <option value="People's Bank">People's Bank</option>
                                            <option value="Public Bank Berhad">Public Bank Berhad</option>
                                            <option value="Sampath Bank">Sampath Bank</option>
                                            <option value="Seylan Bank PLC">Seylan Bank PLC</option>
                                            <option value="Standard Chartered Bank">Standard Chartered Bank</option>
                                            <option value="State Bank of India">State Bank of India</option>
                                            <option value="The Hong Kong and Shanghai Banking Corporation Ltd (HSBC)">
                                                The Hong Kong and Shanghai Banking Corporation Ltd (HSBC)
                                            </option>
                                            <option value="Union Bank of Colombo PLC">Union Bank of Colombo PLC</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" for=""><b>Branch</b></label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="" placeholder="Branch Name"
                                               name="branch">
                                    </div>
                                </div>

                            </div><!-- /.box-body -->

                            <div class="box-footer">
                                <button type="submit" class="btn btn-primary">Add my bank</button>
                            </div>
                            {!! Form::close() !!}
                        </div>  {{--.box primary--}}
                    @endif
                </div>
            </div>

            <div class="row">
                <div class="col-md-6" style="margin-top:24px;">

                    <div class="box-header">
                        <h4 class="box-title">Property owner details</h4>
                    </div><!-- /.box-header -->


                    <!-- form start -->
                    <div class="box-body m-t-30 bank-info">

                        <table class="table table-bordered table-striped">
                            <tr>
                                <td><b>Name</b></td>
                                <td>{{ Auth::user()->name }}</td>
                            </tr>
                            <tr>
                                <td><b>Email</b></td>
                                <td>{{ Auth::user()->ownersemail }}</td>
                            </tr>
                            <tr>
                                <td><b>Mobile</b></td>
                                <td>{{ Auth::user()->primary_mobile }}</td>
                            </tr>
                        </table>
                    </div> {{-- .box-body--}}
                </div>

                <div class="col-md-6" style="margin-top:24px;">

                    <div class="box-header">
                        <h4 class="box-title">Point of contact details</h4>
                    </div><!-- /.box-header -->

                    <div class="box-body m-t-30 bank-info">
                        <table class="table table-bordered table-striped">
                            <tr>
                                <td><b>Name</b></td>
                                <td>{{ Auth::user()->point_of_contact }}</td>
                            </tr>
                            <tr>
                                <td><b>Designation</b></td>
                                <td>{{ Auth::user()->designation }}</td>
                            </tr>
                            <tr>
                                <td><b>Mobile</b></td>
                                <td>{{ Auth::user()->mobile }}</td>
                            </tr>
                            <tr>
                                <td><b>Email</b></td>
                                <td>{{ Auth::user()->email }}</td>
                            </tr>
                        </table>
                        <div class="box-footer">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#changePasswordModal">Change Password</button>
                        </div>
                    </div> {{-- .box-body--}}
                </div>

            </div> {{-- .row--}}

            <div>
                <div class="box-header m-t-15">

                    <h4 class="box-title">How to Pay ?</h4>
                    <a href="{{ url('how-to-pay') }}" >
                        <h6>
                            Click here to see the payment options
                        </h6>
                    </a>


                </div><!-- /.box-header -->
            </div>

        </div> {{-- .page-wrapper--}}
    </div> {{-- .main-body--}}

    <div class="modal fade" id="changePasswordModal"
         tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            {{ csrf_field() }}
            <div class="modal-content">
                <div class="modal-header" style="display: inline-block; padding: 10px">
                    <button type="button" class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                            style="margin-right: 1.6%">
                        <span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title"
                        id="title">Change Password</h5>
                </div>

                <div class="card-body">
                    <form class="form-horizontal" method="POST" action="{{ route('changePassword') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('current-password') ? ' has-error' : '' }} row"
                             style="padding-top: 2%; margin-left: -3px">
                            <label for="new-password" class="col-md-5 control-label"><b>Current Password</b></label>

                            <div class="col-md-6">
                                <input id="current-password" type="password" class="form-control"
                                       name="current-password" required>

                                @if ($errors->has('current-password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('current-password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('new-password') ? ' has-error' : '' }} row"
                             style="margin-left: -3px">
                            <label for="new-password" class="col-md-5 control-label"><b>New Password</b></label>

                            <div class="col-md-6">
                                <input id="new-password" type="password" class="form-control" name="new-password"
                                       oninput="checkNewPassword()" required>

                                @if ($errors->has('new-password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('new-password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row" style="margin-left: -3px">
                            <label for="new-password-confirm" class="col-md-5 control-label"><b>Confirm New
                                    Password</b></label>

                            <div class="col-md-6">
                                <input id="new-password-confirm" type="password" class="form-control"
                                       name="new-password_confirmation" oninput="checkNewPassword()" required>
                            </div>
                        </div>

                        <p id="message" class="col-md-5 control-label"
                           style="color: red; font-size: 16px; text-align: right; margin: 0; max-width: 100%; padding-right: 9%; padding-bottom: 3%"></p>

                        <div class="form-group row">
                            <div class="col-md-11" style="text-align: right">
                                <button data-dismiss="modal" type="button"
                                        class="btn btn-default">
                                    Cancel
                                </button>
                                <button type="submit" class="btn btn-primary" id="password-button">
                                    Change Password
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('scripts')
    <script>
        function checkNewPassword() {
            const newPassword = document.getElementById("new-password").value;
            const reEnterNewPassword = document.getElementById("new-password-confirm").value;
            if (newPassword != reEnterNewPassword) {
                document.getElementById("message").innerHTML = "Not matching passwords!";
                document.getElementById("password-button").disabled = true;
                return false;
            } else {
                document.getElementById("message").innerHTML = "";
                document.getElementById("password-button").disabled = false;
                return true;
            }
        }
    </script>

@endsection