@extends('frontend.layouts.master')

@section('frontcontent')
<section id="account-section">
        <div class="container">
            <div class="row">
                @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
            </div>
            <div class="text-center">
                <h1>my account</h1>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="tab">
                        <button class="tablinks" onclick="openCity(event, 'profile')" id="defaultOpen">Profile</button>
                        <button class="tablinks" onclick="openCity(event, 'plan-details')">Plan Details</button>
                        <button class="tablinks" onclick="openCity(event, 'user-details')">user details</button>
                        <button class="tablinks" onclick="openCity(event, 'your-order')">your order</button>
                        <button class="tablinks" onclick="openCity(event, 'account-details')">Account details</button>
                        <button class="tablinks" onclick="openCity(event, 'password')">change password</button>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div id="profile" class="tabcontent">
                        <div class="profile d-flex ">
                            <div class="col-lg-6 my-auto ">
                                <div class=" name-wrapper">
                                    <h4 class="col-lg-3">full name</h4>
                                    <h6 class="col-lg-3">{{ $loginuser->first_name.' '.$loginuser->last_name}}</h6>
                                </div>
                                <hr>
                                <div class="name-wrapper">
                                    <h4 class="col-lg-3">Email</h4>
                                    <h6 class="col-lg-3">{{ $loginuser->email }}</h6>
                                </div>
                                <hr>
                                <div class="name-wrapper">
                                    <h4 class="col-lg-3">Mobile Number</h4>
                                    <h6 class="col-lg-3">{{ $loginuser->mobile_number }}</h6>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="images">
                                    <img src="{{ asset('frontend/images/personal-profile.png') }}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="plan-details" class="tabcontent">
                        <div class="profile d-flex ">
                            <div class="col-lg-6 my-auto ">
                                <div class="name-wrapper">
                                    <h4 class="col-lg-4">Current Plan</h4>
                                    <h6 class="col-lg-3">{{ $plandata->plan_name ?? '-'}}</h6>
                                </div>
                                <hr>
                                <div class="name-wrapper">
                                    <h4 class="col-lg-4">Plan Type</h4>
                                    <h6 class="col-lg-3">{{ $plandata->plan_type ?? '-'}}</h6>
                                </div>
                                <hr>
                                <div class="name-wrapper">
                                    <h4 class="col-lg-4">Plan Expire Date</h4>
                                    <h6 class="col-lg-5">{{ $loginuser->plan_expiration_date != '-' ? date('d-m-Y H:i:s', strtotime($loginuser->plan_expiration_date)) : $loginuser->plan_expiration_date }}</h6>
                                </div>
                                <hr>
                                <div class="name-wrapper">
                                    <h4 class="col-lg-4">Used Space</h4>
                                    <h6 class="col-lg-3">{{ $spaceUsed }} MB</h6>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="images">
                                    <img src="{{ asset('frontend/images/personal-profile.png') }}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="user-details" class="tabcontent">
                        <div class="profile d-flex justify-content-end">
                            <div class="col-md-2"><a href="{{ route('user.create') }}" class="btn float-end" style="background: #2b78be; color: #fff;">Create User</a></div>
                        </div>
                        <div class="tabel">
                            <table class="table datatable">
                                <thead class="">
                                    <tr>
                                        <th scope="col">
                                            Sr. no.</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">mobile Number</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">date</th>
                                        <th scope="col" width="70px">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="table-group-divider">
                                    @php $i = 1; @endphp
                                    @foreach($UserData as $user)
                                    <tr>
                                        <td>{{ $i++ }}</td>
                                        <td>{{ $user->first_name.' '.$user->last_name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->mobile_number }}</td>
                                        <td>
                                            @if($user->status == 1)
                                            Active
                                            @else
                                            Inactive
                                            @endif
                                        </td>
                                        <td>{{ date('d-m-Y H:i:s', strtotime($user->created_at)) }}</td>
                                        <td>
                                            <a href="{{ route('user.edit', $user->id) }}"><img src="{{ asset('frontend/images/edit.png') }}" alt=""></a>
                                            <a href="javascript:void(0);" class="frontuserdelete" data-id="<br />
<b>Warning</b>:  Undefined variable $user in <b>C:\xampp\htdocs\resources\views\frontend\myaccount.blade.php</b> on line <b>126</b><br />
<br />
<b>Warning</b>:  Attempt to read property "id" on null in <b>C:\xampp\htdocs\resources\views\frontend\myaccount.blade.php</b> on line <b>126</b><br />
"><img src="{{ asset('frontend/images/delete.png') }}" alt=""></a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="your-order" class="tabcontent">
                        <div class="col-lg-12">
                            <div class="profile">
                                <div class="tabel">
                                    <table class="table datatable">
                                        <thead class="">
                                            <tr>
                                                <th scope="col">
                                                    Sr. no.</th>
                                                <th scope="col">Order ID</th>
                                                <th scope="col">Plan Name</th>
                                                <th scope="col">Amount</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">date</th>
                                                <th scope="col">Invoice</th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-group-divider">
                                            @php $i = 1; @endphp
                                            @foreach($orderlist as $orderdata)
                                            <tr>
                                                <td>{{ $i++ }}</td>
                                                <td>{{ $orderdata->order_id }}</td>
                                                <td>{{ $orderdata->plan_name }}</td>
                                                <td>{{ $orderdata->price }}</td>
                                                <td>{{ $orderdata->status }}</td>
                                                <td>{{ date('d-m-Y H:i:s', strtotime($orderdata->created_at)) }}</td>
                                                <td>
                                                    <a href="{{ route('downloadInvoice', $orderdata->id) }}" class="btn btn-primary" title="Download Invoice"><i class="fa fa-download" aria-hidden="true"></i></a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="account-details" class="tabcontent">
                        <div class="profile d-flex ">
                            <div class="col-lg-6 my-auto ">
                                <form action="{{ route('saveprofile') }}" method="post">
                                    @csrf
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="inputFirstName">First name</label>
                                        <input type="text" name="first_name" id="inputFirstName" value="{{ $loginuser->first_name }}" placeholder="Enter your first name">
                                    </div>
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="inputLastName">Last name</label>
                                        <input id="inputLastName" type="text" name="last_name" value="{{ $loginuser->last_name }}" placeholder="Enter your last name">
                                    </div>
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="inputEmailAddress">Email address</label>
                                        <input type="text" id="inputEmailAddress" type="email" name="email" value="{{ $loginuser->email }}" placeholder="Enter your email address" readonly>
                                    </div>
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="inputPhone">Phone number</label>
                                        <input type="number" id="inputPhone" name="mobile_number" value="{{ $loginuser->mobile_number }}" placeholder="Enter your phone number" readonly>
                                    </div>
                                    <div class="submit-btn">
                                        <button type="submit">submit</button>
                                    </div>
                                </form>    
                            </div>
                            <div class="col-lg-6">
                                <div class="images">
                                    <img src="{{ asset('frontend/images/personal-profile.png') }}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="password" class="tabcontent">
                        <div class="profile d-flex ">
                            <div class="col-lg-6 my-auto">
                                <form action="{{ route('changeuserpassword') }}" method="post">
                                    @csrf
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="current_password">Current Password</label>
                                        <input id="current_password" type="password" name="current_password" placeholder="Enter your current password">
                                    </div>
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="new_password">New Password</label>
                                        <input id="new_password" type="password" name="new_password" placeholder="Enter your new password">
                                    </div>
                                    <div class="col-lg-12 first-name-wrapper">
                                        <label for="new_password_confirmation">Confirm New Password</label>
                                        <input id="new_password_confirmation" type="password" name="new_password_confirmation" placeholder="Enter your confirm password">
                                    </div>
                                    <div class="submit-btn">
                                        <button type="submit">submit</button>
                                    </div>
                                </form>    
                            </div>
                            <div class="col-lg-6">
                                <div class="images">
                                    <img src="{{ asset('frontend/images/personal-profile.png') }}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </section>
@endsection
@section('frontscript')
<script>
    $(document).ready(function() {
        $('.datatable').DataTable({
            "searching": true
            , "pageLength": 10
            , "language": {
                "search": "Search: "
                , "paginate": {
                    "previous": "Previous"
                    , "next": "Next"
                }
            }
        });
    });

</script>
<script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>
<script src="{{ asset('superadmin/custom_js/user.js') }}"></script>
{{-- <script src="{{ asset('js/jquery.min.js') }}"></script> --}}
<script>
    $(function() {
        var timeout = 3000; // in miliseconds (3*1000)
        $('.alert').delay(timeout).fadeOut(300);
    });

</script>
@endsection