@extends('layouts.appUi')

@section('title')
    ตั้งค่าโปรไฟล์
@endsection

@section('header')
<div class="appHeader">
    <div class="left">
        <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
            <ion-icon name="chevron-back-outline"></ion-icon>
        </a>
    </div>
    <div class="pageTitle">
        ตั้งค่าโปรไฟล์
    </div>
    {{-- <div class="right">
        <a href="app-notifications.html" class="headerButton">
            <ion-icon class="icon" name="notifications-outline"></ion-icon>
            <span class="badge badge-danger">4</span>
        </a>
    </div> --}}
</div>
@endsection

@section('customStyle')
    <style>
        #changePasswordSheet {
            z-index: 1999; 
        }
        #confirmDialog {
            z-index: 2000; 
        }
    </style>
@endsection

@section('content')
<div class="section mt-3 text-center">
    <div class="avatar-section">
        <a href="#">
            @php
                $me = Auth::user();
                $mockUpPath = asset('app_ui').'/img/default-user-image.png';
                if($me->image_profile) $mockUpPath = asset("storage/{$me->image_profile}")
            @endphp
            <img src="{{ $mockUpPath }}" alt="avatar" class="imaged w100 rounded">
            <span class="button" data-bs-toggle="modal" data-bs-target="#uploadProfileModal">
                <ion-icon name="camera-outline"></ion-icon>
            </span>
        </a>
    </div>
    <div class="mt-2 text-center">
        <h3 class="text-primary">ผู้ใช้: {{ Auth::user()->username }}</h3>
    </div>
</div>

<div class="listview-title mt-1">ธีม</div>
<ul class="listview image-listview text inset">
    <li>
        <div class="item">
            <div class="in">
                <div>
                    โหมดแสงน้อย
                </div>
                <div class="form-check form-switch  ms-2">
                    <input class="form-check-input dark-mode-switch" type="checkbox" id="darkmodeSwitch">
                    <label class="form-check-label" for="darkmodeSwitch"></label>
                </div>
            </div>
        </div>
    </li>
</ul>

<div class="listview-title mt-1">รายการเล่น</div>
<ul class="listview image-listview text inset">
    <li>
        <a href="{{ route('profile.betHistory') }}" class="item">
            <div class="in">
                <div>รายการแทง</div>
            </div>
        </a>
    </li>
    <li>
        <a href="{{ route('profile.betHistoryReport') }}" class="item">
            <div class="in">
                <div>
                    สรุปรายการแทง <span class="badge badge-info">New</span>
                </div>
            </div>
        </a>
    </li>
</ul>

<div class="listview-title mt-1">ตั้งค่า</div>
<ul class="listview image-listview text inset">
    <li>
        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#changePasswordSheet" class="item">
            <div class="in">
                <div>เปลี่ยนรหัสผ่าน</div>
            </div>
        </a>
    </li>
    <li>
        <a href="{{ route('appUi.setting.bank-account.index') }}" class="item">
            <div class="in">
                <div>บัญชีธนาคาร</div>
            </div>
        </a>
    </li>
    <li>
        <a href="javascript:;" onclick="$('#logout-form').trigger('submit');" class="item">
            <div class="in text-danger">
                <div>ออกจากระบบ</div>
            </div>
        </a>
    </li>
</ul>
@endsection

@section('modal')
<div class="modal fade action-sheet" id="uploadProfileModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">อัพโหลดรูปโปรไฟล์</h5>
            </div>
            <div class="modal-body">
                <div class="action-sheet-content">
                    <form onsubmit="uploadProfileHandler(event, this)">
                        <div class="custom-file-upload" id="fileUpload1">
                            <input type="file" id="fileuploadInput" name="profile" accept=".png, .jpg, .jpeg" required>
                            <label for="fileuploadInput">
                                <span>
                                    <strong>
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>
                                        <i>รูปภาพโปรไฟล์</i>
                                    </strong>
                                </span>
                            </label>
                        </div>

                        <div class="form-group basic mt-2">
                            <button type="submit" class="btn btn-primary btn-block btn-lg">อัพโหลดโปรไฟล์</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade action-sheet" id="changePasswordSheet" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">เปลี่ยนรหัสผ่าน</h5>
            </div>
            <div class="modal-body">
                <div class="action-sheet-content">
                    <form onsubmit="changePasswordSubmitHandler(event, this)">
                        @method('PUT')
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="old-password">รหัสผ่านเดิม</label>
                                <input type="password" class="form-control" id="old-password" placeholder="กรุณากรอกรหัสผ่านเดิม" name="old_password" required />
                                <i class="clear-input">
                                    <ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
                                </i>
                            </div>
                        </div>

                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="new-password">รหัสผ่านใหม่</label>
                                <input type="password" class="form-control" id="new-password" placeholder="กรุณากรอกรหัสผ่านใหม่" minlength="6" name="new_password" required />
                                <i class="clear-input">
                                    <ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
                                </i>
                            </div>
                            <small class="form-text text-danger password-unvalid"></small>
                        </div>
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="re-new-password">ยืนยันรหัสผ่านใหม่</label>
                                <input type="password" class="form-control" id="re-new-password" placeholder="กรุณากรอกรหัสผ่านใหม่อีกครั้ง" onblur="checkPasswordMatch()" minlength="6" required />
                                <i class="clear-input">
                                    <ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
                                </i>
                            </div>
                            <small class="form-text text-danger password-unvalid"></small>
                        </div>

                        <div class="form-group basic">
                            <button type="submit" class="btn btn-primary btn-block btn-lg">เปลี่ยรหัสผ่าน</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
    
@endsection

@section('script')
    <script>
        function uploadProfileHandler(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const formData = new FormData(el);
            const target = `{{ route('appUi.setting.updateProfile') }}`;
            $.ajax({
                url: target,
                method: 'post',
                dataType: 'json',
                data: formData,
                success: response => {
                    if(response.success) location.reload();
                },
                processData: false,
                contentType: false,
                cache: false,
            });
        }

        function checkPasswordMatch()
        {
            const password1 = $('#new-password').val();
            const password2 = $('#re-new-password').val();
            if (password1 && password2) {
                if (password1 === password2) {
                    $('.password-unvalid').text('');
                    return true;
                } else {
                    $('.password-unvalid').text('รหัสผ่านไม่ตรงกัน');
                    return false;
                }
            }
        }
        
        function changePasswordSubmitHandler(e, el)
        {
            e.preventDefault();
            const self = $(el);
            $.post(`{{ route('profile.resetPassword', Auth::user()->id) }}`, self.serialize(), function (response) {
                if (response.success) {
                    self[0].reset();
                    self.closest('.modal').modal('hide');
                    Dialog.alert({
                        title: 'แก้ไขรหัสผ่านเรียบร้อย',
                        text: 'กรุณาตรวจสอบความถูกต้องอีกครั้ง',
                        type: 'success',
                        buttons: false,
                    });
                } else {
                    notify('ไม่สามรถแก้ไขรหัสผ่านได้', response.text, 'danger');
                }
            }, 'json');
        }
    </script>
@endsection