@extends('layout.layout')
@section('title','Tickets')
@section('ticket','active')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <h5>Ticket Details</h5>

            <div class="callout callout-info mt-3">
                <div class="card-body p-2">
                    <h5 class="text-info"><span name="ticket_name" id="ticket_name">&nbsp;</span></h5><br>
                    <div class="row">
                        <div class="col-12 col-md-12 col-lg-3 order-1 order-md-1">
                            <div class="text-muted">
                                <p class="text-sm">Reference
                                    <b class="d-block" name="ticket_ref" id="ticket_ref">&nbsp;</b>
                                </p>
                                <p class="text-sm">Manager
                                    <b class="d-block" name="ticket_manager" id="ticket_manager">&nbsp;</b>
                                </p>
                                <p class="text-sm">Type
                                    <b class="d-block" name="ticket_type" id="ticket_type">&nbsp;</b>
                                </p>
                                <p class="text-sm">Status
                                    <b class="d-block" name="status" id="status">&nbsp;</b>
                                </p>
                            </div>
                        </div>
                        <div class="col-12 col-md-12 col-lg-3 order-1 order-md-1">
                            <div class="text-muted">
                                <p class="text-sm">Estimate
                                    <b class="d-block" name="estimate_hours" id="estimate_hours">&nbsp;</b>
                                </p>
                                <p class="text-sm">Total hours
                                    <b class="d-block" name="total_hours" id="total_hours">&nbsp;</b>
                                </p>
                                <p class="text-sm">Estimate Duration
                                    <b class="d-block"><span name="start_date"
                                                             id="start_date"></span><span> - </span><span
                                            name="end_date" id="end_date"></span></b>
                                </p>
                                <p class="text-sm">Date closed
                                    <b class="d-block" name="closed_date" id="closed_date">&nbsp;</b>
                                </p>
                            </div>
                        </div>
                        <div class="col-12 col-md-12 col-lg-6 order-2 order-md-2">
                            <div class="row">
                                <div class="col-12 col-sm-12">
                                    <div class="post clearfix text-sm">
                                        Remarks
                                        <p class="text-sm" name="remarks" id="remarks">&nbsp;</p>
                                    </div>
                                    <div class="post clearfix text-sm">
                                        Description
                                        <p class="text-sm" name="ticket_description" id="ticket_description">&nbsp;</p>
                                    </div>
                                    <div class="post clearfix text-sm">
                                        Repository
                                        <p class="text-sm"><a href="#"
                                                              class="link-black text-sm" style="word-break: break-word"
                                                              id="repository"></a>&nbsp;
                                        </p>
                                    </div>
                                    <div class="post clearfix text-sm"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <form id="form-activity">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Resource</label>
                                    <select class="form-control select2"
                                            name="resource_id" id="resource_id"
                                            style="width: 100%;">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Business Unit</label>
                                    <select class="form-control select2"
                                            name="business_unit" id="business_unit"
                                            style="width: 100%;">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-md-12">
                      <span type="button" class="btn btn-sm btn-primary" id="submit_button">
                          <div class="spinner-border spinner-border-sm" role="status" id="button_spinner"
                               style="display: none">
                              <span class="sr-only">Loading...</span>
                          </div>
                          <span><i class="fas fa-search mr-1"></i> Search</span>
                      </span>
                            <span type="button" class="btn btn-sm btn-info" id="back_button">
                          <span><i class="fas fa-arrow-left mr-1"></i> Back</span>
                      </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-cyan">
                <div class="card-header">
                    <i class="fa fa-tasks"></i> <span id="card_header_id">Activities </span>
                    <span class="btn btn-sm btn-primary float-right" onclick="addActivity()"
                          style="margin:-5px; cursor: pointer">
                          <i class="fas fa-plus mr-2"></i>Add Activity
                  </span>
                </div>

                <div class="card-body">
                    <table id="activity-table" class="table table-striped" style="width: 100%; height: 100%;">
                        <thead>
                        <tr>
                            <th>Date Log</th>
                            <th>Activity</th>
                            <th>Brand</th>
                            <th>Type</th>
                            <th>Resource</th>
                            <th>Hours</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <input id="selected_ticket_id" name="selected_ticket_id" value="{{ $selected_ticket_id }}" hidden>
    </section>
{{--    <section class="content">--}}
{{--        <div class="container-fluid">--}}

{{--        </div>--}}

{{--    </section>--}}
@endsection

@section('scripts')
    @include('activity.activity-script')
@endsection

@include('activity.add-activity-index')