@extends('dashboard.base')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ asset('css/pages_css/post_project.css') }}" rel="stylesheet">
@endsection

@section('content')

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">Post a Projects</div>

        <div class="">
          @if (session('status'))
          <div class="alert alert-success" role="alert">
            {{ session('status') }}
          </div>
          @endif

          <div class="readersack">
            <div class="container  mt-2"
              style="background-color:#F8F8F8; height:100%; color: #000; box-shadow: 20px 20px 50px 15px grey; margin-bottom: 30px; margin-top: 50px; ">
              <div class="row">
                <div class="col-md-10 offset-md-1">
                  <h3 style="margin-top: 40px; margin-bottom: 30px; text-align: center; "> Post a Project </h3>
                  @if ($errors->any())
                  <div class="alert alert-danger">
                    <ul>
                      @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                      @endforeach
                    </ul>
                  </div>
                  @endif
                  <form method="post" id="handleAjax" action="{{route('projects.store')}}" name="formfield"
                    enctype="multipart/form-data">
                    <div class="m-4">
                      <div class="accordion" id="myAccordion">
                        <div class="accordion-item">
                          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                            aria-expanded="true" data-bs-target="#collapseOne">Step1 - Selection Profile</button>
                          <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                            <div class="card-body">
                              <div class="form-group">
                                <label><span>*</span> Project Title</label>
                                <input type="text" name="project_title" class="form-control" value="{{ old('project_title') }}" id="project_title" required />
                              </div><br>
                              <div class="form-group" style="margin-top: -30px;"> <label><span>*</span> Project Disciplines</label>
                                  <select name="project_disciplines" class="form-control" id="project_disciplines" required>
                                  <option value="Select">Select Project Disciplines</option>
                                  <option>Civil</option>
                                  <option>Mechanical</option>
                                  <option> Electrical</option>
                                  <option> Chemical</option>
                                  <option>Areonautical</option>
                                  <option>Minings</option>
                                  <option>Agriculture</option>
                                  <option> Metallurgical</option>
                                  <option>Electronics</option>
                                  <option> Petrogas</option>
                                  <option> Industrial</option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="m-4">
                      <div class="accordion" id="myAccordion">
                        <div class="accordion-item">
                          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo">Step2 - Main Disciplines</button>
                          <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                            <div class="card-body">
                              <div class="form-group" style="color: #000000"> <label><span>*</span> Engineering
                                  Disciplines</label>
                                <select class="form-control" name="engineering"
                                  data-placeholder="Select a Engineering Disciplines"
                                  style="width: 100%; color: #000000 !important;" tabindex="-1" id="engineering">
                                  <option>Select a Engineering Disciplines</option>
                                  <option>Civil</option>
                                  <option>Mechanical</option>
                                  <option> Electrical</option>
                                  <option> Chemical</option>
                                  <option>Areonautical</option>
                                  <option>Minings</option>
                                  <option>Agriculture</option>
                                  <option> Metallurgical</option>
                                  <option>Electronics</option>
                                  <option> Petrogas</option>
                                  <option> Industrial</option>
                                  <option>Marine</option>
                                  <option> Other engineering (Specify) Total engineering Professions</option>
                                </select>
                              </div>
                              <div class="form-group" style="color: #000000"> <label><span>*</span> Allied
                                  Disciplines</label>
                                <select class="form-control" name="allied"
                                  data-placeholder="Select a Allied Disciplines" style="width: 100%;" tabindex="-1"
                                  id="allied">
                                  <option>Select a Allied Disciplines</option>
                                  <option>Architecture</option>
                                  <option>Regional Planning</option>
                                  <option> Urban Planning </option>
                                  <option> Geology </option>
                                  <option>Economics</option>
                                  <option> Hydrology</option>
                                  <option>Agronomy & Agriculture</option>
                                  <option> Financial Analysis</option>
                                  <option> Computer Science</option>
                                  <option> System Analysis </option>
                                  <option> Soil Science</option>
                                  <option> Business Administration</option>
                                  <option> Other Allied Professions Total Allied Professions</option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="m-4">
                      <div class="accordion" id="myAccordion">
                        <div class="accordion-item">
                          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree">Step3 - Term of Reference </button>
                          <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                            <div class="card-body">
                              <div class="form-group">
                                <label><span>*</span> Summary</label>
                                <textarea type="text" name="summary" class="form-control"
                                  id="summary">{{old('summary')}}</textarea>
                              </div>
                              <br>
                              <div class="form-group" style="margin-top: -30px;"><label><span>*</span> Country of
                                  Assignment</label>
                                <select name="country_assignment" class="form-control" id="country_assignment" required>
                                  <option value="">Select Country</option>
                                  @foreach ($countries as $country)
                                  <option>{{$country->nicename}}</option>
                                  @endforeach
                                </select>
                              </div><br>


                              <div class="form-group">
                                <label><span>*</span> Contact Details for technical queries (optional)</label>
                                <input type="text" name="technical_queries" class="form-control" value="{{ old('technical_queries') }}"
                                  id="technical_queries" />
                              </div>

                              <div class="form-group">
                                <label><span>*</span> General / Specific Experience required</label>
                                <input type="text" name="specific_experience" class="form-control" value="{{ old('specific_experience') }}"
                                  id="specific_experience" />
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Expert required</label>
                                <input type="text" name="expert" class="form-control" value="{{ old('expert') }}" id="expert" />
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Delivery Schedule - Days</label>
                                <input type="text" name="schedule" class="form-control" value="{{ old('schedule') }}" id="schedule" />
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Total Inputs</label>
                                <input type="text" name="total_inputs" class="form-control" value="{{ old('total_inputs') }}" id="total_inputs" />
                              </div><br>

                              <div class="form-group" style="margin-top: -30px;"> <label><span>*</span> Type of Contract
                                </label>
                                <select name="contract" class="form-control" id="contract">
                                  <option value="Select">Select Type of Contract</option>
                                  <option value="Specific">Specific</option>
                                  <option value="On Call (Prequalified consultant will be invited on need basis)">On
                                    Call (Prequalified consultant will be invited on need basis)</option>
                                </select>
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Consulting Max Budget</label>
                                <input type="text" name="consultant_services" class="form-control" value="{{ old('consultant_services') }}"
                                  id="consultant_services" />
                              </div>
                              <div class="form-group">
                                <label for="Approval"><span>*</span> Estimated commencement date</label>
                                <input type="date" id="estimated_date" name="estimated_date" class="form-control" value="{{ old('estimated_date') }}"
                                  id="stimated_date" />
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Option of Prequalification and Request for Proposal (RFP) /
                                  Request for Quote (RFQ)</label>
                                <textarea type="text" name="prequalification"
                                  class="form-control" id="prequalification">{{old('prequalification')}}</textarea>
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Scope of Work (Title Bar and Upload Doc)</label>
                                <div class="custom-file mb-3">
                                  <input type="file" id="test" class="custom-file-input" name="title_bar"
                                    accept="pdf" />
                                  <label class="custom-file-label" for="customFile">Choose file</label>
                                </div>
                              </div>

                              <div class="form-group">
                                <label><span>*</span> Terms and Conditions</label>
                                <textarea type="text" name="term_condition" class="form-control" value="{{ old('term_condition') }}"
                                  id="term_condition"></textarea>

                              </div><br>

                              <div class="control">
                                <label style=" margin-left: 5px;;"><span>*</span> Request a Prequalification Only
                                  Technical Proposal</label><br>
                                <label class="radio" style="margin-left: 7px;">
                                  <input type="radio" value="yes" name="technical_proposal" id="technical_proposal">
                                  Yes
                                </label>
                                <label class="radio" style="margin-left: 5px;">
                                  <input type="radio" value="No" name="technical_proposal" id="technical_proposal">
                                  No
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="m-4">
                      <div class="accordion" id="myAccordion">
                        <div class="accordion-item">
                          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour">Step4 - Selection Method (Fields for selection)</button>
                          <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                            <div class="card-body">
                              <div class="form-group">
                                <label><span>*</span> Technical Qualification </label>
                                <input type="text" name="technical_qualification" class="form-control" value="{{ old('technical_qualification') }}"
                                  id="technical_qualification" />
                              </div>
                              <div class="form-group">
                                <label style=" margin-left: 5px;;"><span>*</span> Upload Relevant Experience and
                                  Experts</label>
                                <input type="text" name="upload_experts" class="form-control" value="{{ old('upload_experts') }}" id="upload_experts" />
                              </div>
                              <div class="form-group">
                                <label><span>*</span> Other documents </label>
                                <div class="input-group hdtuto control-group lst increment">
                                  <input type="file" name="documents" class="myfrm form-control" accept="pdf"
                                    id="documents">
                                  <div class="input-group-btn">
                                    <button class="btn btn-success" type="button"><i
                                        class="fldemo glyphicon glyphicon-plus"></i>Add</button>
                                  </div>
                                </div>
                                <div class="clone hide">
                                  <div class="hdtuto control-group lst input-group" style="margin-top:5px;">
                                    <input type="file" name="documents" class="myfrm form-control" accept="pdf"
                                      id="documents">
                                    <div class="input-group-btn">
                                      <button class="btn btn-danger" type="button"><i
                                          class="fldemo glyphicon glyphicon-remove"></i> Remove</button>
                                    </div>
                                  </div>
                                </div>
                              </div><BR>

                              <div class="form-group" style="margin-top: -30px;"> <label><span>*</span> Commercial
                                  (select one)</label> <select name="commercial" class="form-control" value="{{ old('commercial') }}" id="commercial"
                                  required>
                                  <option value="Select">Select Commercial</option>
                                  <option value="Quality cum Cost">Quality cum Cost</option>
                                  <option value="Quality Based Selection">Quality Based Selection</option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="form-group" style="text-align: center;">
                      <button type="submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit"
                        class="btn btn-default"
                        style="margin-top: 20px; background-color: #004E1E; color: #fff; margin-bottom: 30px;">Submit</button>
                    </div>
                  </form>
                </div>
              </div>

            </div>
          </div>
          <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
              <div class="modal-content" style="width: 700px;">
                <div class="modal-header">
                  Post of Project Preview
                </div>
                <div class="modal-body">
                  Are you sure you want to submit the following details?
                  <table class="table">
                    <tr>
                      <th>Project Title</th>
                      <td><label id="project_title_lb" required></label></td>
                    </tr>
                    <tr>
                      <th>Project Disciplines</th>
                      <td><label id="project_disciplines_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Engineering Discipline </th>
                      <td><label id="engineering_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Allied Disciplines</th>
                      <td><label id="allied_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Summary</th>
                      <td><label id="summary_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Country Assignment</th>
                      <td><label id="country_assignment_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Technical Queries</th>
                      <td><label id="technical_queries_lb"></label></td>

                    </tr>
                    <tr>
                      <th>Specific Experience</th>
                      <td><label id="specific_experience_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Expert required</th>
                      <td><label id="expert_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Delivery Schedule - Days</th>
                      <td><label id="schedule_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Total Inputs</th>
                      <td><label id="total_inputs_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Type of Contract </th>
                      <td><label id="contract_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Consulting Max Budget</th>
                      <td><label id="consultant_services_lb"></label></td>
                    </tr>
                    <tr>
                      <th> Estimated date</th>
                      <td><label id="estimated_date_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Prequalification</th>
                      <td><label id="prequalification_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Scope of Work </th>
                      <td><label id="test_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Term and Condition</th>
                      <td><label id="term_condition_lb"></label></td>
                    </tr>
                    <tr>
                      <th> Technical Proposal</th>
                      <td><label id="technical_proposal_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Technical Qualification</th>
                      <td><label id="technical_qualification_lb"></label></td>
                    </tr>
                    <tr>
                      <th>Relevant Experience </th>
                      <td><label id="upload_experts_lb"></label></td>
                    </tr>
                    <tr>
                      <th> Documents </th>
                      <td><label id="documents_lb"></label></td>
                    </tr>
                    <tr>
                      <th> Commercial</th>
                      <td><label id="commercial_lb"></label></td>
                    </tr>
                  </table>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
                  <a href="#" id="submit" class="btn btn-success success">Submit</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('body_end')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

<script>
  $(".custom-file-input").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  });
</script>
<script type="text/javascript">
  $(document).ready(function() {
      $(".btn-success").click(function(){
          var lsthmtl = $(".clone").html();
          $(".increment").after(lsthmtl);
      });
      $("body").on("click",".btn-danger",function(){
          $(this).parents(".hdtuto").remove();
      });
    });
</script>

<script>
  $(document).ready(function() {
        $( "#collapseOne" ).collapse();
          // Hide the additional photo uploads
          var $additionals = $("#accordion");
          $additionals.hide();
          // Show more photo uploaders when we click
          $("#add-more").on("click", function() {
              $additionals.show();
          });
      });
</script>
<script>
  $('#submitBtn').click(function() {
     $('#project_title_lb').append($('#project_title').val());
     $('#project_disciplines_lb').append($('#project_disciplines').val());
     $('#engineering_lb').append($('#engineering').val());
     $('#allied_lb').append($('#allied').val());
     $('#summary_lb').append($('#summary').val());
     $('#country_assignment_lb').append($('#country_assignment').val());
     $('#technical_queries_lb').append($('#technical_queries').val());
     $('#specific_experience_lb').append($('#specific_experience').val());
     $('#expert_lb').append($('#expert').val());
     $('#schedule_lb').append($('#schedule').val());
     $('#total_inputs_lb').append($('#total_inputs').val());
     $('#contract_lb').append($('#contract').val());
     $('#consultant_services_lb').append($('#consultant_services').val());
     $('#estimated_date_lb').append($('#estimated_date').val());
     $('#prequalification_lb').append($('#prequalification').val());
     $('#test_lb').append($('#test').val());
     $('#term_condition_lb').append($('#term_condition').val());
     $('#technical_proposal_lb').append($('#technical_proposal').val());
     $('#technical_qualification_lb').append($('#technical_qualification').val());
     $('#upload_experts_lb').append($('#upload_experts').val());
     $('#documents_lb').append($('#documents').val());
     $('#commercial_lb').append($('#commercial').val());
});
$('#submit').click(function(){
    $('#formfield').submit();
});
</script>
@endsection