@extends('layouts2')
@section('title')
<title>My Ads</title>
@endsection


@section('user-content')

    <style>
        .header {
            background-color: #f8f9fa;
            padding: 10px;
            text-align: right;
            font-weight: bold;
        }
        .nav-tabs {
            border-bottom: 1px solid #dee2e6;
        }
        .nav-tabs .nav-link {
            color: #007bff;
            border: 1px solid #dee2e6;
            border-radius: 0;
            margin-right: -1px;
        }
        .nav-tabs .nav-link.active {
            background-color: #fff;
            color: #000;
            border-bottom: 1px solid #fff;
        }
        .tab-content {
            padding: 15px;
        }
        
        img.rounded-circle.me-3
         {
            height: 5vh;
        }
        
        span.buyer {
            background: #2196F3;
            padding: 5px 0 0 0;
            height: 40px;
            border-radius: 55px;
            width: 40px;
            text-align: center;
            font-size: 20px;
            color: #FFFF;
            font-weight: bold;
            margin: 0 10px 0px 0px;
        }
        
         span.seller {
            background:green;
            padding: 5px 0 0 0;
            height: 40px;
            border-radius: 55px;
            width: 40px;
            text-align: center;
            font-size: 20px;
            color: #FFFF;
            font-weight: bold;
            margin: 0 10px 0px 0px;
        }

        .flex-grow-1 {
             
            padding-top: 5px;
        }
    </style>
    
    <div class="container-fluid px-3 py-3">
        <div class="card mb-3 border-0 shadow-sm" style="background: linear-gradient(90deg, #e6f0fa 0%, #ffffff 100%);">
            <div class="card-body d-flex align-items-center">
                <div class="me-3">
                    <img src="/public/images/myAds.png" alt="Icon" class="img-fluid" style="width: 94px;">
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-1 fw-bold" style="color: #1a3c34; font-size: 16px;">Want to sell more?</h6>
                    <p class="mb-0 small" style="color: #6b7280; font-size: 12px;">Post more Ads for less. Packages that help you save money.</p>
                </div>
            </div>
            <div class="card-footer bg-transparent border-top-0 text-center">
                <a class="btn btn-dark btn-sm w-100 rounded-3" style="background-color: #1a3c34; font-size: 14px;" href="/user/pricing-plan/">Show me packages</a>
            </div>
        </div>
         @php
            $properties = DB::table('properties')->where('user_id', Auth::guard('web')->user()->id)->get();
         @endphp
        
        
        <!-- View All Ads Section -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center">
                <h6 class="mb-0 me-2 fw-bold" style="color: #1a3c34; font-size: 16px;">View all ads ({{count($properties)}})</h6>
                <i class="bi bi-chevron-down" style="color: #1a3c34;"></i>
            </div>
        </div>
        
        @if(count($properties)==0)
        <div class="card mb-3 border-0 shadow-sm position-relative">
            <div class="position-absolute top-0 start-0 bottom-0" style="width: 5px; background-color: #1e90ff;"></div>
                <div class="card-body">
                     <h1>No item found</h1>
                     <div class="card-footer bg-transparent border-top-0 text-center">
                        <a href="/user/create-property" class="btn btn-dark btn-sm w-100 rounded-3" style="background-color: #1a3c34; font-size: 14px;">Click to add</a>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        
        @foreach($properties as $row)
        <div class="card mb-3 border-0 shadow-sm position-relative">
            <div class="position-absolute top-0 start-0 bottom-0" style="width: 5px; background-color: #1e90ff;"></div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <p class="small mb-0" style="color: #6b7280; font-size: 12px;">FROM: 30 APR 2025 - TO: 30 MAY 2025</p>
                    <div class="dropdown">
                        <button class="btn btn-link text-muted p-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                            &hellip;
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                            <li><a class="dropdown-item" href="/user/edit-property/{{$row->id}}">Edit</a></li>
                            <li><a class="dropdown-item" href="/my-ads?d=1&id={{$row->id}}">Deactivate</a></li>
                            <li><a class="dropdown-item" href="/my-ads?d=2&id={{$row->id}}">Remove</a></li>
                        </ul>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    <img src="/{{$row->thumbnail_image}}" alt="{{$row->title}}" class="img-fluid me-3 rounded" style="width: 80px; height: 80px; object-fit: cover;">
                    <div class="flex-grow-1">
                        <h6 class="mb-1" style="color: #1a3c34; font-size: 14px;">{{$row->title}}</h6>
                        <p class="mb-1 fw-bold" style="color: #1a3c34; font-size: 16px;">₹{{$row->price}}</p>
                        <!--<div class="d-flex align-items-center small" style="color: #6b7280; font-size: 12px;">-->
                        <!--    <i class="bi bi-eye me-1"></i> Views: 98-->
                        <!--    <span class="mx-2">|</span>-->
                        <!--    <i class="bi bi-heart me-1"></i> Likes: 1-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="d-flex align-items-center mt-3">
                    @if($row->status==1)
                        @php
                            $is_live = "live";
                        @endphp
                    <span class="badge me-2 rounded-pill" style="background-color: #1e90ff; font-size: 12px;">ACTIVE</span>
                    @else
                        @php
                            $is_live = "inactive";
                        @endphp
                     <span class="badge me-2 rounded-pill" style="background-color: red; font-size: 12px;">INACTIVE</span>
                    @endif
                    <p class="mb-0 small" style="color: #6b7280; font-size: 12px;">This ad is currently {{$is_live}}</p>
                </div>
            </div>
            <div class="card-footer bg-white border-top-0 d-flex justify-content-between">
                @if($row->is_sold == 1)
                    <button class="btn btn-danger btn-sm flex-grow-1 rounded-3 mx-auto text-light" style="font-size: 14px; color: #1a3c34; border-color: #d1d5db;">Sold</button>
                @else
                    <a class="btn btn-outline-secondary btn-sm flex-grow-1 me-2 rounded-3" onclick="return confirm('Are you sure want to mark as sold ?');" href="/my-ads/mark-sold/{{$row->id}}" style="font-size: 14px; color: #1a3c34; border-color: #d1d5db;">Mark as sold</a>
                    <button class="btn btn-outline-secondary btn-sm flex-grow-1 rounded-3" style="font-size: 14px; color: #1a3c34; border-color: #d1d5db;">Sell Faster Now</button>
                @endif
            </div>
        </div>
       @endforeach
    
        <!--<div class="card mb-3 border-0 shadow-sm position-relative">-->
        <!--    <div class="position-absolute top-0 start-0 bottom-0" style="width: 5px; background-color: #1e90ff;"></div>-->
        <!--    <div class="card-body">-->
        <!--        <div class="d-flex justify-content-between align-items-center mb-2">-->
        <!--            <p class="small mb-0" style="color: #6b7280; font-size: 12px;">FROM: 29 APR 2025 - TO: 29 MAY 2025</p>-->
        <!--            <div class="dropdown">-->
        <!--                <button class="btn btn-link text-muted p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">-->
        <!--                    &hellip;-->
        <!--                </button>-->
        <!--                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton2">-->
        <!--                    <li><a class="dropdown-item" href="#">Edit</a></li>-->
        <!--                    <li><a class="dropdown-item" href="#">Deactivate</a></li>-->
        <!--                    <li><a class="dropdown-item" href="#">Remove</a></li>-->
        <!--                </ul>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="d-flex align-items-center">-->
        <!--            <img src="/public/uploads/custom-images/property-thumb-2021-10-12-09-42-04-5671.jpg" alt="Samsung Phone" class="img-fluid me-3 rounded" style="width: 80px; height: 80px; object-fit: cover;">-->
        <!--            <div class="flex-grow-1">-->
        <!--                <h6 class="mb-1" style="color: #1a3c34; font-size: 14px;">Samsung Galaxy Grand Neo Plus working</h6>-->
        <!--                <p class="mb-1 fw-bold" style="color: #1a3c34; font-size: 16px;">₹ 0</p>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
        
    </div>
    
    
    <script>
        function letsGo(){
            window.location.href="{{url('properties?page_type=list_view')}}";
        }
    </script>
@endsection