@extends('front.procurement.layout.app')
@section('content')

<style>
.slider-div h6{
    margin-left: 40px;
}
.thedifCss .prooo .img-box img{
    object-fit: cover;
}
</style>


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

<div class="nk-app-root thedifCss">
    <!-- main @s -->
    <div class="nk-main ">
        <!-- content @s -->
        <div class="nk-content project">
            <div class="container py-5">
                <div class="row justify-content-between">
                    <div class="col-12 col-lg-4">
                        <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">
                                    <a href="javascript:;" class="d-flex justify-content-center my-2 py-0" style="background: transparent;"><h3>{{ Auth::guard('procurement')->user()->organization_name }}</h3></a>
                                </div>
                               
                                <hr class="mt-0 mb-5 pt-0">
                                <ul>
                                    <li>From: <i class="fa-sharp fa-solid fa-location-dot"></i>{{ Auth::guard('procurement')->user()->address }}</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-8">

                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-12">

                                <div class="" id="">
                                    
                                    @if(count($organizations) > 0)  
                                    
                                        <div class="" id="">
                                            
                                            <div class="row">
                                                <h3 class="mt-5 col-9">{{ Auth::guard('procurement')->user()->organization_name }}</h3>
                                                <!--<div class="mt-5 col-3 text-center mb-2 mx-auto d-flex">-->
                                                <!--    <a class="btn btn-primary mr-1" href="#"><i class="fa-solid fa-pen-to-square"></i></a>-->
                                                <!--    <form action="#" method="POST">-->
                                                <!--        @csrf-->
                                                <!--        <button class="btn btn-danger" type="submit"><i class="fa-solid fa-trash"></i></button>-->
                                                <!--    </form>-->
                                                <!--</div>-->
                                                
                                            </div>
                                            
                                            <p>
                                                {{ Auth::guard('procurement')->user()->desc }}
                                            </p>
                                            
                                            <h6>Departments</h6>
                                        
                                            @foreach($organizations as  $org)
                                                
                                                <ul class="the-con">
                                                    
                                                    <li class="d-flex my-3">
                                                        {{ $org->department_name }}
                                                    </li>
                                                </ul>
                                                
                                            @endforeach
                                            <h6>Past Clients</h6>
                                            <p>{{ Auth::guard('procurement')->user()->past_clients }}</p>
                                        </div>
                                    
                                    @endif    
                                
                                </div>

                            </div>
                        </div>


                    </div>

                </div>

            </div>
            <!-- content @e -->



<!--/// This is important for slider ///-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<script>
$('.slider-testi1').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 1000,

responsive: [
{
breakpoint: 1285,
settings: {
arrows: false,
centerMode: true,
centerPadding: '20px',
slidesToShow: 2
}
},
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
</script>
<script>
// $('.nav-link').click(function(){
//     alert("ok");
// $('.slick-list').css('opacity', 0);
// $('.slick-next').click();

// setTimeout(function() { 
// $('.slick-list').css('opacity', 1);
// }, 500);
// });
</script>
<!--/// This is important for slider ///-->


<script>
    
    // $(document).ready(function(){
    //   $('.nav-item').click(function(){
    //       var past_client_id =  $(this).data('id');
          
    //       $.ajax({
    //             url: "{{route('past.client')}}",
    //             type: "POST",
    //             headers: {
    //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //             },
    //             data:{past_client_id:past_client_id},
    //             success: function(data) {
    //                 var dataContainer = '';
    //                  $.each(data, function(index, item){
    //                       dataContainer +='<div>'  
    //                       dataContainer += '<div class="card-body text-start thepast thepst " style="padding: 20px 20px 2px 20px;">';
    //                       dataContainer += '<a href="https://democlientlink.com/html/wisezone/images/av2.png" class="card-link" style="background: #fff !important; padding-top: 10px; display: flex; align-items: center;">'
    //                       dataContainer += '<img src="https://democlientlink.com/html/wisezone/images/av2.png" class="img-fluid me-2">';
    //                       dataContainer += '<span class="user" style="font-weight: 600;">' +item.title+ '</span>'
    //                       dataContainer += '</a>';
    //                       dataContainer += '<p>' +item.description+ '</p>';
    //                       dataContainer += '</div>';
    //                       dataContainer += '</div>';
    //                 });
                    
    //                 $('#data-container').html(dataContainer);
    //                 // $('#result').html(data);
    //             },
    //             error: function() {
                    
    //             }
    //             // ...
    //         });
    //   }) 
        
    // });
    
</script>


@endsection