@extends('sellers.layout.mainlayout')
@section('content')

@php
use Carbon\Carbon;
@endphp

    
    <div class="main-wrapper innerpagebg">
    
        <!-- Header -->
        @include('sellers.layout.top_header')
        <!-- /Header -->
        
        <!-- Breadscrumb Section -->
        <div class="breadcrumb-bar"></div>
        <!-- /Breadscrumb Section -->
        
        <!-- Profile Content -->
        <div class="dashboard-content offset-transform-top listing-section">        
            <div class="container">
                <div class="row">
                          
                    <div class="col-md-12">
                        @include('sellers.layout.header')

                        <div class="profile-content">
                            <div class="dashboard-info">
                                <div class="card">
                                    <div class="card-body flex-column-blk">
                                        <div class="tab-sets">
                                            <div class="tab-contents-sets">
                                                <ul class="nav">
                                                    <li>
                                                        <a href="{{route('seller.myads.form')}}">My Ads</a>
                                                    </li>
                                                    <li>
                                                        <a href="{{route('seller.myads.contacts')}}">Contact Lists</a>
                                                    </li>
                                                    <li>
                                                        <a class="active" href="{{route('seller.myads.expired')}}">Expired Ads</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="tab-content p-0">
                                                    
                                                    <div class="tab-pane p-0 container active" id="myads">
                                                        <div class="card-wrapper">
                                                            <div class="card-border">
                                                                <div class="header-blk">
                                                                    <div class="blk-start">
                                                                        <h4>My Ads</h4>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div class="table-resposnive table-div">
                                                                        <table class="table" id="expiredAdsTable">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Advertisement</th>
                                                                                    <th>Home URL</th>
                                                                                    <th>Price</th>
                                                                                    <th>Featured</th>
                                                                                    <th>Bump at</th>
                                                                                    <th>Date</th>                                                                                    
                                                                                    <th>Status</th>
                                                                                    <th>Action</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>                                                                                
                                                                               <tr>
                                                                                <td>Loading...</td>
                                                                               </tr>
                                                                            </tbody>
                                                                        </table>                                                
                                                                    </div>                                                                  
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- <div class="tab-pane p-0 container fade" id="contactlists">
                                                        <div class="card-wrapper">
                                                            <div class="card-border">
                                                                <div class="header-blk">
                                                                    <div class="blk-start">
                                                                        <h4>My Contacts</h4>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div class="table-resposnive table-div">
                                                                        <table class="table" id="mycontactTable">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Advertisement</th>
                                                                                    <th>Customer name</th>
                                                                                    <th>Email address</th>
                                                                                    <th>Message</th>
                                                                                    <th>Date</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>                                                                         
                                                                
                                                                            </tbody>
                                                                        </table>                                                
                                                                    </div>                                                                  
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> --}}
                                                </div>
                                            </div>                          
                                        </div>
                                    </div>
                                </div>          
                            </div>              
                       </div>                       
                    </div>          
                </div>
            </div>      
        </div>      
        <!-- /Profile Content -->
        
    </div>

    <style>
        .table th, .table td { 
            max-width: 200px; 
            min-width: 70px; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap; 
        }
    </style>

    <!-- scrollToTop start -->
    <div class="progress-wrap active-progress">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919px, 307.919px; stroke-dashoffset: 228.265px;"></path>
        </svg>
    </div>
    <!-- scrollToTop end -->
    
    <!-- Delete -->
     <div class="modal fade" id="delete-item" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Ad</h5>
                    <button class="btn-close close-modal" data-bs-dismiss="modal" type="button" aria-label="Close">
                        <i class="fe fe-x"></i>
                    </button>
                </div>
                    <input type="number" id="del_ad_id" hidden>
                    <div class="modal-body py-0">
                        <div class="del-modal">
                            <p>Are you sure want to Delete?</p>
                        </div>
                    </div>
                    <br>
                    <div class="modal-footer pt-0">
                        <button class="btn btn-cancel" data-bs-dismiss="modal" type="button">Cancel</button>
                        <button class="btn btn-submit .cat-del" id="deletebutton" type="submit">Yes</button>
                    </div>
            </div>
        </div>
    </div>
    <!-- /Delete -->
    
@endsection

@section('customScript')
@endsection