@extends('layouts.app')
@section('content')


<style>
.table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.table th, .table td {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

.table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .table th, .table td {
        display: block;
        width: 100%;
        text-align: right;
    }

    .table th {
        background-color: #f8f9fa;
        text-align: left;
    }

    .table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: #495057;
    }

    .table tr {
        margin-bottom: 1rem;
        display: block;
        border-bottom: 2px solid #dee2e6;
    }
}

.pdf {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
</style>

@if(session('error'))
    <script>
        Swal.fire({
            icon: 'warning',
            title: 'Profile Incomplete',
            text: '{{ session('error') }}',
            timer: 3000,
            showConfirmButton: false
        });
    </script>
@endif
@if(session('success'))
    <script>
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false
        });
    </script>
@endif

<!-- Announcement Bar -->
@livewire('announcement')
<!-- /Announcement Bar -->
<!-- Header -->
@livewire('header')

@livewire('pageac', ['title' => 'My Account'])

<section class="flat-spacing-11">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                @livewire('accountsidebar')
            </div>

            <div class="col-lg-9">
                <div class="wd-form-order">
                    <div class="order-head">
                        <figure class="img-product">
                            <img src="https://ui-avatars.com/api/?name={{ $profile->name }}" alt="{{ $profile->name }}">
                        </figure>
                        <div class="content">
                            <div class="badge">{{ $profile->name }}</div>
                            <h6 class="mt-8 fw-5">{{ $profile->profile_id }}</h6>
                        </div>
                    </div>
                    <div class="tf-grid-layout md-col-2 gap-15">
                        <div class="item">
                            <div class="text-2 text_black-2">Email</div>
                            <div class="text-2 mt_4 fw-6">{{$user->email}}</div>
                        </div>
                        @if($subscription)
    @if($subscription->plan_name)
        <div class="item">
            <div class="text-2 text_black-2">Plan Name</div>
            <div class="text-2 mt_4 fw-6">{{ $subscription->plan_name }}</div>
        </div>
    @endif

    @if($subscription->start_date)
        <div class="item">
            <div class="text-2 text_black-2">Start Date</div>
            <div class="text-2 mt_4 fw-6">{{ \Carbon\Carbon::parse($subscription->start_date)->format('d F Y') }}</div>
        </div>
    @endif

    @if($subscription->end_date)
        <div class="item">
            <div class="text-2 text_black-2">End Date</div>
            <div class="text-2 mt_4 fw-6">{{ \Carbon\Carbon::parse($subscription->end_date)->format('d F Y') }}</div>
        </div>
    @endif
@else
<div class="item">
    <p class="text-muted">No subscription details available.</p>
</div>

@endif
                    </div>
                    <div class="widget-tabs style-has-border widget-order-tab">
                        <ul class="widget-menu-tab">
                            <li class="item-title active">
                                <span class="inner">{{ $profile->name }}'s Profile</span>
                            </li>
                            <li class="item-title">
                                <span class="inner">Horoscope</span>
                            </li>
                            <li class="item-title">
                                <span class="inner">Request</span>
                            </li>
                            <li class="item-title">
                                <span class="inner">Message</span>
                            </li>
                        </ul>
                        <div class="widget-content-tab">
                            <div class="widget-content-inner active">
                                <div class="widget-timeline">

                                        <table class="table table-bordered">
                                            <tbody>
                                                <div class="profile-details">

                                                    <table class="table table-bordered table-responsive">
                                                        <tbody>
                                                            @foreach($profile->toArray() as $key => $value)
    @if(!in_array($key, ['id', 'user_id', 'user_uuid', 'address', 'height_ft', 'weight_kg', 'education_stream', 'specialization', 'working_location', 'created_at','updated_at'])) <!-- Exclude these fields -->
        <tr>
            <th>{{ ucwords(str_replace('_', ' ', $key)) }}</th>
            <td>
                @if($key == 'caste_free')
                    {{ $value == 1 ? 'Yes, I am open to marrying from other communities or castes' : 'No' }}
                @elseif($key == 'country')
                    {{ $country ? $country->name : 'Not Provided' }} <!-- Display country name -->
                @elseif($key == 'state')
                    {{ $state ? $state->name : 'Not Provided' }} <!-- Display state name -->
                @elseif($key == 'city')
                    {{ $city ? $city->name : 'Not Provided' }} <!-- Display city name -->
                @else
                    @if($value === null || $value === '')
                        <span class="text-muted">Not Provided</span>
                    @else
                        {{ $value }}
                    @endif
                @endif
            </td>
        </tr>
    @endif
@endforeach

                                                        </tbody>
                                                    </table>


                                </div>
                            </div>
                            <div class="widget-content-inner">
                                <object class="pdf"
                                data="{{ $getProfileFiles->horoscopes_pdf_path}}"
                                width="800"
                                height="500">
                        </object>
                            </div>
                            <div class="widget-content-inner">
                                <p>Under Construction</p>
                            </div>
                            <div class="widget-content-inner">
                                <p>Under Construction</p>
                            </div>

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


        </div>
    </div>
</section>

<!-- Footer -->
@livewire('footer')
<!-- /Footer -->

@endsection