@extends('front.layout.app')


@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
    <style>
        .profile-card {
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            text-align: center;
        }

        .profile-card img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        .profile-card h4 {
            margin-bottom: 10px;
        }

        .profile-card .details {
            text-align: left;
            padding-left: 20px;
        }

        .tab-content {
            margin-top: 20px;
        }

        .form-control[disabled] {
            background-color: #f9f9f9;
        }

        .edit-btn {
            background-color: #6f42c1;
            color: white;
        }
    </style>
@endsection

@section('content')
    <div class="container mt-5">
        <div class="row">
            <!-- Profile Sidebar -->
            <div class="col-md-3">
                <div class="profile-card">
                    <img src="https://via.placeholder.com/120" alt="Profile Image">
                    <h4>{{$user->firstname}} {{$user->lastname}}</h4>
                    <p>Registered At : {{$user->created_at}}</p>
                    <div class="details">
{{--                        <p><strong>Email :</strong> {{$user->email}}</p>--}}
{{--                        <p><strong>Detail 2:</strong> 40</p>--}}
{{--                        <p><strong>Detail 3:</strong> 50</p>--}}
                    </div>
                    <a href="{{route('logout')}}" class="btn btn-primary mt-3">Logout</a>
                </div>
            </div>

            <!-- Main Content -->
            <div class="col-md-9">
                <!-- Tab Navigation -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#account">Account</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#transactions">Transactions</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#websites">Websites</a>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content">
                    <!-- Account Tab -->
                    <div class="tab-pane fade show active" id="account">
                        <form class="mt-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="firstName">First Name</label>
                                        <input type="text" class="form-control" id="firstName" value="{{$user->firstname}}" disabled>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="lastName">Last Name</label>
                                        <input type="text" class="form-control" id="lastName" value="{{$user->lastname}}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="middleName">Middle Name</label>
                                        <input type="text" class="form-control" id="middleName" value="Baker">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="gender">Gender</label>
                                        <select class="form-control" id="gender">
                                            <option>Male</option>
                                            <option selected>Female</option>
                                            <option>Other</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phoneNumber">Phone Number</label>
                                        <input type="text" class="form-control" id="phoneNumber" value="+63 932-555-4247">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">Email Address</label>
                                        <input type="email" class="form-control" id="email" value="janedoe@gmail.com">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" id="password" value="password">
                            </div>
{{--                            <button type="button" class="btn edit-btn mt-3">Edit</button>--}}
                        </form>
                    </div>

                    <!-- Transactions Tab -->
                    <div class="tab-pane fade" id="transactions">
                        <div class="table-responsive mt-4">
                            <table id="transactions-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Template</th>
                                    <th>Hosting</th>
                                    <th>Transaction ID</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($transcations as $transcation)
                                <tr>
                                    <td>{{$transcation->template->name}}</td>
                                    <td>{{$transcation->package->name}}</td>
                                    <td>{{json_decode($transcation->payment_data)->id ?? 'N/A'}}</td>
                                    <td>{{$transcation->total}}</td>
                                    <td>{{$transcation->payment_status == 0 ? 'In-Complete' : 'Complete'}}</td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Websites Tab -->
                    <div class="tab-pane fade" id="websites">
                        <div class="table-responsive mt-4">
                            <table id="websites-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Website</th>
                                    <th>Domain</th>
                                    <th>Sub-Domain</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($websites as $website)
                                    <tr>
                                        <td>{{$website->name}}</td>
                                        <td>{{$website->domain}}</td>
                                        <td>{{$website->subdomain}}.nuksy.com</td>
                                        <td>{{$website->site_status}}</td>
                                    </tr>
                                @endforeach

{{--                                <tr>--}}
{{--                                    <td>Shop Online</td>--}}
{{--                                    <td>shoponline.com</td>--}}
{{--                                    <td>Inactive</td>--}}
{{--                                </tr>--}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('script')

    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script>

        // Check if localStorage contains 'currentPageURL'
        if (localStorage.getItem('currentPageURL')) {
            // Get the URL from localStorage
            let savedURL = localStorage.getItem('currentPageURL');
            localStorage.removeItem('currentPageURL');
            // Redirect to the saved URL
            window.location.href = savedURL;
        }
        $(document).ready(function() {
            $('#transactions-table').DataTable();
            $('#websites-table').DataTable();
        });


    </script>

@endsection