1  @extends('livewire.jsons.view-layout')
  2  @section('json-view')
  3      <div class="flex flex-row items-start justify-between space-x-8">
  4          <div class="flex flex-col w-2/6 space-y-8">
  5              @include('json-bodies.partials.information', [
  6                  'information' => $data['information']
  7                  ])
  8          </div>
  9          <div class="flex flex-col w-4/6 space-y-8">
 10              <div x-data="{ tab: 1 }">
 11                  <x-card>
 12                      <ul class="flex text-center border-b border-gray-200">
 13                          <li class="flex-1 cursor-pointer">
 14                              <a x-on:click.prevent="tab=1"
 15                                  :class="tab == 1 ?
 16                                  'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
 17                                  'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
 18                                  <span
 19                                      :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 1 }"></span>
 20                                  {{ __('jsons.panel.form.resources.information') }}
 21                              </a>
 22                          </li>
 23                          <li class="flex-1 cursor-pointer">
 24                              <a x-on:click.prevent="tab=2"
 25                                  :class="tab == 2 ?
 26                                  'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
 27                                  'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
 28                                  <span
 29                                      :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 2 }"></span>
 30                                  {{ __('jsons.panel.form.definitions.list') }}
 31                              </a>
 32                          </li>
 33                          <li class="flex-1 pl-px cursor-pointer">
 34                              <a x-on:click.prevent="tab=3"
 35                                  :class="tab == 3 ?
 36                                  'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
 37                                  'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
 38                                  <span
 39                                      :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 3 }"></span>
 40                                  {{ __('jsons.panel.form.product.list') }}
 41                              </a>
 42                          </li>
 43                      </ul>
 44  
 45                      <div x-show="tab === 1" x-cloak class="flex flex-col mt-8 space-y-4">
 46                          <div class="grid grid-cols-2 gap-4">
 47                              <div class="flex flex-col">
 48                                  <div class="text-sm font-medium text-gray-400">{{
 49                                      __('jsons.panel.form.resources.equipment-test-enviroment') }}
 50                                  </div>
 51                                  <div class="text-sm font-medium">
 52                                      {!!$this->diff('EquipmentAndTestEnvironment') !!}
 53                                  </div>
 54                              </div>
 55                              <div class="flex flex-col">
 56                                  <div class="text-sm font-medium text-gray-400">{{
 57                                      __('jsons.panel.form.resources.itsef-technical-qualification') }}
 58                                  </div>
 59                                  <div class="text-sm font-medium">
 60                                      {!!$this->diff('ItsefTechnicalQualification') !!}
 61                                  </div>
 62                              </div>
 63                              <div class="flex flex-col">
 64                                  <div class="text-sm font-medium text-gray-400">{{
 65                                      __('jsons.panel.form.resources.training-actions') }}
 66                                  </div>
 67                                  <div class="text-sm font-medium">
 68                                      {!!$this->diff('TrainingActions') !!}
 69                                  </div>
 70                              </div>
 71                              <div class="flex flex-col">
 72                                  <div class="text-sm font-medium text-gray-400">{{
 73                                      __('jsons.panel.form.resources.tools-development') }}
 74                                  </div>
 75                                  <div class="text-sm font-medium">
 76                                      {!!$this->diff('ToolsDevelopment') !!}
 77                                  </div>
 78                              </div>
 79                              <div class="flex flex-col">
 80                                  <div class="text-sm font-medium text-gray-400">{{
 81                                      __('jsons.panel.form.resources.developer-evidence') }}
 82                                  </div>
 83                                  <div class="text-sm font-medium">
 84                                      {!!$this->diff('DeveloperEvidence') !!}
 85                                  </div>
 86                              </div>
 87                              <div class="flex flex-col">
 88                                  <div class="text-sm font-medium text-gray-400">{{
 89                                      __('jsons.panel.form.resources.evaluation-activities') }}
 90                                  </div>
 91                                  <div class="text-sm font-medium">
 92                                      {!!$this->diff('EvaluationActivities') !!}
 93                                  </div>
 94                              </div>
 95                              <div class="flex flex-col">
 96                                  <div class="text-sm font-medium text-gray-400">{{
 97                                      __('jsons.panel.form.resources.evaluation-methodology') }}
 98                                  </div>
 99                                  <div class="text-sm font-medium">
100                                      {!!$this->diff('EvaluationMethodology') !!}
101                                  </div>
102                              </div>
103                              <div class="flex flex-col">
104                                  <div class="text-sm font-medium text-gray-400">{{
105                                      __('jsons.panel.form.resources.evaluation-support-activities') }}
106                                  </div>
107                                  <div class="text-sm font-medium">
108                                      {!!$this->diff('EvaluationSupportActivities') !!}
109                                  </div>
110                              </div>
111                          </div>
112                      </div>
113  
114                      <div x-show="tab === 2" x-cloak class="flex flex-col mt-8 space-y-4">
115                          <div class="flex flex-col space-y-4">
116                              @include('json-bodies.partials.definitions', ['definitions' => $this->definitions])
117                          </div>
118                      </div>
119  
120                      <div x-show="tab === 3" x-cloak class="flex flex-col mt-8 space-y-4">
121                          <div class="flex flex-col space-y-4">
122                              <h4 class="text-sm flex items-center"><strong>{{
123                                      __('jsons.panel.form.product.general-product-features')}}</strong> :
124                                  {!! $this->diff('GeneralProductFeatures') !!}</h4>
125                              @include('json-bodies.partials.product-list', ['productList' => $this->productList])
126                          </div>
127                      </div>
128                  </x-card>
129              </div>
130          </div>
131      </div>
132  
133  
134      <div class="mt-8 mb-5">
135          <div x-data="{ tab: 1 }">
136              <x-card>
137                  <ul class="flex text-center border-b border-gray-200">
138                      <li class="flex-1 cursor-pointer">
139                          <a x-on:click.prevent="tab=1" :class="tab == 1 ?
140                              'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
141                              'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
142                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 1 }"></span>
143                              {{ __('jsons.panel.form.changelogs.list') }}
144                          </a>
145                      </li>
146                      <li class="flex-1 pl-px cursor-pointer">
147                          <a x-on:click.prevent="tab=2" :class="tab == 2 ?
148                              'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
149                              'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
150                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 2 }"></span>
151                              {{ __('jsons.panel.form.acronyms.list') }}
152                          </a>
153                      </li>
154                      <li class="flex-1 pl-px cursor-pointer">
155                          <a x-on:click.prevent="tab=3" :class="tab == 3 ?
156                              'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
157                              'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
158                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 3 }"></span>
159                              {{ __('jsons.panel.form.document-references.list') }}
160                          </a>
161                      </li>
162  
163                      <li class="flex-1 pl-px cursor-pointer">
164                          <a x-on:click.prevent="tab=4" :class="tab == 4 ?
165                              'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
166                              'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
167                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 4 }"></span>
168                              {{ __('jsons.panel.form.resources.staff-list') }}
169                          </a>
170                      </li>
171  
172                      <li class="flex-1 pl-px cursor-pointer">
173                          <a x-on:click.prevent="tab=5" :class="tab == 5 ?
174                              'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
175                              'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
176                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 5 }"></span>
177                              {{ __('jsons.panel.form.resources.time-planning-list') }}
178                          </a>
179                      </li>
180                  </ul>
181  
182                  <div x-show="tab === 1" x-cloak class="flex flex-col mt-8 space-y-4">
183                      <div class="flex flex-col space-y-4">
184                          @include('json-bodies.partials.changelogs', ['changelogs' => $this->changelogs])
185                      </div>
186                  </div>
187  
188                  <div x-show="tab === 2" x-cloak class="flex flex-col mt-8 space-y-4">
189                      <div class="flex flex-col space-y-4">
190                          @include('json-bodies.partials.acronyms', ['acronyms' => $this->acronyms])
191                      </div>
192                  </div>
193  
194                  <div x-show="tab === 3" x-cloak class="flex flex-col mt-8 space-y-4">
195                      <div class="flex flex-col space-y-4">
196                          @include('json-bodies.partials.documentReferences', ['documentReferences'=>
197                          $this->documentReferences])
198                      </div>
199                  </div>
200  
201                  <div x-show="tab === 4" x-cloak class="flex flex-col mt-8 space-y-4">
202                      <div class="flex flex-col space-y-4">
203                          @include('json-bodies.partials.staffs', [
204                          'staffs'=> $this->staffs
205                          ])
206                      </div>
207                  </div>
208  
209                  <div x-show="tab === 5" x-cloak class="flex flex-col mt-8 space-y-4">
210                      <div class="flex flex-col space-y-4">
211                          @include('json-bodies.partials.tasks', [
212                          'tasks'=> $this->tasks
213                          ])
214                      </div>
215                  </div>
216              </x-card>
217          </div>
218      </div>
219  @endsection