@extends('layouts.main')

@section('title', 'Risk Tolerance')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Risk Tolerance</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Settings</li>
          <li class="breadcrumb-item active">RISK MANAGEMENT</li>
          <li class="breadcrumb-item active">Risk Tolerance</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <script
    defer
    src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
  ></script>

  <div class="clearfix"></div>

  @include('flash::message')

  <div class="clearfix"></div>
  <div class="content-body">
    <div class="row">
      <div class="col-md-12">
        <section class="card">
          <div class="card-header">
          </div>

          <div class="card-body data-table-padding">
            <table class="table table-striped table-responsive">
              <thead>
                <tr>
                  <th class="risk-h">#</th>
                  <th class="risk-h">RISK CONDITION</th>
                  <th class="risk-h">SERVICE</th>
                  <th class="risk-h">TOLERANCE VALUE, h</th>
                  <th class="risk-h">TOLERANCE LEVEL</th>
                </tr>
              </thead>
              <tbody>
                @foreach($tolerances as $tolerance)
                  @php
                    $accountTolerance = $account->tolerances->where('id', $tolerance->id)->first();
                  @endphp

                  <tr x-data="{
                    value: {{ data_get_d($accountTolerance, 'pivot.value') ?: 'null' }},
                    level: {{ data_get_d($accountTolerance, 'pivot.level') ?: head(array_keys($levels)) }},
                    isExists: {{ $accountTolerance ? 'true' : 'false' }},
                    {{-- wait | updated | not-created --}}
                    status: `{{ $accountTolerance ? 'updated' : 'not-created' }}`,
                    send() {
                      let { value, level, isExists, status } = this

                      if ((value && value != '') || level !== null) {
                        this.status = 'wait'

                        $.ajax({
                          url: isExists ? `{{ route('risk-tolerance.update') }}` : `{{ route('risk-tolerance.store') }}`,
                          data: {
                            tolerance_id: {{ $tolerance->id }},
                            value,
                            level,
                            _token: `{{ csrf_token() }}`
                          },
                          type: isExists ? 'PUT' : 'POST',
                          dataType: 'json',
                          success: () => {
                            this.isExists = true
                            this.status = 'updated'
                          }
                        })
                      }
                    },
                  }">
                    <th>{{ $loop->iteration }}</th>
                    <td>{{ $tolerance->condition }}</td>
                    <td>{{ $tolerance->services->pluck('short_name')->implode(', ') }}</td>

                    <td>
                      @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::EDIT_TOLERANCE))
                        <input
                          type="number"
                          min="0"
                          x-model="value"
                          class="dataTable-input"
                          @input.debounce.500ms="(e) => {
                            send()
                          }"
                        >
                      @else
                        <span>{{ data_get($accountTolerance, 'pivot.value') }}</span>
                      @endif
                    </td>
                    <td style="width: 100%;">
                      @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::EDIT_TOLERANCE))
                        <select
                          class="dataTable-selector"
                          x-model="level"
                          @change="(e) => {
                            send()
                          }"
                          @click="(e) => {

                            if(!$(this).closest('td').find('.fa-check').lenght){
                              send()
                            }

                            if (e.target.nodeName === 'OPTION' && e.target.value == level) {
                              send()
                            }
                          }"
                        >
                          @options($levels, [
                            'selected' => data_get_d($accountTolerance, 'pivot.level', null),
                          ])
                        </select>
                      @else
                        @php
                          $level = data_get($levels, data_get_d($accountTolerance, 'pivot.level'), null);
                        @endphp
                        <span>{{ is_array($level) ? null : $level }}</span>
                      @endif

                      <span
                        x-show="status === 'wait'"
                        style="padding: 0 1rem; margin-left: auto;"
                      >
                        <i class="fa fa-spinner" style="font-size: 1.5rem; color: gray;"></i>
                      </span>
                      <span
                        x-show="status === 'updated'"
                        style="padding: 0 1rem; margin-left: auto;"
                      >
                        <i class="fa fa-check" style="font-size: 1.5rem; color: #00ff00;"></i>
                      </span>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <style>
    tr > td:first-child,
    tr > th:first-child {
      width: 1%;
    }

    .risk-h[class] {
      color: #3bafda;
    }
    .card .card-body .dataTable-wrapper .dataTable-container .table tbody tr td:nth-child(2) {
      width: 50%;
      min-width: 250px;
    }
    .card .card-body .dataTable-wrapper .dataTable-container .table tbody tr td:nth-child(3) {
      min-width: 120px;
    }
  </style>

  <script>
    new DataTable(document.querySelector('table'), { sortable: false, perPage: 9999, perPageSelect: false });

    const qs = (selector) => document.querySelector(selector)
    const el = (selector) => document.createElement(selector)

    const link = el('a')
    link.href = '{{ route('risk-assumption-print-certificate') }}'
    link.classList.add('btn', 'btn-info')
    link.innerHTML = 'Print Certificate'
    link.style.float = 'right'
    link.style.marginRight = '10px'
    link.target = '_blank'

    const wr = qs('.dataTable-top')
    wr.append(link)

    qs('.dataTable-search').style.float = 'right'
  </script>
@endsection