@extends('layouts.front-end.body')

@section('content')
<div class="wrapper" style="margin-bottom: 80px;">

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="min-height: 924px;">
        <div class="curve"></div>
        <div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-body text-white">
            </div>
        </div>
        <div id="toastsContainerTopRight" class="toasts-top-right fixed"></div>
        <!-- Content Header (Page header)-->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <!--<h1 class="m-0">Dashboard</h1>-->
                    </div>

                </div>
                <!--<hr class="border-primary">-->
            </div>
        </div>
        <!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <style>
                    small {
                        font-size: 61%;
                        font-weight: 400;
                    }

                    .title p::after {
                        content: "";
                        height: 2px;
                        width: 50%;
                        background-color: #007bff;
                        position: absolute;
                        bottom: -.2em;
                        left: 26%;
                        transform: translate(-50%);
                    }

                    span.badge.badge-danger.badge-counter {
                        position: absolute;
                        top: 0;
                        right: 10%;
                        font-size: 0.55rem;
                        width: 20px;
                        height: 20px;
                        padding-top: 6px;
                    }

                    .menu-text {
                        font-size: 11px !important;
                    }

                    .menu-btn {
                        min-height: 82px;
                        min-width: 62px;
                    }

                    .menu-btn i {
                        font-size: 52px;
                        color: #007bff !important;
                        padding-top: 8px;
                    }

                    ::-webkit-scrollbar {
                        width: 10px;
                    }

                    .my_order {
                        touch-action: auto;
                        mouse-wheel: horizontal;
                    }

                    @media only screen and (min-width: 768px) {
                        .curve {
                            height: 20vh;
                        }
                    }
                </style>
                <div class="row" style="margin:auto">
                    <div class="col-md-12">
                        <div id="carouselExampleIndicators" class="carousel slide " data-ride="carousel" style="border-radius: 15px;overflow: hidden;">

                            <div class="carousel-inner" style="border-radius: 15px;overflow: hidden;height:auto;max-height:63vh">


                                <div class="carousel-item branch_item" data-target="59" style="height:100%;border-radius: 15px;">
                                    <img class="d-block w-100" src="{{asset('front-end/assets/uploads/product_1695116880_14916349714555.jpg')}}" alt="" style="height:100%;border-radius: 15px;">
                                </div>

                                <div class="carousel-item branch_item active" data-target="61" style="height:100%;border-radius: 15px;">
                                    <img class="d-block w-100" src="{{asset('front-end/assets/uploads/product_1695117120_picture-lazada4.jpg')}}" alt="" style="height:100%;border-radius: 15px;">
                                </div>

                                <div class="carousel-item branch_item" data-target="65" style="height:100%;border-radius: 15px;">
                                    <img class="d-block w-100" src="{{asset('front-end/assets/uploads/product_1695117120_picture-lazada4.jpg')}}" alt="" style="height:100%;border-radius: 15px;">
                                </div>

                                <div class="carousel-item branch_item" data-target="67" style="height:100%;border-radius: 15px;">
                                    <img class="d-block w-100" src="{{asset('front-end/assets/uploads/product_1695117120_picture-lazada4.jpg')}}" alt="" style="height:100%;border-radius: 15px;">
                                </div>

                                <div class="carousel-item branch_item" data-target="68" style="height:100%;border-radius: 15px;">
                                    <img class="d-block w-100" src="{{asset('front-end/assets/uploads/product_1695117120_picture-lazada4.jpg')}}" alt="" style="height:100%;border-radius: 15px;">
                                </div>


                            </div>


                        </div>
                    </div>


                    <div class="col-md-12 mt-2">
                        <div class="">
                            <div class="game-view">
                                <div class="container">

                                    <a id="withdraw" href="{{ route('new.withdraw') }}">
                                        <div class="row flex-column justify-content-center align-content-center text-center">
                                            <img src="{{asset('front-end/assets/withdraw.png')}}" style="width:45px;height:45px" class="text-center ml-3">
                                            <span class="menu-text pt-1" style="color:#fff"> {{ __('message.withdraw') }}</span>
                                        </div>
                                    </a>
                                    <a id="transaction" href="{{ route('transaction') }}">
                                        <div class="row flex-column justify-content-center align-content-center text-center">
                                            <img src="{{asset('front-end/assets/transaction.png')}}" style="width:45px;height:45px" class="text-center ml-3">
                                            <span class="menu-text pt-1" style="color:#fff"> {{ __('message.transaction') }}</span>
                                        </div>

                                    </a>
                                    <a id="my" href="{{ route('profile') }}">
                                        <div class="row flex-column justify-content-center align-content-center text-center">
                                            <i class="fa fa-user-circle text-center" style="font-size: 47px;"></i>
                                            <span class="menu-text pt-1" style="color:#fff"> {{ __('message.my account') }}</span>
                                        </div>
                                    </a>

                                </div>
                            </div>

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

                    <div class="col-md-12 mt-3">
                        <div class="card col-md-12 shadow p-2">
                            <a href="javascript:void(0)" class="btn btn-link text-gray btn-block manage_account" data-toggle="modal" data-target="#changeName">
                                <div class="d-flex" style="align-items:center">
                                    <i class="las la-user-circle" style="font-size: 37px;"></i>
                                    <span class="pl-3">
                                        {{ __('message.change') }}{{ __('message.name') }}</span>
                                </div>
                            </a>
                        </div>

                        <div class="card col-md-12 shadow p-2">
                            <a href="javascript:void(0)" class="btn btn-link text-gray btn-block manage_phone" data-toggle="modal" data-target="#changePhone">
                                <div class="d-flex" style="align-items:center">
                                    <i class="las la-phone" style="font-size: 37px;"></i>
                                    <span class="pl-3">
                                        {{ __('message.change phone number') }} </span>
                                </div>
                            </a>
                        </div>

                        <div class="card col-md-12 shadow p-2">
                            <a href="javascript:void(0)" class="btn btn-link text-gray btn-block manage_bank"  data-toggle="modal" data-target="#changeBank">
                                <div class="d-flex" style="align-items:center">
                                    <i class="las la-piggy-bank" style="font-size: 37px;"></i>
                                    <span class="pl-3">
                                        {{ __('message.manage bank account') }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="card col-md-12 shadow p-2">
                            <a href="javascript:void(0)" class="btn btn-link text-gray btn-block manage_password" data-toggle="modal" data-target="#changePassword">
                                <div class="d-flex" style="align-items:center">
                                    <i class="las la-key" style="font-size: 37px;"></i>
                                    <span class="pl-3">
                                        {{ __('message.change my password') }} </span>
                                </div>
                            </a>
                        </div>

                        <div class="card col-md-12 shadow p-2 bg-danger">

                            <a href="#" class="btn btn-link text-gray btn-block" onclick="event.preventDefault();
                            document.getElementById('logout-form').submit();" >
                                <div class="d-flex" style="align-items:center">
                                    <i class="las la-sign-out-alt" style="font-size: 37px;"></i>
                                    <span class="pl-3">
                                        {{ __('message.log out') }} </span>
                                </div>
                            </a>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                                    class="d-none">
                                 @csrf
                            </form>
                        </div>
                    </div>


                </div>
               <!--  <script>

                    $(".manage_bank").click(function () {
                        location.href = '{{ route('manage.bank') }}';
                    })

                    $(".manage_account").click(function () {
                        uni_modal("จัดการบัญชี", "manage_user.php", "small");
                    })

                    $(".manage_phone").click(function () {
                        uni_modal("เปลี่ยนโทรศัพท์", "check_contact.php", "small");
                    })

                    $(".manage_password").click(function () {
                        uni_modal("เปลี่ยนรหัสผ่านของฉัน", "manage_password.php", "small");
                    })


                </script> -->
            </div><!--/. container-fluid -->
        </section>
        <!-- /.content -->
        <div class="modal fade" id="confirm_modal" role="dialog">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">ยืนยัน</h5>
                    </div>
                    <div class="modal-body">
                        <div id="delete_content"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default bg-grad2 text-white" id="confirm" onclick="">ดำเนินการต่อ</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="uni_modal" role="dialog">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="submit" onclick="$('#uni_modal form').submit()">บันทึก</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">ยกเลิก</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="uni_modal_right" role="dialog">
            <div class="modal-dialog modal-full-height  modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span class="fa fa-arrow-right"></span>
                        </button>
                    </div>
                    <div class="modal-body">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="viewer_modal" role="dialog">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-dismiss="modal"><span class="fa fa-times"></span></button>
                    <img src="" alt="" style="height:100%">
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="changeName" tabindex="-1" role="dialog" aria-labelledby="changeNameLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="changeNameLabel" style="color:#212529"> {{ __('message.change') }} {{ __('message.name') }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('member.change-name')}}" method="POST" autocomplete="off" > 
          <div class="modal-body">
            <div class="container-fluid">              
                {{ csrf_field() }}
                 <input name="_method" type="hidden" value="PUT">
                <input type="hidden" name="user_id" value="" value={{Auth::user()->id??0}}>
                <div class="form-group">
                    <label class="col-form-label">{{__('message.real name')}}</label>
                    <input type="text" name="actual_name" class="form-control" placeholder="{{__('message.real name')}}" value="{{Auth::user()->actual_name??''}}" required="">
                </div>
                <!-- <div class="form-group">
                    <label for="recipient-name" class="col-form-label">{{__('message.last name')}}</label>
                    <input type="text" name="lastname" class="form-control" placeholder="{{__('message.last name')}}" value="" required="">
                </div>
                 -->
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="col-3 btn btn-default btn-lg" data-dismiss="modal" style="float:left;">{{__('message.cancel')}}</button>
            <button type="submit" class="col-7 btn btn-primary btn-lg" style="float:left;">     
                {{__('message.save')}} <i class="las la-check"></i>
            </button>
          </div>
      </form>
    </div>
  </div>
</div>
<!-- End Modal -->
<!-- Modal -->
<div class="modal fade" id="changePhone" tabindex="-1" role="dialog" aria-labelledby="changePhoneLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="changeNameLabel" style="color:#212529"> {{ __('message.change phone number') }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('member.change-phone')}}" method="POST" autocomplete="off" > 
          <div class="modal-body">
            <div class="container-fluid">              
                {{ csrf_field() }}
                 <input name="_method" type="hidden" value="PUT">
                <input type="hidden" name="user_id" value="" value={{Auth::user()->id??0}}>
                <div class="form-group">
                    <label class="col-form-label">
                        <i class="text-danger las la-phone" style="font-size:1.5rem"></i>                        
                        {{__('message.update your phone')}}
                    </label>

                    <input type="text" name="phone" class="form-control" placeholder="{{__('message.update your phone')}}" value="{{Auth::user()->customer->phone??''}}" required="" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="col-3 btn btn-default btn-lg" data-dismiss="modal" style="float:left;">{{__('message.cancel')}}</button>
            <button type="submit" class="col-7 btn btn-primary btn-lg" style="float:left;">
                {{__('message.save')}} <i class="las la-check"></i>
            </button>
          </div>
      </form>
    </div>
  </div>
</div>
<!-- End Modal -->
<!-- Modal -->
<div class="modal fade" id="changeBank" tabindex="-1" role="dialog" aria-labelledby="changeBankLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="changeNameLabel" style="color:#212529"> {{ __('message.manage bank account') }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('member.change-bank')}}" method="POST" autocomplete="off" > 
          <div class="modal-body">
            <div class="container-fluid">              
                {{ csrf_field() }}
                 <input name="_method" type="hidden" value="PUT">
                <input type="hidden" name="user_id" value="" value={{Auth::user()->id??0}}>
                <div class="form-group">
                    <label class="col-form-label">                        
                        {{__('message.select bank')}}
                    </label>

                    <select class="form-control"  name="bank_id" required>
                        @foreach($banks as $bank)
                          <option value="{{$bank->id}}" @if($bank->id==(Auth::user()->customer->bank_id??0)) selected @endif>{{$bank->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="col-form-label">                        
                        {{__('message.bank account number')}}
                    </label>

                    <input type="text" name="bank_account" class="form-control" placeholder="{{__('message.bank account number')}}" value="{{Auth::user()->customer->bank_account??''}}" required="" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                </div>
                <div class="form-group">
                    <label class="col-form-label">                        
                        {{__('message.first name last name')}}
                    </label>

                    <input type="text" name="bank_account_name" class="form-control" placeholder="{{__('message.first name last name')}}" value="{{Auth::user()->customer->bank_account_name??''}}" required="">
                </div>
                <div class="form-group">
                    <label class="col-form-label">                        
                        {{__('message.withdrawal code')}}
                    </label>

                    <input type="text" name="pass_code" class="form-control" placeholder="{{__('message.withdrawal code')}}" value="{{Auth::user()->customer->pass_code??''}}">
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="col-3 btn btn-default btn-lg" data-dismiss="modal" style="float:left;">{{__('message.cancel')}}</button>
            <button type="submit" class="col-7 btn btn-primary btn-lg" style="float:left;">
                {{__('message.save')}} <i class="las la-check"></i>
            </button>
          </div>
      </form>
    </div>
  </div>
</div>
<!-- End Modal -->
<!-- Modal -->
<div class="modal fade" id="changePassword" tabindex="-1" role="dialog" aria-labelledby="changePasswordLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="changeNameLabel" style="color:#212529">{{ __('message.change my password') }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('member.change-password')}}" method="POST" autocomplete="off" > 
          <div class="modal-body">
            <div class="container-fluid">              
                {{ csrf_field() }}
                 <input name="_method" type="hidden" value="PUT">
                <input type="hidden" name="user_id" value="" value={{Auth::user()->id??0}}>
                <div class="form-group">
                    <label class="col-form-label">{{__('message.current password')}}</label>
                    <input type="password" name="current_password" class="form-control" placeholder="{{__('message.current password')}}" value="" required="">
                </div>
                <div class="form-group">
                    <label class="col-form-label">{{__('message.new password')}}</label>
                    <div class="input-group">
                        <input type="password" name="new_password" class="form-control" placeholder="{{__('message.new password')}}" value="" required="">
                        <div class="input-group-append">
                            <div class="input-group-text">
                              <span class="toggle-password fas fa-eye"></span>
                            </div>
                          </div>
                    </div>
                </div>
                <div class="form-group" style="margin-top:15px;">
                    <div class="input-group">
                        <!-- <label class="col-form-label">{{__('message.confirm password')}}</label> -->
                        <input type="password" name="confirm_password" class="form-control pass" placeholder="{{__('message.confirm password')}}" value="" required="">
                        <div class="input-group-append">
                            <div class="input-group-text">
                              <span class="toggle-password fas fa-eye"></span>
                            </div>
                          </div>
                    </div>
                </div>
                <!-- <div class="form-group">
                    <div class="input-group">
                      <input type="password" class="form-control pass" name="password" pattern=".{6,10}" required="" placeholder="Password (6 to 10 characters)" autocomplete="new-password">
                      <div class="input-group-append">
                        <div class="input-group-text">
                          <span class="toggle-password fas fa-eye"></span>
                        </div>
                      </div>
                    </div>
                </div> -->
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="col-3 btn btn-default btn-lg" data-dismiss="modal" style="float:left;">{{__('message.cancel')}}</button>
            <button type="submit" class="col-7 btn btn-primary btn-lg" style="float:left;" onclick="return checkConfirmPassword();">     
                {{__('message.change password')}} <i class="las la-check"></i>
            </button>
          </div>
      </form>
    </div>
  </div>
</div>
<!-- End Modal -->
<script type="text/javascript">
    function checkConfirmPassword(){
        var new_pass = $('input[name="new_password"]').val();
        var confirm_pass = $('input[name="confirm_password"]').val();
        if(new_pass!='' && confirm_pass!=''){
            if(new_pass==confirm_pass){
                return true;
            }
        }
        alert('{{__("message.password and confirm-password not match")}}');
        return false;
    }
</script>
@endsection
@section('meta')
    <title>{{ __('message.my account') }}</title>
@endsection