@extends('layouts.app')

@section('content')

<style>
.leftfreight li {
  font-weight: 600;
  color: #1d1646;
}

.leftfreight span {
  font-weight: normal;
}
</style>


<div class="row mt-2">
    <div class="col-md-3">
      <div class="widgets">
        <h4 class="line"> Quotations </h4>
        <ul id="offers" class="list-group messages"></ul>
      </div>
    </div>
    <div class="col-9">
      <div class="widgets minheight">
        <div class="float-left w-100" style="margin-bottom: 1rem;">

          <div class="float-left w-100 line" style="margin-bottom: 1rem;">
              <h4 class="p-0 m-0" style="display:inline-block;">   {{$enquiry->orgin_country}} ({{$enquiry->orgincountry}}) → {{$enquiry->destination_country}} ({{$enquiry->destinationcountry}}) </h4>
              <div class="orderno iqno pt-1"> <a href="/shipper/view_enquiry/{{$data['id']}}" onclick="return !window.open(this.href, 'View', 'height=' + screen.height + ',width=' + screen.width-100 + ',resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes,location=yes')">IQ#{{$data['id']}}</a> </div>
          </div>


        </div>

        @if (session()->has('success'))
          <div class="alert float-left w-100 alert-success">
              @if(is_array(session('success')))
                  <ul class="p-0 m-0" style="list-style: none;">
                      @foreach (session('success') as $message)
                          <li></li>
                      @endforeach
                  </ul>
              @else
                  {{ session('success') }}
              @endif
          </div>
          @endif

        <div class="dropdown float-right mb-3">
          <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
            Sort by
          </button>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
            <li><a class="dropdown-item active" onclick="sort('price')" href="javascript:void(0)">Lowest Price</a></li>
            <li><a class="dropdown-item" onclick="sort('delivery')" href="javascript:void(0)">Fastest Delivery</a></li>
          </ul>
        </div>

        <div id="loadquotations"></div>
      </div>
    </div>


  </div>



  <div class="modal fade" id="sendOffer" tabindex="-1" aria-labelledby="sendOfferLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="float-left">
            <h4 class="modal-title" id="sendOfferLabel">Request for Quotation</h4>

          </div>
          <div class="float-right">
            <div class="float-right mr-4" style="margin-right: 20px;"><h5> Posted {{date('d M Y')}}</h5></div>
            <p class="m-0">IQ#{{$enquiry->enquiry_no}}</p>
          </div>
        </div>
        <div class="modal-body">
          <form id="myform" action="" method="post"  onsubmit="return false">

          <table class="table m-0 table-striped ">
            <tr>
              <th style="vertical-align: middle;" class="w-33" scope="col"> Total Amount ({{$enquiry->currency}}) </th>
              <td style="width: 5%;vertical-align: middle;">:</td>
              <td> <input style="vertical-align: middle;" class="form-control" type="number" min="1" step="any" name="amount" placeholder="{{$enquiry->currency}} 5000" value="0.00" /> </td>
            </tr>
            <tr>
              <th class="w-33" scope="col"> Company Name </th>
              <td style="width: 5%">:</td>
              <td> {{$enquiry->freight}} </td>
            </tr>
            <tr>
              <th class="w-33" scope="col"> Shipper's Company Name </th>
              <td style="width: 5%">:</td>
              <td> {{$enquiry->shipper}} </td>
            </tr>

          </table>


          <div class="card mt-4">
            <div class="card-header">
              <div class="enquiry-header">Rules & Regulations </div>
            </div>
            <div class="card-body">
                <ol>
                  <li> Please note this is not an official quotation. You should send an official quotation after your offer has been accepted by the shipper. </li>
                  <li> This offer should include the total price of the shipper's requirements. The price breakdown can be included in the official quotation.   </li>
                  <li> Make sure there have been no external communications before confirmation. Such actions will negatively impact your company's credibility score.  </li>
                  <li> Once an offer has been sent, it cannot be changed.  </li>
                  <li> Your profile credibility score will be negatively impacted if you send hidden or unrealistic prices and then increase them during quotation.  </li>
                </ol>
            </div>
          </div>

          <div class="card mt-4">
            <div class="card-header">
              <div class="enquiry-header">Additional Notes/Instructions</div>
            </div>
            <div class="card-body">
                <div style="height: 150px" class="editor"></div>
                <textarea style="visibility: hidden" class="w-50  form-control" name="notes" id="notes"></textarea>
            </div>
          </div>


        <center>

        </center>

        <div class="modal-footer" style="display: block">
          <center>
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="currency" value="{{$enquiry->currency}}">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <input type="submit" class="btn btn-primary" value="Send my Offer"/>
          </center>
        </div>
      </form>
      </div>
    </div>
  </div>
  </div>


  <div class="modal fade" id="reviews" tabindex="-1" aria-labelledby="reviewsLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="float-left">
            <h4 class="modal-title" id="reviewsLabel">Reviews</h4></div>
        </div>
        <div class="modal-body  pt-4">
          <div class="row  d-flex justify-content-center mb-4">

              <div class="col-md-8">

                <div id="loadreviews"></div>

              </div>
          </div>

        <div class="modal-footer" style="display: block">
          <center>
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
// ------------step-wizard-------------
$(document).ready(function () {
  $('.nav-tabs > li a[title]').tooltip();

  //Wizard
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    var target = $(e.target);
    var url = e.target;
    var hash = url.toString().split('#')[1];
    $('#step').val(hash);
    if (target.parent().hasClass('disabled')) {
      return false;
    }
  });

  $(".next-step").click(function (e) {

    var active = $('.wizard .nav-tabs li.active');
    active.next().removeClass('disabled');
    nextTab(active);

  });
  $(".prev-step").click(function (e) {

    var active = $('.wizard .nav-tabs li.active');
    prevTab(active);

  });
});

function nextTab(elem) {
  $(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
  $(elem).prev().find('a[data-toggle="tab"]').click();
}


$('.nav-tabs').on('click', 'li', function () {
  $('.nav-tabs li.active').removeClass('active');
  $(this).addClass('active');
});


$(window).on('load', function() {
    $( ".form input" ).attr('autocomplete', 'new-password');
});

getData(1);

function getData(page) {
    $.ajax(
    {
        url: '/shipper/offerslist/{{$data['id']}}?page=' + page,
        type: "get",
        datatype: "html"
    }).done(function(data){
        $("#loadquotations").empty().html(data);
        location.hash = page;
    }).fail(function(jqXHR, ajaxOptions, thrownError){
          alert('No response from server');
    });
}

offers();

function offers() {
    $.ajax(
    {
        url: '/shipper/recentoffers',
        type: "get",
        datatype: "html"
    }).done(function(data){
        $("#offers").empty().html(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError){
          alert('No response from server');
    });
}

function sort(sort) {
  $.ajax(
  {
      url: '/shipper/filter?sort='+sort,
      type: "get",
      datatype: "html"
  }).done(function(data){
      getData(1);
  }).fail(function(jqXHR, ajaxOptions, thrownError){
        alert('No response from server');
  });
}

</script>

@endsection