@extends('front.layout.app')

@section('content')
<style>
header {
    background: #011452;
    padding: 0px 0;
}

strong {
    margin-bottom: 100px;
}

strong {
    margin-bottom: 100px;
}

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

.project {
    padding: 290px 0 250px 0;
}

.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: space-between;
}

.prooo .pos {
    padding: 30px !important;
}


/*// summernote //*/
/* Summernote Additional CSS */
.note-editable{
   background: #fff;
}
.note-btn.dropdown-toggle:after {
   content: none;
}
.note-btn[aria-label="Help"]{
   display: none;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu{
   min-width: 185px;
}
/* Customize Summernote editor */
.note-editor {
/* Your custom styles here */
}

.note-editable {
/* Your custom styles here */
}

/* Toolbar customization */
.note-toolbar {
/* Your custom styles here */
}

/* Buttons customization */
.note-btn {
/* Your custom styles here */
}
form i{
    color: #000 !important;
}
@media (min-width: 576px){
.modal-dialog {
    max-width: 745px;
    margin: 1.75rem auto;
}
}

</style>

<main>
    @if(isset($project))
    <section class="project">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-7">
                    <div class="pro1">
                        <div class="title">
                            <div class="img-box">
                                <h1>{{ $project->title }}</h1>
                                <a href="{{ route('org-pro-profile', $project->procurement->id) }}">
                                    <img src="{{ asset($project->procurement->image) }}" class="img-fluid">
                                    <h3>{{ $project->procurement->name }}</h3>
                                </a>
                            </div>
                        </div>

                        <div class="pro-img">
                            <img src="{{ asset($project->image) }}" class="img-fluid" alt="">
                        </div>

                        <div class="content">
                            <h4>About this project</h4>

                            <p>{{ $project->desc }}</p>
                            
                            <div class="usr mt-5 pt-2" id="contactInfo">
                                <h4> Contact Service Provider:</h4>
                                <div class="img-box pt-1 m-0">
                                    <a href="{{ route('org-pro-profile', $project->procurement->id) }}">
                                        <img src="{{ asset($project->procurement->image) }}" class="img-fluid">
                                        <h3>{{ $project->procurement->name }}</h3>
                                    </a>
                                    <article class="entry ">
                                        <a class="btn btn-success w-25 text-light" href="{{ url('https://custom.democlientlink.com/wisezone/public/chatify/'.$project->procurement->id) }}"><span
                                                class="d-flex align-items-center me-2">Chat now</span></a>
                                    </article>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="second-two">
                        <div class="pos">
                            <h2>Standard</h2> <br>
                            @if($project->rate == 'hourly')
                                <h3>${{ $project->budget }} / Hour</h3>
                            @else
                                <h3>${{ $project->budget }} / Fixed</h3>
                            @endif
                            <br>
                            @if(Auth::guard('procurement')->check())
                            @php 
                            $proposal = \App\Models\Proposal::where('procurement_id', Auth::guard('procurement')->user()->id)->where('project_id', $project->id)->first();
                            @endphp
                            @if(isset($proposal))
                            <div class="col-6 bg-success p-3 m-auto rounded">
                                <p class="text-light">Proposal Submitted</p>
                            </div>
                            @else
                            <!--<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#showModal">Submit Proposal</a>-->
                            <a href="javascript:;" class="submitProposal">Submit Proposal</a>
                            @endif
                            @else
                            <!--<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#showModal">Submit Proposal</a>-->
                            <a href="javascript:;" class="submitProposal">Submit Proposal</a>
                            @endif
                        </div>
                    </div>
                    
                    <!-- <div class="row">-->
                    <!--     <div class="second-two">-->
                    <!--    <div class="pos">-->
                    <!--        <h2>Submit your Proposal</h2> <br>-->
                    <!--        <br>-->
                    <!--        <a href="#">Bid here</a>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!-- </div>-->
                </div>
            </div>
        </div>
    </section>


<!-- Modal -->

    <div class="modal fade" id="showModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Submit Your Proposal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('bid.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <input type="hidden" name="project_id" value="{{ $project->id }}">
                            <label for="procurement_id" class="form-label">Cover Letter</label> <br>
                            <textarea class="form-control required" required name="letter"></textarea>
                            <!--<div name="letter" id="summernote"></div>-->
                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">Budget</label>
                            <input type="number" name="budget" required class="form-control required" id="">
                        </div>
                        <ul class="d-flex flex-wrap g-2 pos">
                            @foreach($enumValues as $rate)
                            <li class="mx-2">
                                <div class="custom-control custom-radio">
                                    <input type="radio" required
                                        class="custom-control-input required" 
                                        name="rate" id="{{ $rate }}" value="{{ $rate }}" required>
                                    <label class="custom-control-label"
                                        for="{{ $rate }}">{{ $rate }}</label>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @elseif(isset($procurement))
    <section class="project">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-7">
                    <div class="pro1">
                        <div class="title">
                            <div class="img-box">
                                <a href="{{ route('org-pro-profile', $procurement->id) }}">
                                    <!--<img src="{{ asset($procurement->image) }}" class="img-fluid">-->
                                    <h3>{{ $procurement->organization_name }}</h3>
                                </a>
                            </div>
                        </div>

                        <div class="pro-img">
                            <img src="{{ asset($procurement->image) }}" class="img-fluid" alt="">
                        </div>

                        <div class="content">
                            <h4>About this organization</h4>
                            <p>What is Lorem Ipsum?</p>
                            <p>{{ $procurement->desc }}</p>
                                    
                            <div class="mt-5">
                                <h4>Organization Services</h4>
                
                                    <ul class="the-con">
                                        @foreach($procurement->organizations as $org)
                                            @foreach($org->departments as $depart)
                                            <li class="d-flex my-3">
                                                <p>{{ $depart->department_name }}</p>
                                            </li>
                                            @endforeach
                                        @endforeach
                                    </ul>
                            </div>
                            <div class="usr mt-5 pt-2" id="contactInfo">
                                <h4> Contact Service Provider:</h4>
                                <div class="img-box pt-1 m-0">
                                    <a href="{{ route('org-pro-profile', $procurement->id) }}">
                                        <img src="{{ asset($procurement->image) }}" class="img-fluid">
                                        <h3>{{ $procurement->name }}</h3>
                                    </a>
                                    <article class="entry ">
                                        <a class="btn btn-success w-25 text-light" href="{{ url('https://custom.democlientlink.com/wisezone/public/chatify/'.$procurement->id) }}"><span
                                                class="d-flex align-items-center me-2">Chat now</span></a>
                                    </article>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <!--<div class="col-12 col-lg-4">-->
                <!--    <div class="second-two">-->
                <!--        <div class="pos">-->
                <!--            <h2>Standard</h2> <br>-->
                            
                <!--            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Submit Proposal</a>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
    </section>
    
    @endif

</main>

@section('script')
    <script>
        $('.submitProposal').on('click', function(){
            var modal = document.getElementById('showModal');
            var user = @json(Auth::guard('procurement')->user());
            modal.show();
            if (@json(Auth::guard('procurement')->user())) {
                var membershipStatus = user.membership_status; // Change 'user' to '$user'
                if (membershipStatus == '1') {
                    modal.show();
                } else {
                    toastr.error('Please subscribe to the membership first.');
                    setTimeout(function() {
                        window.location.href = '{{ route("memberShip") }}';
                    }, 2000);
                }
            } else {
                toastr.error('Please Login or Sign up first.');
            }
        });
    </script>
@endsection

@endsection