@extends('index')
@section('title', Helper::getSiteTitle('Account Settings'))

@section('content')
<main class="dashboardMain">
    @include('includes.dashboard-nav')
    <div class="dashboard-row">
        <div class="dashboard-content">
            <div class="section-heading" style="margin-bottom: 25px; text-transform: uppercase;">
                <h4>Account Settings 
                    <span style="float: right;">
                        <a href="javascript:void(0)" class="btn btn-primary btn-sm" onclick="confirmDelteAccount()">Delete my Account</a>
                    </span>
                </h4>
            </div>
            <form action="{{ route('settings') }}" class="register-form submit-form" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    @include('includes.messages-db')
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <label for="firstName" class="mb-1">First Name <span class="text-danger">*</span></label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="firstName" required placeholder="First Name" aria-label="First Name" name="first_name" value="{{ auth()->user()->first_name }}" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <label for="lastName" class="mb-1">Last Name <span class="text-danger">*</span></label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="lastName" required placeholder="Last Name" aria-label="Last Name" name="last_name" value="{{ auth()->user()->last_name }}" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <label for="email" class="mb-1">Email<span class="text-danger">*</span></label>
                        <div class="input-group mb-3">
                            <input type="email" class="form-control" id="email" required placeholder="Email" aria-label="Email" name="email" value="{{ auth()->user()->email }}" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <label for="username" class="mb-1">Username <span class="text-danger">*</span></label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="username" required placeholder="Username" aria-label="Username" name="username" value="{{ auth()->user()->username }}" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <label for="time_zone" class="mb-1">Timezone <span class="text-danger">*</span></label>
                        <div class="input-group mb-3">
                            <select class="form-control" id="time_zone" aria-label="time_zone" name="time_zone" required>
                                @foreach($timezones as $timezone)
                                    <option value="{{ $timezone->name }}" {{ $timezone->name == auth()->user()->time_zone ? 'selected' : '' }}>{{ env('TIMEZONE_TEXT')}} {{ $timezone->utc_tz }} - {{ $timezone->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <label for="image" class="mb-1">Profile picture</label>
                        <input type="file" id="image" name="image" style="display: none;" onchange="displaySingleImagePreview(this, 'disp_profile_image')" />
                        <div class="input-group mb-3">
                            @php
                                $profile_image = 'admin/images/users/default.png';
                                $isDelete = false;
                                if(auth()->user()->image && file_exists('uploads/user_profile/'.auth()->user()->image)) {
                                    $profile_image = 'uploads/user_profile/'.auth()->user()->image;
                                    $isDelete = true;
                                }
                            @endphp
                            <img src="{{ asset('/') }}{{ $profile_image }}" id="disp_profile_image" style="max-height:150px; max-width:150px;'" />
                            @if($isDelete)
                                <button id="remove_profile_image" type="button" title="Delete" onclick="confirmDeleteImage('{{ auth()->user()->id }}')" class="btn btn-primary btn-sm" style="height: 41px; border-radius: 50%; margin: 0; padding: 4px 11px; text-align: center; font-weight: bold; font-size: 20px;">X</button>
                            @endif
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" onclick="document.getElementById('image').click()" class="btn btn-primary btn-sm">Select Image</button>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary mt-4 form-submit-button">Submit</button>
            </form>
        </div>
    </div>
</main>
@endsection

@section('css-lib')
<link href="{{ asset('admin/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('js-lib')
<script src="{{ asset('admin/libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsection

@section('js')
<script>
    var displaySingleImagePreview = function(input, id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#'+id).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    };

    var confirmDeleteImage = function(user_id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if(result.value) {
                Swal.fire(
                    'Deleted!',
                    'Profile picture removed successfully.',
                    'success'
                )
                $('#disp_profile_image').attr('src', '{{ asset('/') }}admin/images/users/default.png');
                $('#remove_profile_image').hide();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });

                $.ajax({
                    type:'POST',
                    url:'{{ env('APP_URL') }}/remove_profile_picture',
                    data:"user_id="+user_id,
                    success:function(data) {
                        console.log(data);
                    }
                });
                
            }
        });
        // if(confirm('Are you sure, you want to delete this image?')) {
        //     // Cofirm
        //     $('#disp_profile_image').attr('src', '{{ asset('/') }}admin/images/users/default.png');
        //     $('#remove_profile_image').hide();

        //     $.ajaxSetup({
        //         headers: {
        //             'X-CSRF-TOKEN': $('input[name="_token"]').val()
        //         }
        //     });

        //     $.ajax({
        //         type:'POST',
        //         url:'{{ env('APP_URL') }}/remove_profile_picture',
        //         data:"user_id="+user_id,
        //         success:function(data) {
        //             console.log(data);
        //         }
        //     });
        // } else {
        //     // Reject
        //     return false;
        // }
    }

    var confirmDelteAccount = function() {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if(result.value) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });

                $.ajax({
                    type:'POST',
                    url:'{{ env('APP_URL') }}/delete_account',
                    data:"",
                    success:function(data) {
                        window.location.href="{{ env('APP_URL') }}";
                    }
                });
            }
        })
    }
</script>
@endsection