@extends('customerDashboard.layout')

@section('content')


<div class="container-fluid mb-3">
    <div class="row">
        <h2 class="h2">My Profile</h2>
    </div>
</div>


@if ($message = Session::get('success'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{{ $message }}</strong>
    </div>
@endif

@if ($message = Session::get('error'))
    <div class="alert alert-danger alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{{ $message }}</strong>
    </div>
@endif


@if ($errors->any())
    @foreach ($errors->all() as $error)
        <div class="alert alert-danger alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $error }}</strong>
        </div>
    @endforeach
@endif

<div class="container">
    <div class="main-card mb-3 card p-3" style="border-radius:20px;">
        <div class="card-body">

            <div class="row" id="profile-section">

                <div class="col-md-4 pb-3 text-center">

                    <img src="{{ $user['avater'] }}" class="profile-avater">

                    <div id="camera-img" class="mt-3 pl-3 pr-3" style="display:none">

                        <form action="{{ route('profile-image-upload') }}" method="POST" enctype="multipart/form-data">
                            {{ csrf_field() }}

                            <div class="row">
                                <div class="col-md-8">
                                    <input type="file" name="image" class="form-control-file">
                                    @if($errors->has('image'))
                                        <span class="text-danger">{{ $errors->first('image') }}</span>
                                    @endif
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-success">Upload</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>

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

                    <div class="row pb-2" style="flex-wrap: nowrap;">
                        <div class="col-md-4">
                            <span class="grid-hedder"> Name </span>
                        </div>
                        <div class="col-md-8">
                            <span class="profile-grid-content"> {{ $user['initials'] }} . {{  $user['surname'] }}</span>
                        </div>
                    </div>

                    <div class="row pb-2" style="flex-wrap: nowrap;">
                        <div class="col-md-4">
                            <span class="grid-hedder"> NIC </span>
                        </div>
                        <div class="col-md-8">
                            <span class="profile-grid-content"> {{ $user['nic'] }} </span>
                        </div>
                    </div>

                    <div id="editable">

                        <div class="row pb-2" style="flex-wrap: nowrap;">
                            <div class="col-md-4">
                                <span class="grid-hedder"> Address </span>
                            </div>
                            <div class="col-md-8">
                                <span class="profile-grid-content"> {{ $user['address1'] }} , </span>
                                <span class="profile-grid-content"> {{ $user['address2'] }} , </span>
                                <span class="profile-grid-content"> {{ $user['address3'] }} </span>
                            </div>
                        </div>

                        <div class="row pb-2" style="flex-wrap: nowrap;">
                            <div class="col-md-4">
                                <span class="grid-hedder"> City </span>
                            </div>
                            <div class="col-md-8">
                                <span class="profile-grid-content"> {{ $user['city'] }} </span>
                            </div>
                        </div>

                        <div class="row pb-2" style="flex-wrap: nowrap;">
                            <div class="col-md-4">
                                <span class="grid-hedder"> Mobile No </span>
                            </div>
                            <div class="col-md-8">
                                <span class="profile-grid-content"> {{ $user['mobile'] }} </span>
                            </div>
                        </div>

                    </div>

                    <div id="edit-form" style="display:none">

                        <form action="{!! route('edit-profile') !!}" method="post">
                            {{ csrf_field() }}
                            <div class="row pb-2" style="flex-wrap: nowrap;">
                                <div class="col-md-4">
                                    <span class="grid-hedder"> Edit Address </span>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" value="{{ $user['address1'] }}" class="form-control"
                                        id="address1" name="address1" placeholder="Enter Address Line 1">
                                    <input type="text" value="{{ $user['address2'] }}" class="form-control"
                                        id="address2" name="address2" placeholder="Enter Address Line 2">
                                    <input type="text" value="{{ $user['address3'] }}" class="form-control"
                                        id="address3" name="address3" placeholder="Enter Address Line 3">
                                </div>
                            </div>

                            <div class="row pb-2" style="flex-wrap: nowrap;">
                                <div class="col-md-4">
                                    <span class="grid-hedder"> Edit City </span>
                                </div>
                                <div class="col-md-8">
                                    <select name="city" class="input-lg form-control select2dropdown" required="required">
                                        <option value="">-- Select Your City --</option>
                                        @foreach ($cities as $key => $city)
                                            @if (strtoupper($user['city']) == strtoupper($city['city']))
                                            <option value="{{strtoupper($city['city'])}}" selected="selected">{{strtoupper($city['city'])}}</option>
                                            @else
                                                <option value="{{strtoupper($city['city'])}}">{{strtoupper($city['city'])}}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row pb-2" style="flex-wrap: nowrap;">
                                <div class="col-md-4">
                                    <span class="grid-hedder"> Edit Mobile No </span>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" value="{{ $user['mobile'] }}" class="form-control" id="mobile"
                                        name="mobile" placeholder="Enter Mobile No">
                                </div>
                            </div>

                            <div class="row float-right">
                                <span class="pr-5">
                                    <button type="submit" class="btn btn-success"> Save Changes </button>
                                </span>
                            </div>

                        </form>

                    </div>

                </div>
            </div>

            <div id="change-password-section" style="display:none;">

                    <form action="{!! route('change-password') !!}" method="post">
                        {{ csrf_field() }}
                        <div class="row pb-2" style="flex-wrap: nowrap;">

                            <div class="col-md-4">
                                <span class="grid-hedder"> Old password </span>
                            </div>

                            <div class="col-md-8">
                                <input type="password" class="form-control" name="Old_Password" placeholder="Old password">
                            </div>
                        </div>

                        <div class="row pb-2" style="flex-wrap: nowrap;">
                            <div class="col-md-4">
                                <span class="grid-hedder"> New password </span>
                            </div>
                            <div class="col-md-8">
                                <input type="password" class="form-control" name="Password" placeholder="New password">
                            </div>
                        </div>

                        <div class="row pb-2" style="flex-wrap: nowrap;">
                            <div class="col-md-4">
                                <span class="grid-hedder"> Conform new password </span>
                            </div>
                            <div class="col-md-8">
                                <input type="password" class="form-control" name="Password_confirmation" placeholder="New password">
                            </div>
                        </div>


                        <div class="row float-right">
                            <span class="pr-5">
                                <button type="submit" class="btn btn-success"> Save Changes </button>
                            </span>
                        </div>

                    </form>



            </div>

            <div class="row float-right">

                <span class="pr-5">
                    <button id="change-password-btn" class="btn btn-info"> Change password </button>
                </span>

                <span class="pr-5">
                    <button id="edit-btn" class="btn btn-info"> Edit Profile </button>
                </span>

            </div>

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

@endsection

@section('custom-js')

<script>
    $(document).ready(function() {

        $('#edit-btn').click(function()
        {
            $('#editable').hide();
            $('#edit-form').show();
            $('#edit-btn').hide();
            $('#camera-img').show();
            $('#change-password-btn').hide();
        });

        $('#change-password-btn').click(function()
        {
            $('#profile-section').hide();
            $('#change-password-section').show();
            $('#edit-btn').hide();
            $('#change-password-btn').hide();

        })

    });

</script>


@endsection