@extends("admin.template")

@section('content')
  <h1 class="page-title">
    {{ucfirst($action)}} Ticket
  </h1>

  <div class="portlet light bordered" id="app">
    <div class="portlet-body form">

      <div class="tabbable">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#tab-general" data-toggle="tab">
              Ticket </a>
          </li>
          <li>
            <a href="#tab-history" data-toggle="tab">History</a>
          </li>
        </ul>
        <div class="tab-content no-space">
          <div class="tab-pane fade active in" id="tab-general">
            <form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
              {!! csrf_field() !!}
              <div style="padding:0 20px;margin-bottom: 20px">
                <div>
                    <img src="{{url('assets/images/'.Setting::getSetting('ticket_company_logo'))}}" style="height: 40px; margin-top: 30px; margin-bottom: 20px;">
                    <div style="float:right;margin-top: 30px;font-size:14px;line-height:1.4em;font-weight:600;font-family:Arial !important">
                        {{Setting::getSetting('ticket_company_name')}}<br>
                        {{Setting::getSetting('ticket_address')}} <br>
                        {{Setting::getSetting('ticket_tel_no')}} <br>
                        Email : {{Setting::getSetting('ticket_email')}} <br>
                        Website : <a href="{{Setting::getSetting('ticket_website')}}" style="color:black;text-decoration:none">{{str_replace("https://","",str_replace("http://","",Setting::getSetting('ticket_website')))}}</a> <br>
                        Co. Reg No {{Setting::getSetting('ticket_registration_no')}}
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div style="margin-top:50px;font-size:14px;line-height:1.4em">
                  <div style="float:left;width:50%">
                    Customer Name: {{ $ticket->request_by->fullname }}<br>
                    Addresss: {{ $ticket->request_by->address }}<br>
                    @if($ticket->request_by->no_tel)
                    Tel: {{$ticket->request_by->no_tel}}<br>
                    @endif
                    HP: {{$ticket->request_by->mobile}}<br>
                    Email: {{$ticket->request_by->email}}
                  </div>
                  <div style="float:right;margin-right:80px">
                    Quotation: <br>
                    {{$ticket->quotation_no}} <br>
                    {{$ticket->sales_person}} ( HP: {{$ticket->contact_no}}) <br>
                    {{ ViewHelper::formatDate($ticket->quotation_date)}}
                  </div>
                  <div style="clear:both"></div>
              </div>
              
              <br>

              <div style="margin-bottom: 40px">
                <h4>Issues</h4>
                <table style="border-collapse: collapse;width:100%">
                  <thead>
                  <tr>
                    <th width="33%" style="border: 1px solid #ddd; padding: 8px;">Image</th>
                    <th width="33%" style="border: 1px solid #ddd; padding: 8px;">Issue</th>
                    <th width="33%" style="border: 1px solid #ddd; padding: 8px;">Expected</th>
                  </tr>
                  </thead>@foreach($ticket->issues as $issue)
                    <tbody>
                    <tr>
                      <td style="border: 1px solid #ddd; padding: 8px;"><img src="{{asset("assets/images/tickets/".$issue->image)}}" width="100%" class="ticket-image"></td>
                      <td style="border: 1px solid #ddd; padding: 8px;">{{ $issue->issue_desc }}</td>
                      <td style="border: 1px solid #ddd; padding: 8px;">{{ $issue->expected_desc }}</td>
                    </tr>
                    </tbody>
                  @endforeach
                </table>
              </div>

              <div style="margin-bottom: 40px">
                <h4>Preferred Slots</h4>
                <table style="border-collapse: collapse;width:100%">
                  <thead>
                  <tr>
                    <th width="50%" style="border: 1px solid #ddd; padding: 8px;">Date</th>
                    <th width="50%" style="border: 1px solid #ddd; padding: 8px;">Time</th>
                  </tr>
                  </thead>
                  @foreach($ticket->preferred_slots as $slot)
                    <tbody>
                    <tr>
                      <td style="border: 1px solid #ddd; padding: 8px;">{{ ViewHelper::formatDate($slot->date) }}</td>
                      <td style="border: 1px solid #ddd; padding: 8px;">{{ ViewHelper::formatTime($slot->time_start) }} to {{ ViewHelper::formatTime($slot->time_end) }}</td>
                    </tr>
                    </tbody>
                  @endforeach
                </table>
              </div>
              <div style="margin-bottom: 20px;font-size:14px;">
                <h4>Description</h4>
                <div>{!! $ticket->quotation_desc !!}</div>
              </div>
              
              <div>
                <h4 style="text-align:center">Total Payment</h4>
                <div style="color: #333;
                  background-color: #f5f5f5; border-color: #ddd; text-align: center; padding: 10px 15px;
                  border-top: 1px solid #ddd;
                  border-bottom: 1px solid #ddd;
                ">
                  <span class="panel-title text-center" style="font-size: 16px;">
                    <b class="quoted-price">{{ ViewHelper::formatCurrency($ticket->quoted_price) }}</b><br>
                  </span>
                </div>
              </div>

              @if(! isset($hide_footer))
              <br><br>
              <div style="font-size:14px">
                  <br>
                  If you have any questions or encounter any issues, please email us at {{$frontend['contents']['email']}}.
                  <br><br>
                  Regards,<br>
                  Mr Wright
                </div>
                @endif
              </div>

              <div class="form-actions">
                <div class="row">
                  <div class="col-md-6">
                    <div class="row">
                      <div class="col-md-offset-3 col-md-9">
                        <div>
                          @if($ticket->stat == TicketStat::Quoted && ViewHelper::hasAccess('ticket_respond'))
                            <div>
                              <textarea name="accept_decline_reason" title="" class="form-control textarea-ticket-submit" placeholder="[Optional] Please share with us the reason for accepting or declining">
                              </textarea>
                            </div>

                            <div>
                              <button type="submit" name="submit" class="btn blue" value="Accept">
                                Accept
                              </button>
                              <button type="submit" name="submit" class="btn blue" value="Decline">
                                Decline
                              </button>
                            </div>
                          @elseif($ticket->stat == TicketStat::Accepted && ViewHelper::hasAccess('ticket_complete'))
                            <div><button type="submit" name="submit" class="btn blue" value="Complete">
                                Complete
                              </button></div>
                          @elseif($ticket->stat == TicketStat::Completed && ViewHelper::hasAccess('ticket_invoice'))
                            <div><button type="submit" name="submit" class="btn blue" value="Send Invoice">
                                Send Invoice
                              </button></div>
                          @elseif($ticket->stat == TicketStat::Invoiced && ViewHelper::hasAccess('ticket_pay'))
                            <div class="mt-radio-list">
                              @foreach($payment_methods as $index => $payment_method)
                                <label class="mt-radio mt-radio-outline">
                                  <input type="radio" name="payment_method" value="{{$payment_method->value}}" @click="selectPaymentMethod('{{$payment_method->value}}')"
                                  @if($index == 0)
                                    checked
                                  @endif
                                  > {{$payment_method->name}}
                                  <span></span>
                                </label>
                              @endforeach
                              <input type="text" name="ref_no" v-show="showRefNo" class="form-control" placeholder="Ref No">
                            </div>
                            <br>
                            <div><button type="submit" name="submit" class="btn blue" value="payment submited">
                                Submit
                              </button></div>

                          @endif
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6"> </div>
                </div>
              </div>
            </form>
          </div>
          <div class="tab-pane fade" id="tab-history">
            @include('admin.ticket.history', ['ticket'=>$ticket])
          </div>

        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    $(document).ready(function(){
      $("#btn-adjust").click(function() {
        $("#txt-quoted-price").show();
      });
    });

    var vm = new Vue({
      el: "#app",
      data: {
        showRefNo: false
      },
      methods: {
        selectPaymentMethod: function(pm) {
          this.showRefNo = pm == 'B' || pm == 'Q';
        }
      },
    });
  </script>
@endsection