@extends('layouts.app')

@section('content')

<style>
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: #ffffff;
}
.select2-container {
  min-width: 400px;
}

.select2-results__option {
  padding-right: 20px;
  vertical-align: middle;
}
.select2-results__option:before {
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  margin-right: 20px;
  vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
  color: #f77750 !important;
  border: 0;
  display: inline-block;
  padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #eaeaeb;
	color: #272727;
}
.select2-container--default .select2-selection--multiple {
	margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
	border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: #f77750;
	border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
	border-width: 2px;
}
.select2-container--open .select2-dropdown--below {
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #fff;
}

/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
	display: none;
}
.select-icon .placeholder {
	display: none;
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
	display: none !important;
	/* content: "" !important; */
}
.select-icon  .select2-search--dropdown {
	display: none;
}

.select2-selection__clear {
  display: none
}

.attachclose a {
  color: #2b2256;
}

#closeattachopt {
    color: #2b2256;
    text-decoration: none;
    font-size: 16px;
    text-align: right;
    float: right;
    margin-right: 10px;
    margin-bottom: 5px;
}

.card-body p {
  margin-bottom: 5px;
}

</style>
<div class="row mt-2">
        <div class="col-9 minheight" style='margin: 0 auto'>
      <div class="widgets">
        <div class="float-left w-100 line" 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;"> {{$data['freight']->name}} </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 class="float-left pt-1">
              {{$enquiry->orgin_country}} ({{$enquiry->orgincountry}}) → {{$enquiry->destination_country}} ({{$enquiry->destinationcountry}})
          </div>
                    <div class="float-right">
            <div class="dropdown">
              <a style="margin-right: 3px;" class="btn btn-primary btn-sm" href="javascript:void(0)" onclick="compose()">
                <i class="fa-solid fa-paper-plane"></i> New Message
              </a>
                          </div>
          </div>
                </div>
                <div class="float-right w-100 mb-4">
                    <div class="float-left">
            <a class="btn btn-red btn-sm needs-confirmation" href="?choose={{$data['freight']->id}}" confirm-text="Are you sure?"><i class="fa-solid fa-check-double"></i> Choose this Service</a>
          </div>
                 <div class="float-right">
            <button title="Refresh Messages" class="border btn btn-light btn-sm" onclick="loadmessages(1)"><i class="fa-solid fa-rotate"></i> Refresh</button>
          </div>
        </div>
                                <center><div class="loader"></div></center>
        <div id="loadmessages"></div>
            </div>
    </div>


  </div>


  <div class="modal fade" id="compose" tabindex="-1" aria-labelledby="composeLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="float-left">
            <h4 class="modal-title" id="composeLabel">Compose New Message</h4>

          </div>
          <div class="float-right">
            <div class="float-right mr-4" style="margin-right: 20px;"><h5>{{date('d M Y')}}</h5></div>
            <p class="m-0">IQ#{{$data['id']}}</p>
          </div>
        </div>
        <div class="modal-body">
          <form id="myform" action="" method="post">
          <div class="row mb-4">
              <div class="col-md-6 col-sm-3">
                  <div class="form-group origin">
                      <label>From</label>
                      <input readonly="readonly" type="text" class="form-control" value="{{$data['user']->name}} - {{$data['shipper']->name}}" id="orgin-country" autocomplete="off"/>
                  </div>
              </div>
              <div class="col-md-6 col-sm-3">
                  <div class="form-group">
                      <label>To</label>
                      <input readonly="readonly" type="text" class="form-control" value="{{$data['freight_user']->name}} - {{$data['freight']->name}}" id="orgin-country" autocomplete="off"/>
                  </div>
              </div>
          </div>
          <div class="row mb-4">
            <div class="col-md-8 col-sm-3">
                <div class="form-group">
                    <label>Subject</label>
                    <input id="subject" type="text" class="form-control" value="" name="subject" autocomplete="off"/>
                </div>
            </div>
          </div>
          <div style="height: 150px" class="editor">

          </div>
          <textarea style="visibility: hidden; height: 10px;" class="w-50  form-control" name="message" id="message"></textarea>
          <style>
          .select2-container--default .select2-selection--multiple {
            height: auto !important;
          }
          .select2-container--default .select2-selection--multiple .select2-selection__choice {
                margin-top: 5px !important;
          }
          </style>
          <div class="float-left attachclose w-100">
            <center>
              <div><lable><b><i class="fa-solid fa-paperclip"></i> Attach Files</b> - <a id="attach_file" href="javascript:void(0)"> Add New File </a></label></div>
            </center>
            <div style="width: 80%; margin: 0 auto">
              <select style="width: 100%" id="loadoptions"  placeholder="Browse Files" class="js-select2 w-100" name="attachs[]" multiple="multiple"></select>
            </div>
           </div>
            <center>
              <input type="hidden" name="_token" value="{{ csrf_token() }}">
              <input type="submit" class="btn btn-primary mt-4 mb-4 attachclose" value="Send Message"/>
            </center>
      </form>
            <form class="w-100  mt-4 attachopen" style="display: none" method="POST" enctype="multipart/form-data" id="laravel-ajax-file-upload3" action="javascript:void(0)" >
        <div class="w-100 float-right">
          <h5 class="float-left">Upload your File</h5>
          <a id="closeattachopt" href="javascript:void(0)"> <i class="fa-solid fa-xmark"></i> Close </a>
        </div>
        <table class="table no-footer">
          <tr>
            <th style="width: 50%">Filename</th>
            <th style="display: none; width: 20%">Document Type</th>
            <th style="width: 50%">Upload File</th>
            <th></th>
          </tr>
          <tr>
            <td style="width: 50%"> <input id="filenamecount" class="form-control" type="text" name="name" value="{{$filename}}" placeholder="Enter Document Name"> </td>
            <td style="display: none; width: 20%">
              <select class="form-control" name="module_path">
                <option value="{{request()->path()}}">Current Enquiry Only</option>
                <option value="">All Enquiries</option>
              </select>
            </td>
            <td style="width: 50%">
              <input class="form-control" type="file" data-role="file" data-button-title="Attach Document" name="file_doc" id="file">
              <span class="text-danger">{{ $errors->first('file') }}</span>
            </td>
            <td class="text-center"> <button type="submit" class="btn btn-primary w-100">Upload</button>  </td>
          </tr>
        </table>


      </form>

      </div>
      <div class="modal-footer attachclose" style="display: block">
        <center>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </center>
      </div>
    </div>
  </div>
  </div>

  <div class="modal fade" id="balance" tabindex="-1" aria-labelledby="trackingLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 500px">
      <div class="modal-content">
        <div class="modal-header">
          <div class="float-left">
            <h4 class="modal-title" id="trackingLabel">Shipment Balance</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 col-sm-3">
                <div class="form-group">
                    <label>Total Amount</label>
                    <p class="m-0">{{$enquiry->currency}} {{number_format((float)$data['offer']->price, 2, '.', '')}}</p>
                </div>
            </div>
            <div class="col-md-12 col-sm-3 mt-2">
                <div class="form-group">
                    <label>Balance Amount</label>
                    <p class="m-0">{{$enquiry->currency}} {{number_format((float)$data['offer']->balance, 2, '.', '')}} </p>
                </div>
            </div>
          </div>

      </div>
      <div class="modal-footer attachclose" style="display: block">
        <center>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </center>
      </div>
    </div>
  </div>
  </div>

<div id="stack3" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Stack Three</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
    <input type="text" data-tabindex="1">
    <input type="text" data-tabindex="2">
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn">Close</button>
    <button type="button" class="btn btn-primary">Ok</button>
  </div>
</div>


<script>

$("#myform").validate({
  rules: {
   subject: "required",
 },
 submitHandler: function(form) {
   var editor = quill.root.innerHTML;
   $('#message').val(editor);
    this.form.submit();
 }
});

loadmessages(1);

var enquiry_no = "{{$data['id']}}";


loadoptions();
function loadoptions() {
  $.ajax(
  {
      url: '/documents/loadoptions?filepath=<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function request() in /home/shipeaze/public_html/dev/resources/views/shipper/messages/conv.blade.php:408
Stack trace:
#0 {main}
  thrown in <b>/home/shipeaze/public_html/dev/resources/views/shipper/messages/conv.blade.php</b> on line <b>408</b><br />