@extends('front.user-dash.layout.app')

@section('content')
<style>
.card{
    background-color: #fff !important;
}
.card-bordered {
    padding: 0 !important;
}

. {
    
}

strong {
    margin-bottom: 100px;
}

.project .second-two .pos {
    text-align: center;
    border: 1px solid #ccc;
    padding: 35px 0 40px 0;
    /* position: fixed; */
    width: 100%;
}


.project .second-two .pos {
    text-align: center;
    border: 1px solid #ccc;
    padding: 35px 0 40px 0;
    /* width: 380px; */
    position: unset;
}

.prooo li {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #000000 !important;
    font-weight: 600;
    line-height: 28px;
}

.prooo ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prooo .pos {
    padding: 25px 16px !important;
}

.pro-bg {
    margin-top: 90px !important;
}

section.tr {
    margin-top: 90px;
    margin-bottom: 90px;
}

section.tr {
    margin-top: 90px !important;
    margin-bottom: 90px;
}

span.user {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #102C2D !important;
    font-weight: 400;
    margin-left: 7px;
}

.card .card-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #000 !important;
    font-weight: 600;
    margin: 14px 0 17px 0;
}

span.start {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #102C2D !important;
    font-weight: 500;
    margin-left: 6px;
}

.strt {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #102C2D !important;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.card .card-body img.img-fluid {
    height: 36px;
    width: 36px;
    object-fit: cover;
}

.card .rat {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #000 !important;
    font-weight: 600;
    margin: 0 9px 0 3px;
}
}

.slick-slide img {
    display: block;
    height: 280px;
    object-fit: cover;
    width: 100%;
}

.thepast p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #000 !important;
    font-weight: 500;
    margin: 22px 20px 25px 20px;
}

.thepast .usr {
    font-weight: 600;
}

.thepast {
    padding: 17px 0 0 0;
}

.thepst {
    margin: 10px 0;
}

.thepst {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.project {
    margin-top: 115px !important;
    padding-bottom: 100px !important
}

.project .img-box a {
    display: flex;
    align-items: center;
    color: #000;
    margin: 15px 0 15px 0;
}

.project .img-box a h3 {
    font-size: 19px;
    font-weight: 500;
    color: #000000;
}

.project .img-box img {
    height: 56px;
    width: 56px;
    border-radius: 50%;
    margin-right: 14px;
}

.project .pro1 h1 {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 5px;
}

.project .content {
    margin-top: 60px;
    border: 1px solid #ccc;
    padding: 27px;
}

.project .content h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 36px;
}

.project .content p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 19px;
}

.project .pro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project .usr h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 17px;
}

.project .usr {
    margin-top: 50px;
}

.project .second-two h3 {
    font-size: 22px;
    font-weight: 500;
    color: #000000;
    font-family: 'Poppins';
    margin: 17px;
    font-family: 'Poppins', sans-serif;
    margin-top: 10px;
}

.project .second-two a {
    background: #011452;
    color: #fff;
    padding: 12px 50px;
    border: 0;
    outline: 0;
    font-size: 17px;
}

.project .second-two {
    position: relative;
}

.project .second-two .pos {
    text-align: center;
    border: 1px solid #ccc;
    padding: 35px 0 40px 0;
    /* position: fixed; */
    margin-top: 15px;
}

.prooo .img-box img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin-right: 0;
}

.thepst {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    padding: 10px 0;
    text-align: initial;
}

.project .second-two .pos {
    margin-top: 110px;
}


</style>
<link href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">


<!-- content @s -->
<div class="nk-content project">
    <div class="container">
        <div class="row justify-content-between">

            <div class="col-12 col-lg-3">
                <div class="second-two prooo">
                <div class="pos">
                        <div class="img-box">
                            <img src="{{ Auth::guard('procurement')->user()->image ? asset(Auth::guard('procurement')->user()->image) : asset('assets/dummy.jpg') }}" class="img-fluid">
                            <h3>{{ Auth::guard('procurement')->user()->organization_name }}</h3>
                        </div>
                        <p>{{ Auth::guard('procurement')->user()->desc }}</p><br>
                        <!-- <h3>$ 489</h3> -->
                        <!-- <a href="javascript:;">Contact</a> -->
                        <hr class="mt-0 mb-5 pt-0">
                        <ul>
                            <li>From: <i class="fa-sharp fa-solid fa-location-dot"></i> United States</li>
                            <li></li>
                        </ul>
                        <ul>
                            <li>Email: <i class="fa-solid fa-envelope"></i> {{ Auth::guard('procurement')->user()->email }}</li>
                            <li></li>
                        </ul>
                        <ul>
                            <li>Phone: <i class="fa-solid fa-phone"></i> +{{ Auth::guard('procurement')->user()->number }}</li>
                            <li></li>
                        </ul>
                        
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-9">

                <div class="row justify-content-center">
                    <div class="col-12 col-lg-12">
                        <div class="pro1 text-center">
                            <h1>Your Project Services</h1>
                            <div class="nk-block-des mb-5 mt-1">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>
                            </div>

                        </div>
                        <div class="row gy-5">
                            @if(isset($projects))
                            @foreach($projects as $project)
                            <div class="col-12 col-sm-6 col-md-6 col-xl-4 panel">
                                <div class="card h-100">
                                    <div class="height">
                                        <img class="card-img-top" src="{{ asset($project->image) }}" alt="Card image cap">
                                    </div>
                                    <div class="padd">
                                        <div class="card-body">
                                            <a href="{{ route('project_detail', $project->slug) }}">
                                                <h5 class="card-title">{{ $project->department->department_name}}</h5>
                                                <p class="card-text">{{ \Illuminate\Support\Str::limit($project->title, 80, '...') }}</p>
                                            </a>

                                        </div>
                                        <hr>
                                        <div class="card-body d-flex justify-content-between">
                                            <div class="card-link"><img
                                                    src="{{ asset($project->procurement->image) }}" class="img-fluid">
                                                <span class="user">{{ $project->procurement->name }}</span>
                                                <span class="start">Starting at: ${{ $project->budget }}</span>
                                            </div>
                                            <div class="text-center m-auto d-flex">
                                                <a class="btn btn-primary" href="{{ route('project.edit', $project->slug) }}" class="card-link strt"><i class="fa-solid fa-pen-to-square"></i></a>
                                                <div class="btn-group" role="group" aria-label="Basic example">
                                                    <button class="btn btn-danger deleteItem" data-pro-id="{{ $project->id }}"><i class="icon ni ni-trash-fill"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            
                            @endif
                        </div>

                    </div>
                </div>


            </div>

        </div>
    </div>
</div>
<!-- content @e -->
    
@section('script')
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

    <script>
        $('.deleteItem').on('click', function(evt) {
            
            var projectId = $(this).data('pro-id');
            var parent = $(this).parent().parent().parent().parent().parent().parent();
            Swal.fire({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
             
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('project.delete') }}",
                    type: 'post',
                    data: {
                        projectId: projectId,
                    }, 
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        Swal.fire(
                          'Deleted!',
                          response.success,
                          'success'
                        )
                        parent.remove();
                    },
                    error:function(response){
                        Swal.fire({
                          icon: 'error',
                          title: 'Oops...',
                          text: 'Something went wrong!',
                        })
                    },
                })
                
              }
            })
            
            
        }); 

    </script>

    
@endsection    
    
    
@endsection