@extends('dashboard.base')

@section('css')
<style>
    .price_project{
        position: absolute;
        right: 15px;
        top: 15px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="fade-in">
        <div class="row">
            @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="col-sm-12">
                @foreach ($projects as $project)
                <div class="card">
                    <div class="card-header">
                        <h4>{{ $project->project_title }}</h4>
                        <span>Contract - {{ $project->contract }} , Posted {{ Carbon\Carbon::parse($project->created_at)->diffForHumans()}}</span>
                        <h5 class="price_project">{{ $project->engineering }}</h5>
                    </div>
                    <div class="card-body">
                            {{ $project->summary }}
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-light rounded-pill" type="button">{{ $project->country_assignment }}</button>
                        <button class="btn btn-light rounded-pill" type="button">{{ $project->technical_qualification }}</button>
                        <button class="btn btn-light rounded-pill" type="button">{{ $project->expert }}</button>
                        <button class="btn btn-success rounded-0 m-1 float-right" type="button">Details</button>
                        <button class="btn btn-primary rounded-0 m-1 float-right" data-toggle="modal" data-target="#exampleModal" data-id="{{ $project->id }}" data-title="{{ $project->project_title }}" type="button">Apply</button>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
</div>

{{-- Apply Project Modal --}}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Apply Project</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST"  action="{{route('project_requests.store')}}"  enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="project_id" id="project_id">
                    <div class="form-group">
                        <label style=" margin-left: 10px;">Proposal Description</label>
                        <textarea type="text" name="proposal_description" class="form-control" required>{{ old('proposal_description') }}</textarea>
                    </div>
                    <div class="form-group"> <label>Technical Proposal</label>
                        <select id='selUser' name="technical_proposal" class="form-control" required>
                            <option value="">Select Technical Proposal</option>
                            <option value="PEC Gateway format" {{ old('technical_proposal') == "PEC Gateway format" ?? "selected" }}>PEC Gateway format</option>
                            <option value="Other" {{ old('technical_proposal') == "PEC Gateway format" ?? "selected" }}>Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label style=" margin-left: 10px;">Commercial Proposal</label>
                        <input type="text" name="commercial_proposal" value="{{ old('commercial_proposal') }}" class="form-control" required/>
                    </div>
                    <div class="form-group">
                        <label>Cover Letter</label>
                        <div class="custom-file mb-3">
                            <input type="file" id="test" class="custom-file-input" name="cover_letter" accept="pdf/doc" required/>
                            <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- Apply Project Modal End --}}

@endsection

@section('javascript')
<script>
    $(document).ready( function () {
            var exampleModal = document.getElementById('exampleModal')
            exampleModal.addEventListener('show.coreui.modal', function (event) {
            var button = event.relatedTarget
            var project_id = button.getAttribute('data-id')
            var modalBodyInput = exampleModal.querySelector('.modal-body #project_id')
            modalBodyInput.value = project_id

            var project_title = button.getAttribute('data-title')
            var modalTitle = exampleModal.querySelector('.modal-title')
            modalTitle.textContent = project_title + ' (Project Proposal)'
            })
    } );
</script>
@endsection