@extends('user.layout.app')
@section('title', 'Dashboard')

@section('css')
    <link href="{{ asset('css/user_layout.css') }}" rel="stylesheet">
    <style>
        .banner_img {
            background-image: url('{{ Auth::user()->cover_image ? asset('user/cover_image/' . Auth::user()->cover_image) : asset('default-cover.jpg') }}');
            height: 500px;
            background-size: cover;
            background-position: center;
        }
/*  */
.our_cancel_img {
    width: 100%;
    background-image:
url('/assingment-img.jpg');    height: 412px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
position: relative;
}

.nav_main nav a:hover {
            color: #204588!important;
        }
        .our_cancel_img:before {
    content: "";
    background: #2045888c;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    transition: 1s;
}
.our_cancel_img:hover::before {
    opacity: 1;
    right:0;
    transition: 1s;
}


.dish-section{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-left: 15px;
}

.our_cancel_img button{
    width: 100px;
    border: none;
    background: #fb3187;
    color: #fff;
    padding: 2px;
    margin-bottom: 5px;
    transition: 0.5s;
    z-index: 9;
}
.our_cancel_img button:hover{
    background: #fff;
    color: #012b77;
    transition: 0.5s;
}
.our_cancel_img h3{
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    z-index: 9;
}
.our_cancel_img ul{
    width: 100%;
    max-width: 350px;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    z-index: 9;
}
.our_cancel_img ul li{
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.dish-img{
    width: 30%;
    position: relative;
}
.dish-img img{
    width: 100%;
}
.dish-img:before {
    content: "";
    background: #2045888c;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    transition: 1s;
}
.dish-img:hover::before {
    opacity: 1;
    right:0;
    transition: 1s;
}
.dish-text button{
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    color: #fff;
    
}
.food_btn{
    background: #fead1d;
    transition: 0.5s;
}
.food_btn:hover {
    background: #fff;
    color: #012b77;
    transition: 0.5s;
}
.tech_btn{
    background-color: #0979ff;
    transition: 0.5s;
}
.tech_btn:hover {
    background: #fff;
    color:#012b77;
    transition: 0.5s;
}
.travel_btn{
    background-color: #3fd900;
    transition: 0.5s;
}
.travel_btn:hover {
    background: #fff;
    color: #012b77;
    transition: 0.5s;
}

.dish-text{
    width: 65%;
}
.dish-text h2{
    font-size: 16px;
    color: #012b77;
    font-weight: 600;
    margin-top: 10px;

}
.dish-text h3{
    font-size: 14px;
    color: #c5c3c4;
    font-weight: 600;
}
.dish-text span{
    color:  #012b77;
}
.container {
    max-width: 1482px;
    margin-left: 0px;
    padding: 0;
}
.our_sec{
    margin-top:50px;
}
.pad0{
    padding: 0 !important;
}
.marg0{
    margin: 0 !important;
}
.photos{
    background: #012b77e0 !important;
}
.bio{
    transition:0.5s;
}
.bio:hover{
    background: #204588;
    color: #fff;
    transition:0.5s;
}
/*  */
/* meadia query start */
@media screen and (max-width:1366px)  {
    .ag-courses-item_title{
        font-size: 27px;
    }
    .ag-courses-item_link{
        padding: 8px 20px;
        background: #012b77e0;
    }
    .photo-box {
    width:23%;
    height: 77px;
    background-color: #ffffff;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
}
.data h5{
    font-size: 14px;
}
.title{
    font-size: 14px;
}
}
/* 1200 start */
@media screen and (max-width:1200px)  {
    .ag-courses-item_link{
        padding: 20px 20px;
    }
    .ag-courses-item_title{
        font-size: 22px;
    }
}
/* 1200 end */
/* 1024 start */
@media screen and (max-width:1024px)  {
    .nav_main nav a {
        font-size: 14px !important;
}
.user_head {
    height: unset !important;
}
.ag-format-sec{
    display: flex;
    justify-content: space-between;
}
.ag-format-container {
    width: 48%;
}
.ag-courses-item_title{
    font-size: 20px;
}
.ag-courses-item_link{
    padding: 25px 20px;
}
}
/* 1024 */
/* 992 */
@media screen and (max-width:992px)  {
    .our_cancel_img {
        margin-bottom: 20px;
    }
    .dish-section {
        padding-left: 0px;
    }
    .dish-sec{
        padding: 0 !important;
    }
}
/* 992 */
/* 991 */
@media screen and (max-width: 991px) {
    .wrapper{
        font-size: 20px !important;
    
    }
    .image--cover {
    width: 65px !important;
    height: 65px !important;
    }
    .nav_main{
    padding-left: 50px !important;
    }
    .nav_main nav a{
        font-size: 11px !important;
       
    }
    .nav_main nav a {
        font-size: 11px !important;
    }
    .ag-courses-item_link{
        padding: 30px 8px !important;
}
    .ag-courses-item_title {
        font-size: 17px;
    }
    .our_cancel_img {
        margin-bottom: 20px;
    }
    .data h5 {
        font-size: 13px;
    }
    .title {
        font-size: 13px;
    }
    .dish-section{
        padding-left: 0px;
    }
    .popup-window {
    margin-left: -116px !important;
    }
    .dish-sec{
        padding: 0 !important;
    }
}
/* 991 */
/* 767 */
@media screen and (max-width:767px)  {
    .wrapper{
        font-size: 14px !important;
    
    }
    .image--cover {
    width: 55px !important;
    height: 55px !important;
    }
    .nav_main {
        padding-left: 25px !important;
    }
    .nav_main nav a {
        font-size: 1.2vw !important;
    }
    .info{
        flex-direction: column;
    display: flex;

    }
    .l {
        width: 100%;
    }
    .ag-format-sec {
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
    }
    .ag-format-container {
    width: 48%;
    float: left;
}
.info {
    height: unset;
}
.our_cancel_img{
    margin-bottom:20px
}

.dish-text h2 {
    font-size: 3vw;
    margin-top:5px;
    margin-bottom:5px;
}
.dish-text h3 {
    font-size: 3vw;
}
.ag-courses-item_title {
        font-size: 23px;
    }
    .ag-courses-item_link {
        padding: 10px 10px !important;
    }
    .data h5 {
        font-size: 13px;
        padding-left: 74px;
    }
    .bio {
    padding: 10px;
    }
    .container_header {
    height: 125px !important;
}
}
/* 767 end */
/* 520 start */
@media screen and (max-width:520px)  {
    .wrapper{
        font-size: 3vw !important;
    
    }
    .image--cover {
    width: 38px !important;
    height:38px !important;
    margin-left: 8px !important;
    }
    .detail {
    margin-right: 10px !important;
}
.dish-text button {
    padding: 0px 7px;
}
.ag-courses-item_title {
        font-size: 14px;
    }
.ag-courses-item_link {
        padding: 5px 8px !important;
    }
    .data h5 {
        font-size: 16px;
        padding-left: 50px;
    }
    .title {
        font-size: 16px;
    }
    .container_header {
        height: 150px !important;
}
.nav_main nav a {
    font-size: 2.5vw !important;
        width: 40%;
        max-width: 190px;
        text-align: center;
        margin-bottom: 7px;
}
.nav_main nav {
    display: flex;
    flex-wrap: wrap;
}
.our_cancel_img h3 {
    font-size: 23px;
}
}
/* 520 end */
/* meadia query end */
    </style>
@endsection

@section('banner_image')
    <div class="banner_img">
        <button class="edit-button" id="cover_image">
            <svg class="edit-svgIcon" viewBox="0 0 512 512">
                <path
                    d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z">
                </path>
            </svg>
        </button>
    </div>
@endsection

@section('info')

    <div class="info">
        <div class="l">
            <div class="bio">
                <div class="title">BIO:</div>
                <div class="data">
                    <h5>{{{ $currentUser->bio }}} </h5>
                </div>
            </div>
            <div class="photos">
                <div class="photo-box"></div>
                <div class="photo-box"></div>
                <div class="photo-box"></div>
                <div class="photo-box"></div>
             </div>
        </div>
<div class="ag-format-sec">
        <div class="ag-format-container">
            <div class="ag-courses_box">
                <div class="ag-courses_item">
                    <a href="{{ route('subscription') }}" class="ag-courses-item_link">
                        <div class="ag-courses-item_bg"></div>
                        <div class="ag-courses-item_title">
                            MEMBERSHIP FEE <br>
                            $2000.00 <br>
                            @if ($remainingDays !== null)
                                DUE IN {{ $remainingDays }} DAYS
                            @else
                                NOT PAID
                            @endif
                        </div>
                        <div class="ag-courses-item_date-box">
                            <span class="ag-courses-item_date">
                                {{ $annualStatus ? 'PAID' : 'Click to pay' }}
                            </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="ag-format-container sec">
            <div class="ag-courses_box">
                <div class="ag-courses_item">
                    <a href="{{ route('b_fund') }}" class="ag-courses-item_link">
                        <div class="ag-courses-item_bg"></div>
                        <div class="ag-courses-item_title">
                            BENEVOLENT FUND <br>
                            $20000.00 <br>
                            {{ $bFundStatus ? 'PAID' : 'NOT PAID' }}
                        </div>
                        <div class="ag-courses-item_date-box">
                            <span class="ag-courses-item_date">
                                {{ $bFundStatus ? 'PAID' : 'Click to pay' }}
                            </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        </div>
    </div>
@endsection

@section('content')
    <!-- <div class="container_m">
        <div class="left_card">
            <div class="user-details">
                <label for="name">Name:</label>
                <span>{{ $currentUser->name }}</span>
            </div>
            <div class="user-details">
                <label for="email">Email:</label>
                <span>{{ $currentUser->email }}</span>
            </div>
            <div class="user-details">
                <label for="gender">Gender:</label>
                <span>{{ $currentUser->gender }}</span>
            </div>
            <div class="user-details">
                <label for="cug_no">CUG Number:</label>
                <span>{{ $currentUser->cug_no }}</span>
            </div>
            <div class="user-details">
                <label for="designation">Designation:</label>
                <span>{{ $currentUser->designation }}</span>
            </div>
            <div class="user-details">
                <label for="posting_area">Posting Area:</label>
                <span>{{ $currentUser->posting_area }}</span>
            </div>
            <div class="user-details">
                <label for="home_town">Home Town:</label>
                <span>{{ $currentUser->home_town }}</span>
            </div>
            <div class="user-details">
                <label for="date_of_birth">Date of Birth:</label>
                <span>{{ $currentUser->date_of_birth }}</span>
            </div>
            <div class="user-details">
                <label for="marriage_anniversary">Marriage Anniversary:</label>
                <span>{{ $currentUser->marriage_anniversary }}</span>
            </div>
            <div class="user-details">
                <label for="state">State:</label>
                <span>{{ $currentUser->state }}</span>
            </div>
        </div>
    </div> -->
    <!--  -->
   <section class="our_sec">
    <div class="container pad0 marg0">
        <div class="row">
            <div class="col-lg-7 pad0">
                <div class="our_cancel_img">
                  <button>FASHION</button>
                  <h3>Budget Issues Force The Our To Be Cancelled</h3>
                <ul class="flex-div list-inline">
                    <li>BY ADMIN </li>
                    <li><i class="fa fa-calendar"></i> DECEMBER 9, 2021</li>
                    <li><i class="fa fa-comments" aria-hidden="true"></i> 0 comments </li>
                  </ul>
                </div>
            </div>
            <div class="col-lg-5 dish-sec">
                    <div class="dish-section">
                        <div class="dish-img">
                            <img src="{{asset('download.jpg')}}">
                        </div>
                        <div class="dish-text">
                            <button class="food_btn">FOOD</button>
                            <h2>Crafty Cook and Decorate all of our food dishes with love</h2>
                            <h3>by <span>ADMIN</span> <i class="fa fa-calendar"></i> DECEMBER 9, 2021</h3>
                        </div>
                    </div>
                    <div class="dish-section">
                        <div class="dish-img">
                            <img src="{{asset('download.png')}}">
                        </div>
                        <div class="dish-text">
                            <button class="tech_btn">TECHNOLOGY</button>
                            <h2>Crafty Cook and Decorate all of our food dishes with love</h2>
                            <h3>by <span>ADMIN</span> <i class="fa fa-calendar"></i> DECEMBER 9, 2021</h3>
                        </div>
                    </div>
                    <div class="dish-section">
                        <div class="dish-img">
                            <img src="/assingment_image_2.png">
                        </div>
                        <div class="dish-text">
                            <button class="travel_btn">TRAVEL</button>
                            <h2>Crafty Cook and Decorate all of our food dishes with love</h2>
                            <h3>by <span>ADMIN</span> <i class="fa fa-calendar"></i> DECEMBER 9, 2021</h3>
                        </div>
                    </div>
                    
            </div>
        </div>
    </div>
   </section>
   <!--  -->
@endsection
@section('script')
<script>
    document.getElementById('cover_image').addEventListener('click', function() {
        $('#uploadCImageModal').modal('show');
    });
</script>
@endsection