@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title', 'Lista de Cirurgias')
{{-- vendor style --}}
@section('vendor-styles')
  {{-- <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/tables/datatable/extensions/dataTables.checkboxes.css') }}"> --}}
  {{-- <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/tables/datatable/responsive.bootstrap.min.css') }}"> --}}
@endsection
{{-- page style --}}
@section('page-styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-invoice.css') }}">
  <link rel="stylesheet" type="text/css"
    href="{{ asset('https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css') }}">
  <link rel="stylesheet" type="text/css"
    href="{{ asset('https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css') }}">
  <link rel="stylesheet" type="text/css"
    href="{{ asset('https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css') }}">
  <style>
    .text-aling td {
      text-align: center;
    }

    .l-60 {
      width: 60px;
    }

    .l-100 {
      width: 100px;
    }

  </style>
@endsection

@section('content')
  {{-- inicio filtro --}}
  <section class="invoice-list-wrapper">
    <div class="row">
      <div class="col-md-2">
        <div class="invoice-create-btn mb-1">
          <a href="{{route('surgery.create')}}" class="btn btn-primary glow invoice-create" role="button"
            aria-pressed="true">Adicional Cirurgia</a>
        </div>
      </div>
      <div class="col-md-2">
        <fieldset class="form-group position-relative has-icon-left">
          <input type="text" id="min" name="min" class="form-control" placeholder="Data Inicial">
          <div class="form-control-position">
            <i class='bx bx-calendar-check'></i>
          </div>
        </fieldset>
      </div>
      <div class="col-md-2">
        <fieldset class="form-group position-relative has-icon-left">
          <input type="text" id="max" name="max" class="form-control" placeholder="Data Final">
          <div class="form-control-position">
            <i class='bx bx-calendar-check'></i>
          </div>
        </fieldset>
      </div>
    </div>
    {{-- fim menu de filtro --}}
    <div class="action-dropdown-btn d-none">
    </div>
    <div class="table-responsive">
      @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>{{ $message }}</strong>
        </div>
      @endif
      @if (count($errors) > 0)
        <div class="alert alert-danger">
          <strong>Ops!</strong> Ouve algum problema.
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <table id="launchParcel" class="display nowrap text-aling">
        <thead>
          <tr>
            <th class="l-60">#</th>
            <th>Paciente</th>
            <th>Status</th>
            <th>Cirurgião</th>
            <th>Anest.</th>
            <th>Cobrador</th>
            <th>Estab.</th>
            <th class="l-60">Valor</th>
            <th class="l-60">Data ASC.</th>
            <th>Ações</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($surgeries as $item)
          <tr>
              <td class="aling-center">
                @if ($item->status == 0)
                <a href="{{ route('surgery.edit', $item->id) }}">
                  {{ $item->id }}
                  </a>
                @elseif ($item->status == 1)
                <a href="{{ route('surgery.show', $item->id) }}">
                  {{ $item->id }}
                  </a>
                  @endif</td>
              <td>
                {{ $item->patient->name ?? '' }}
              </td>
              <td>
                @if ($item->status == 1)
                  <span class="badge badge-light-sucess badge-pill">Fechado</span></td>
                @else
                  <span class="badge badge-light-danger badge-pill">Aberto</span></td>
                @endif
              </td>
              <td>
                {{ $item->surgeon->name ?? '' }}
              </td>
              <td>
                {{ $item->anesthetist->name ?? '' }}
              </td>
              <td>
                {{ $item->receptor->name ?? '' }}
              </td>
              <td>
                {{ $item->hospital->name ?? '' }}
              </td>
              <td class="l-60">
                {{ $item->expected_value }}
              </td>
              <td>
                {{ date('Y-m-d', strtotime($item->date)) }}
              </td>
              <td class="aling-center">
                @if ($item->status == 0)
                <a href="{{ route('surgery.edit', $item->id) }}" class="invoice-action-edit cursor-pointer">
                    <i class="bx bx-edit warning"></i>
                  </a>
                @elseif ($item->status == 1)
                <a href="{{ route('surgery.show', $item->id) }}" class="invoice-action-show cursor-pointer">
                    <i class="bx bx-show primary"></i>
                  </a>
                  @endif
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </section>
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
  <script src="{{ asset('https://code.jquery.com/jquery-3.5.1.js') }}"></script>
  <script src="{{ asset('https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js') }}"></script>
  {{-- <script src="{{ asset('https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js') }}"></script> --}}
  <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js') }}"></script>
  <script src="{{ asset('https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js') }}"></script>
  <script src="{{ asset('https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js') }}"></script>
  <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js') }}"></script>
  <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js') }}"></script>
  <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js') }}"></script>
  <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js') }}"></script>
  <script src="{{ asset('https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js') }}"></script>
  <script src="{{ asset('https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js') }}"></script>
@endsection
{{-- page scripts --}}
@section('page-scripts')
  <script>
    var minDate, maxDate;

    // Custom filtering function which will search data in column four between two values
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {
        var min = minDate.val();
        var max = maxDate.val();
        var item = data[8].split("-");

        var date = new Date(item[0] + "-" + item[1] + "-" + item[2]);

        if (
          (min === null && max === null) ||
          (min === null && date <= max) ||
          (min <= date && max === null) ||
          (min <= date && date <= max)
        ) {
          return true;
        }
        return false;
      }
    );

    $(document).ready(function() {
      // Create date inputs
      minDate = new DateTime($('#min'), {
        format: 'DD-MM-YYYY'
      });
      maxDate = new DateTime($('#max'), {
        format: 'DD-MM-YYYY'
      });

      // DataTables initialisation
      var table = $('#launchParcel').DataTable({
        dom: 'Bfrtip',
        buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "paging": false,
        "order": [[0, 'desc']],
        "lengthMenu": [
          [-1],
          [10, 25, 50, "All"]
        ],
        "language": {
          "lengthMenu": "Mostrar _MENU_ registros por pagina.",
          "zeroRecords": "Não encontrado - desculpe",
          "info": "Mostrar pagina _PAGE_ de _PAGES_",
          "infoEmpty": "Sem registros disponiveis",
          "infoFiltered": "(Filtrador de _MAX_ todos os registros)"
        },
        "footerCallback": function(row, data, start, end, display) {
          var api = this.api(),
            data;

          // Remove the formatting to get integer data for summation
          var intVal = function(i) {
            return typeof i === 'string' ?
              i.replace(/[\$,]/g, '') * 1 :
              typeof i === 'number' ?
              i : 0;
          };

          // Total over all pages
          total = api
            .column(6)
            .data()
            .reduce(function(a, b) {
              return (intVal(a) + intVal(b)).toFixed(2);
            }, 0);

          // Total over this page
          pageTotal = api
            .column(6, {
              page: 'current'
            })
            .data()
            .reduce(function(a, b) {
              return intVal(a) + intVal(b);
            }, 0);

          // // Update footer
          // $(api.column(6).footer()).html(
          //   'R$' + pageTotal + ' ( R$' + total + ' total)'
          // );
        }
      });

      // Refilter the table
      $('#min, #max').on('change', function() {
        table.draw();
      });
    });
  </script>
@endsection