@extends('layouts.index')
@section('title')
Form Registers
@endsection
@section('css')
        <link
        href="{{asset('back')}}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css"
        rel="stylesheet"
        />
        <link
        rel="stylesheet"
        type="text/css"
        href="{{asset('back')}}/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css"
        />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{url('/')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{url('forms')}}" class="link">Forms</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Registers
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Registers</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <div class="col-md-12 col-lg-6">
                <div class="card text-white">
                  <img
                    class="card-img"
                    style="object-fit: cover"
                    src="https://images.unsplash.com/photo-1514820402329-de527fdd2e6d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"
                    height="180"
                    alt="Card image"
                  />
                  <div class="card-img-overlay text-white">
                    <div class="d-flex no-block align-items-center">
                      <h5 class="font-weight-medium text-white">
                        {{date('d M Y H:i:s')}}
                      </h5>
                      <div class="ms-auto">
                      </div>
                    </div>
                    <span><i class="display-8 ri-windy-line"></i></span>
                    <div class="d-inline-block mt-3 ms-3">
                      <span class="display-8">Hai, {{Auth::user()->name}}</span>
                    </div>
                    <div class="mt-2 mb-2">
                        @php
                            $msg = 'There are still some forms that you have to provide a number :(';
                            if($unregistered == 0){
                                $msg = 'Good, you have given all forms numbers :)';
                            }
                        @endphp
                      <h5 class="mb-0 text-white">{{$msg}}</h5>
                    </div>
                  </div>
                </div>
              </div>
            <div class="col-md-12 col-lg-6">
              <div class="card-group">
                <!-- Column -->
                <div class="card">
                  <a href="?status=Registered" class="stretched-link"></a>
                  <div class="card-body text-center">
                    <div class="p-4">
                      <h2 class="text-success">{{$registered}} <i class="fa fa-file-word"></i></h2>
                      <h5 class="fw-light mt-3 text-success">Registered</h5>
                    </div>
                  </div>
                </div>
                <!-- Column -->
                <!-- Column -->
                <div class="card">
                  <a href="?status=Unregistered" class="stretched-link"></a>
                  <div class="card-body text-center text-danger">
                    <div class="p-4">
                        <h2 class="text-danger">{{$unregistered}} <i class="fa fa-file-word"></i></h2>
                        <h5 class="fw-light mt-3 text-danger">Unregistered</h5>
                      </div>
                  </div>
                </div>
                <!-- Column -->
              </div>
            </div>
          </div>
        <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="border-bottom title-part-padding">
                  <h4>Form List</h4>
                  <h6 class="card-subtitle mb-0">
                    You must immediately provide a number to the form from the list, so that the form can be processed immediately by the signatory.
                  </h6>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table
                      id="zero_config"
                      class="table table-striped table-bordered"
                    >
                      <thead>
                        <tr>
                            <th>Author</th>
                            <th>Subject</th>
                            <th>Number</th>
                            <th>Form Type</th>
                            <th>Correction</th>
                            <th>Created at</th>
                            <th>Opsi</th>
                        </tr>
                      </thead>
                      <tbody id="list">
                        @foreach ($list as $item)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img
                                        src="{{$item->makers->photos_storage}}"
                                        class="rounded-circle"
                                        width="40"
                                        height="40"
                                        />
                                        <span class="ms-3 fw-normal">{{$item->makers->name}}</span>
                                    </div>
                                </td>
                                <td>{{$item->subject}}</td>
                                <td>
                                    @if ($item->number)
                                        <span
                                            class="badge bg-light-success text-success fw-normal"
                                            >{{$item->number}}</span
                                        >
                                    @else
                                        <span
                                            class="badge bg-light-danger text-danger fw-normal"
                                            >Unregistered</span
                                        >
                                    @endif
                                </td>
                                <td>
                                  {{$item->refForm->nama}}
                                </td>
                                <td>
                                  {{$item->registrator_correction ?: '-'}}
                                </td>
                                <td>{{date('d F Y H:i', strtotime($item->created_at))}}</td>
                                <td>
                                    <a href="{{route('forms.detail', $item->hash_id)}}" class="btn btn-sm btn-primary">Detail</a>
                                    @if ($item->number && !$item->isSetTTD())
                                      <a href="{{route('forms.detail', $item->hash_id)}}" class="btn btn-sm btn-info">Set TTD</a>
                                    @endif
                                    <a href="javascript:void(0)" id="number" class="btn btn-sm btn-warning" onclick="correction({{$item->id}})">
                                      Correction
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
@endsection
@section('js')
    <script src="{{asset('back')}}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{asset('back')}}/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js"></script>
    <script src="{{asset('back')}}/js/pages/datatable/datatable-advanced.init.js"></script>
    <script>
        $("#zero_config").DataTable({
          "order": []
        });

        function correction(id) {
          Swal.fire({
            title: 'Enter Correction',
            input: 'text',
            inputAttributes: {
              autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonColor: '#fdc90f',
            confirmButtonText: 'Submit',
            showLoaderOnConfirm: true,
            preConfirm: (correction) => {
              let field = {
                  _token: "{{csrf_token()}}",
                  id_form: id,
                  correction: correction
                };

              return fetch('{{route("forms.registers.correction")}}', {
              method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                  },
                body: JSON.stringify(field)
              })
              .then(response => response.json())
              .then(response => {
                if (response.status == true) {
                  Swal.fire(
                      'Corrected!',
                      '',
                      'success'
                    );
                    setInterval(() => {
                      location.reload()
                    }, 1000);
                }else{
                  if (response.data) {
                        var error = Object.entries(response.data);
                        error.forEach((key,value) => {
                          Swal.showValidationMessage(
                            key[1]
                          )
                        });
                    }
                  
                }
              })
              .catch(error => {
                Swal.showValidationMessage(
                  `Request failed: ${error}`
                )
              })

            },
            allowOutsideClick: () => !Swal.isLoading()
          })
      }
    </script>
@endsection