@extends('layouts.user.app')
@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/sweetalert2/sweetalert2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/@form-validation/form-validation.css" />
<link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
@endpush
@section('content')
<h4 class="py-3 mb-4">{{$title}}</h4>
<div class="row">
    <!-- User Sidebar -->
    <div class="col-xl-3 col-lg-5 order-1 order-md-1">
        @include('User.profile.sidebar')
    </div>
    <!--/ User Sidebar -->

    <div class="col-xl-9 col-lg-7 order-2 order-md-2">
        @include('User.profile.tabs')
        <div class="card mb-4">
            <h5 class="card-header">Recent Activities</h5>
            <div class="table-responsive">
                <table class="table table-hover border-top">
                    <thead>
                        <tr>
                            <th class="text-truncate">Browser</th>
                            <th class="text-truncate">Device</th>
                            <th class="text-truncate">IP</th>
                            <th class="text-truncate">Recent Activities</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($logs as $log)
                        <tr>
                            <td class="text-truncate">
                                <i class="ti ti-brand-chrome text-secondary ti-md me-2"></i>
                                <span class="fw-medium">{{$log->browser}}</span>
                            </td>
                            <td class="text-truncate">{{$log->device}}</td>
                            <td class="text-truncate">{{$log->ip}}</td>
                            <td class="text-truncate">{{Carbon\Carbon::parse($log->logged_in_at)->format('d, M Y H:i')}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                {{$logs->withQueryString()->links('layouts.components.pagination')}}
            </div>
        </div>

    </div>
</div>

@include('User.profile.modal')

@endsection

@push('script')
<script src="/assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
<script src="/assets/vendor/libs/cleavejs/cleave.js"></script>
<script src="/assets/vendor/libs/cleavejs/cleave-phone.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/libs/@form-validation/popular.js"></script>
<script src="/assets/vendor/libs/@form-validation/bootstrap5.js"></script>
<script src="/assets/vendor/libs/@form-validation/auto-focus.js"></script>


<!-- Main JS -->


<!-- Page JS -->
<script src="/assets/js/modal-edit-user.js"></script>
<script src="/assets/js/modal-enable-otp.js"></script>
<script src="/assets/js/app-user-view.js"></script>
<script src="/assets/js/app-user-view-security.js"></script>
<script src="/assets/js/forms-pickers.js"></script>
<script>
    $('#saveUserInformation').on('click', function(e){
        e.preventDefault();
        let name = $('#name').val();
        let phone = $('#phone').val();
        let birth_date = $('input[name=birth_date]').val();
        let address = $('#address').val();
        let country = $('#country').val();
        let gender = $('#gender').val();
        $.ajax({
            url: '/user/profile/update/{{$user->id}}',
            data : {
                name : name,
                phone: phone,
                birth_date: birth_date,
                address: address,
                country: country,
                gender: gender,
            },
            success: function (response) {
                if(response.status == 'success'){
                    $('#editUser').modal('hide');
                }
                new Notify ({
                    title: '',
                    text: response.message,
                    status: response.status,
                    effect: 'slide',
                    autoclose: true,
                    type: 2,
                    autotimeout: 4000
                });
            },
        });

    });
</script>
@endpush