@extends('layouts.main')

@section('title', 'API Cases')

@section('breadcrumb')
  <!-- Page-Title -->
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">API CASES</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">C&RU</li>
          <li class="breadcrumb-item active">API Cases</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')

  <div class="content-body">
    <div class="row" id="setting-cards">
      @include('flash::message')
      <div class="clearfix"></div>

      <div class="col-md-12">
        <div class="card bg-card">
          <div class="card-header">
            <h4 class="card-title m-t-5">API Cases</h4>
          </div>
          <div class="card-body" style="min-height:220px;">
            <div class="card-block">
              <h4 style="margin-bottom: 30px;">For every GET or POST request you make to the API, include the following
                headers in your HTTP request: X-API-Key and X-Client-ID</h4>
              <form class="form" action="{{ route('api_key_settings') }}" method="POST">
                {{ csrf_field() }}
                <div class="form-body">
                  <div class="row">
                    <div class="col-md-2">
                      <label for="account_name">X-Client-ID:</label>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" id="account_name" name="account_name" class="form-control" disabled
                               value="{{ account()->account_name }}"/>
                        <span class="help-block"><strong></strong></span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-2">
                      <label for="api_key">X-API-Key:</label>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" id="api_key" name="api_key" class="form-control" disabled
                               value="{{ $api_key }}"/>
                        <span class="help-block"><strong></strong></span>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <button type="submit" class="btn btn-success btn-custom waves-effect w-md waves-light m-b-5"
                              onclick="return confirm('Are you sure?')">
                        Update Key
                      </button>
                    </div>
                  </div>
                </div>
              </form>
              <h3 style="margin-top: 30px">Endpoints:</h3>
              <h4>1. Cases</h4>
              <p>
                GET https://gmp.test/api/cases <br>
                Description: Retrieve cases with optional filtering by status.<br>
                Available Parameters:<br>
                - 'status' (optional): Filter cases by status. Possible values: 'Closed', 'Open', 'Answered',
                'Suspended'.<br>
                Response Example:
              </p>
              <pre style="width: 80%; color: #555e67; background: none; border: #1d2630 solid 1px; height: 160px">
[
    {
        "id": 000,
        "title": "Case Title",
        "description": "Case Description",
        "status": "Open",
        "cause": "Reason for the case",
        "priority": "Medium",
        "control": "Client",
        "queue": [
            "GOC: Security Incidents to investigate"
        ],
        "type_of_case": "CDS",
        "files": [
            "111": "file_name_1.jpg",
            "123": "file_name_2.pdf",
        ],
        "service": "Managed UTM",
        "notes": [
            {
                "user_data": "User Name",
                "created_at": "2023-08-07T08:06:11.000000Z",
                "note": "test comment 1 ! contains html tags ! "
            },
            {
                "user_data": "User Name",
                "created_at": "2023-08-07T08:06:23.000000Z",
                "note": "comment 2 test ! contains html tags ! "
            }
        ]
    }
]
              </pre>
              <h4>2. Case File: </h4>
              <p>
                GET {{ route('api.caseFile') }} <br>
                Description: Retrieve case file<br>
                Required parameters:<br>
                - 'case_id'<br>
                - 'file_id'<br>
                Response: file
              </p>
              <h4>3. Update Case: </h4>
              <p>POST {{ route('api.updateCase') }} <br>
                Description: Change case status and/or priority.<br>
                Required parameters: <br>
                - 'case_id' <br>
                - 'skywatch_user_email': Email used to log into skywatch. The acknowledge and response time for the case
                will be assigned to this user.<br>
                Available Parameters: <br>
                - 'status'<br>
                - 'priority'<br>
                Note: Request without passing parameters 'status' and 'priority' will update the 'acknowledged_at' date
                if the conditions are met. Endpoint can be used for this purpose.<br>
                Response Example:
              </p>
              <pre style="width: 80%; color: #555e67; background: none; border: #1d2630 solid 1px;">
{
    "success": "Case updated"
}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection