@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-md-3">
      <div class="widgets">
        <div class="goto line w-100 float-left p-0">
          <h4 class="float-left"> Messages </h4>
          <a href="javascript:void(0)" style="margin-right: 3px;" class="nav-link active float-right" data-bs-toggle="modal" data-bs-target="#goto"><i class="fa-solid fa-magnifying-glass"></i></a>
        </div>
        <div class="w-100 float-left">
        <ul id="msgs" class="list-group messages"></ul>
        </div>
      </div>
    </div>


    <div class="col-9 minheight ">
            <div class="widgets">
        @if (Session::get('success'))
        <div class="alert alert-success float-left w-100 mt-4 mb-4">
          <p class="mb-0"><b> <i class="fa-solid fa-check"></i> &nbsp; Tracking Status Updated! </b></p>
        </div>
        @endif
        <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['shipper']->name}} </h4>
              <div class="orderno iqno pt-1"> <a href="/freight/send-offer/{{$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">
            <div>   {{$enquiry->orgin_country}} ({{$enquiry->orgincountry}}) → {{$enquiry->destination_country}} ({{$enquiry->destinationcountry}}) </div>
          </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>
                            <a style="margin-right: 3px;" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="tracking()">
                <i class="fa-solid fa-ship"></i> Delivery Status
              </a>
                        </div>
                    </div>
                </div>

        <div class="float-right w-100 mb-4">
                              <a target="_blank" href="/tracker?iq={{$enquiry->enquiry_no}}" class="float-left pt-1 btn btn-light border btn-sm">
             <b> <i class="fa-solid fa-ship"></i>  Delivery Status: </b> {{$data['status']->name}}
           </a>
           <button style="margin-left: 10px;" class="float-left pt-1 btn btn-light border btn-sm ml-3 datepicker" data-provide="datepicker" data-date-format="dd MM yyyy" data-date="{{date('d M Y', strtotime($data['trackingData']->edd))}}"><i class="fa-solid fa-calendar-days"></i>
             <b> Delivery Date: {{date('d M Y', strtotime($data['trackingData']->edd))}}</b>
           </button>
           <button onclick="balance()" style="margin-left: 10px;" class="float-left pt-1 btn btn-light border btn-sm ml-3"> <i class="fa-solid fa-file-invoice-dollar"></i> <b> Balance: </b> {{$enquiry->currency}} {{number_format((float)$data['offer']->balance, 2, '.', ',')}}
          </button>
                              <div class="float-right">
            <button 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['freight']->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['shipper_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="tracking" 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 Status</h4>
          </div>
        </div>
        <div class="modal-body">
          <form id="trackingform" action="" method="post">
          <div class="row mb-4">
            <div class="col-md-12 col-sm-3">
                <div class="form-group origin">
                    <label>Current Status</label>
                    <select class="form-control w-100" name="status">
                      <option value="0" selected>@lang('general.track_1')</option>
                      <option value="1" >@lang('general.track_2')</option>
                      <option value="2" >@lang('general.track_3')</option>
                      <option value="3" >@lang('general.track_4')</option>
                      <option value="4" >@lang('general.track_5')</option>
                      <option value="5" >@lang('general.track_6')</option>
                      <option value="6" >@lang('general.track_7')</option>
                      <option value="7" >@lang('general.track_8')</option>
                      <option value="8" >@lang('general.track_9')</option>
                    </select>
                </div>
            </div>
          </div>
          <div class="row mb-4">
            <div class="col-md-12 col-sm-3">
                <div class="form-group">
                    <label>Tracking No</label>
                    <input id="tracking_no" type="text" class="form-control" value="{{$data['trackingData']->tracking_no}} " name="tracking_no" autocomplete="off"/>
                </div>
            </div>
          </div>
          <div class="row mb-4">
            <div class="col-md-12 col-sm-3">
                <div class="form-group">
                    <label>Chosen SeaLiner/AirLiner</label>
                    <input id="liner" type="text" class="form-control" value="{{$data['trackingData']->liner}} " name="liner" autocomplete="off"/>
                </div>
            </div>
          </div>
          <div class="row mb-4">
            <div class="col-md-12 col-sm-3">
                <div class="form-group">
                    <label>Estimated Delivery Date</label>
                    <input type="text" class="form-control datepicker" data-provide="datepicker" name="edd" data-date-format="dd MM yyyy" placeholder="Ex: 07 Apr 2025" value="01 Jan 1970" autocomplete="off"/>
                </div>
            </div>
          </div>
            <center>
              <input type="hidden" name="_token" value="{{ csrf_token() }}">
              <input type="hidden" name="tracking" value="1">
              <input type="submit" class="btn btn-primary mt-2 mb-4 attachclose" value="Update Status"/>
            </center>
      </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">
          <form id="balanceform" action="" method="post">
          <div class="row mb-4">
            <div class="col-md-12 col-sm-3">
                <div class="form-group">
                    <label>Total Amount</label>
                    <input id="price" type="text" class="form-control" value="{{number_format((float)$data['offer']->price, 2, '.', '')}}" name="price" autocomplete="off"/>
                </div>
            </div>
            <div class="col-md-12 col-sm-3 mt-3">
                <div class="form-group">
                    <label>Balance Amount</label>
                    <input id="balance_amount" type="number" class="form-control" value="0.00" name="balance_amount" autocomplete="off"/>
                </div>
            </div>
          </div>
            <center>
              <input type="hidden" name="_token" value="{{ csrf_token() }}">
              <input type="hidden" name="balance" value="1">
              <input type="submit" class="btn btn-primary mt-2 mb-4 attachclose" value="Update Balance"/>
            </center>
      </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>


<script>

$("#myform").validate({
  rules: {
   subject: "required",
 },
 submitHandler: function(form) {
   var editor = quill.root.innerHTML;
   $('#message').val(editor);
    this.form.submit();
 }
});
$("#trackingform").validate({
  rules: {
   edd: "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/freight/messages/conv.blade.php:495
Stack trace:
#0 {main}
  thrown in <b>/home/shipeaze/public_html/dev/resources/views/freight/messages/conv.blade.php</b> on line <b>495</b><br />