@extends(backpack_view('blank'))

@php
  $defaultBreadcrumbs = [
    trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
    $crud->entity_name_plural => url($crud->route),
    trans('backpack::crud.list') => false,
  ];

  // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
  $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
@endphp

@section('header')
    <section class="header-operation container-fluid animated fadeIn d-flex mb-2 align-items-baseline d-print-none" bp-section="page-header">
        <h1 class="text-capitalize mb-0" bp-section="page-heading">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</h1>
        <p class="ms-2 ml-2 mb-0" id="datatable_info_stack" bp-section="page-subheading">{!! $crud->getSubheading() ?? '' !!}</p>
    </section>
@endsection

@section('content')
    <div class="color-legend-container row">
      {{-- <div class="col col-12 col-md-3"> 
        <div class="mb-1 fw-bold"><a href="{{ request()->fullUrlWithQuery(['type' => 'retail']) }}">Retail</a></div>
        <div class="legends-block">
          @foreach ( $callTypes as $type )
            @if ($type->name != "prescriptions" && $type->name != "repeats" && $type->call_for == 0)
              <div class="color-legend-block">
                <span class="legend-color bg-calltypeColor{{ $type->id }}">&nbsp;</span>
                <span class="legend-label">{{ $type->value }}</span>
              </div>
            @endif
          @endforeach
        </div>
      </div> --}}
      <div class="col col-12 col-md-3">
        {{-- <div class="mb-1 fw-bold">
            <a href="{{ request()->fullUrlWithQuery(['type' => 'dispensary']) }}">Dispensary</a>   
            <a href="{{ request()->fullUrlWithQuery(['type' => '']) }}"><small>Reset</small></a>
        </div> --}}
        <div class="legends-block">
          {{-- @foreach ( $callTypes as $type )
            @if ($type->name != "prescriptions" && $type->call_for == 1)
              <div class="color-legend-block">
                <span class="legend-color bg-calltypeColor{{ $type->id }}">&nbsp;</span>
                <span class="legend-label">{{ $type->value }}</span>
              </div>
            @endif
          @endforeach --}}
          <div class="color-legend-block">
            <span class="legend-color bg-light-blue">&nbsp;</span>
            <span class="legend-label">Prescription Enquiry</span>
          </div>
          {{-- <div class="color-legend-block">
            <span class="legend-color bg-light-red">&nbsp;</span>
            <span class="legend-label">Prescription Pending</span>
          </div>
          <div class="color-legend-block">
            <span class="legend-color bg-light-green">&nbsp;</span>
            <span class="legend-label">Prescription Ready for collect</span>
          </div>
          <div class="color-legend-block">
            <span class="legend-color bg-light-blue">&nbsp;</span>
            <span class="legend-label">Prescription Complete</span>
          </div>

          <div class="color-legend-block">
            <span class="legend-color bg-calltypeColor0">&nbsp;</span>
            <span class="legend-label">Multiple enquiry</span>
          </div> --}}
        </div>

        
      </div>
      <div class="col col-12 col-md-3">
        <div class="legends-block">
          <div class="color-legend-block">
            <span class="legend-color bg-voicemail">&nbsp;</span>
            <span class="legend-label">Voicemail</span>
          </div>
        </div>
      </div>
      
    </div>


  {{-- Default box --}}
  <div class="row" bp-section="crud-operation-list">

    {{-- THE ACTUAL CONTENT --}}
    <div class="{{ $crud->getListContentClass() }}">

        <div class="row mb-2 align-items-center d-none">
          <div class="col-sm-9">
            @if ( $crud->buttons()->where('stack', 'top')->count() ||  $crud->exportButtons())
              <div class="d-print-none {{ $crud->hasAccess('create')?'with-border':'' }}">

                @include('crud::inc.button_stack', ['stack' => 'top'])

              </div>
            @endif
          </div>
          @if($crud->getOperationSetting('searchableTable'))
          <div class="col-sm-3" style="height: 35px;">
            {{-- <div id="datatable_search_stack" class="mt-sm-0 mt-2 d-print-none">
              <div class="input-icon">
                <span class="input-icon-addon">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
                </span>
                <input type="search" class="form-control" placeholder="{{ trans('backpack::crud.search') }}..."/>
              </div>
            </div> --}}
          </div>
          @endif
        </div>

        {{-- Backpack List Filters --}}
        @if ($crud->filtersEnabled())
          @include('crud::inc.filters_navbar')
        @endif


        <div class="card mb-3 col-6 ms-auto">
          <div class="card-header d-flex justify-content-between p-2">
              <a data-bs-toggle="collapse" href="#filterCollapse" role="button" aria-expanded="false" aria-controls="filterCollapse">
                  <strong>Filters</strong>
              </a>
          </div>

          <div class="collapse {{ request()->hasAny(['from','to','caller_name','contact_number']) ? 'show' : '' }}" id="filterCollapse">
              <div class="card-body p-2">
                  <form method="GET" action="">
                    <div class="row mb-1">
                        <div class="col-md-6">
                            <label for="from" class="form-label mb-1">From</label>
                            <input type="date" name="from" value="{{ request('from') }}" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="to" class="form-label mb-1">To</label>
                            <input type="date" name="to" value="{{ request('to') }}" class="form-control">
                        </div>
                    </div>

                    <div class="row mb-1">
                        <div class="col-md-6">
                            <input type="text" name="caller_name" value="{{ request('caller_name') }}" class="form-control" placeholder="Caller Name">
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="contact_number" value="{{ request('contact_number') }}" class="form-control" placeholder="Contact Number">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-end">
                            <input type="hidden" name="view" value="{{ request('view') }}" class="form-control" placeholder="View">
                            <button type="submit" class="btn btn-primary">Filter</button>
                            <a href="{{ backpack_url('call') . '?view='.request('view') }}" class="btn btn-secondary">Reset</a>
                        </div>
                    </div>
                  </form>
              </div>
          </div>
        </div>

        <div class="{{ backpack_theme_config('classes.tableWrapper') }}">
            <table
              id="crudTable"
              class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-hover nowrap rounded card-table table-vcenter card d-table shadow-xs border-xs' }}"
              data-responsive-table="{{ (int) $crud->getOperationSetting('responsiveTable') }}"
              data-has-details-row="{{ (int) $crud->getOperationSetting('detailsRow') }}"
              data-has-bulk-actions="{{ (int) $crud->getOperationSetting('bulkActions') }}"
              data-has-line-buttons-as-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdown') }}"
              data-line-buttons-as-dropdown-minimum="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownMinimum') }}"
              data-line-buttons-as-dropdown-show-before-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownShowBefore') }}"
              cellspacing="0">
            <thead>
              <tr>
                {{-- Table columns --}}
                @foreach ($crud->columns() as $column)
                  @php
                  $exportOnlyColumn = $column['exportOnlyColumn'] ?? false;
                  $visibleInTable = $column['visibleInTable'] ?? ($exportOnlyColumn ? false : true);
                  $visibleInModal = $column['visibleInModal'] ?? ($exportOnlyColumn ? false : true);
                  $visibleInExport = $column['visibleInExport'] ?? true;
                  $forceExport = $column['forceExport'] ?? (isset($column['exportOnlyColumn']) ? true : false);
                  @endphp
                  <th
                    data-orderable="{{ var_export($column['orderable'], true) }}"
                    data-priority="{{ $column['priority'] }}"
                    data-column-name="{{ $column['name'] }}"
                    data-visible="{{ $exportOnlyColumn ? 'false' : var_export($visibleInTable) }}"
                    data-visible-in-table="{{ var_export($visibleInTable) }}"
                    data-can-be-visible-in-table="{{ $exportOnlyColumn ? 'false' : 'true' }}"
                    data-visible-in-modal="{{ var_export($visibleInModal) }}"
                    data-visible-in-export="{{ $exportOnlyColumn ? 'true' : ($visibleInExport ? 'true' : 'false') }}"
                    data-force-export="{{ var_export($forceExport) }}"
                  >
                    {{-- Bulk checkbox --}}
                    @if($loop->first && $crud->getOperationSetting('bulkActions'))
                      	{!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!}
                    @endif
                    {!! $column['label'] !!}
                  </th>
                @endforeach

                @if ( $crud->buttons()->where('stack', 'line')->count() )
                  <th data-orderable="false"
                      data-priority="{{ $crud->getActionsColumnPriority() }}"
                      data-visible-in-export="false"
                      data-action-column="true"
                      >{{ trans('backpack::crud.actions') }}</th>
                @endif
              </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
              <tr>
                {{-- Table columns --}}
                @foreach ($crud->columns() as $column)
                  <th>
                    {{-- Bulk checkbox --}}
                    @if($loop->first && $crud->getOperationSetting('bulkActions'))
                      	{!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!}
                    @endif
                    {!! $column['label'] !!}
                  </th>
                @endforeach

                @if ( $crud->buttons()->where('stack', 'line')->count() )
                  <th>{{ trans('backpack::crud.actions') }}</th>
                @endif
              </tr>
            </tfoot>
          </table>
        </div>

        @if ( $crud->buttons()->where('stack', 'bottom')->count() )
            <div id="bottom_buttons" class="d-print-none text-sm-left">
                @include('crud::inc.button_stack', ['stack' => 'bottom'])
                <div id="datatable_button_stack" class="float-right float-end text-right hidden-xs"></div>
            </div>
        @endif

    </div>

  </div>

@endsection

@section('after_styles')
  {{-- DATA TABLES --}}
  @basset('https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css')
  @basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')
  @basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css" />

  <style>
      .dtr-control {
          display: none !important;
      }
  </style>
  {{-- CRUD LIST CONTENT - crud_list_styles stack --}}

  {{-- <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/choices.js@11.1.0/public/assets/styles/base.min.css"
  /> --}}
  {{-- <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/choices.js@11.1.0/public/assets/styles/choices.min.css"
  /> --}}
  <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">

  <style>
    #crudTable_reset_button{display:none!important;}
  </style>
  @stack('crud_list_styles')
@endsection

@section('after_scripts')
  @include('crud::inc.datatables_logic')

  <script>
    // setInterval(function(){
    //   if (typeof crud != 'undefined' && typeof crud.table != 'undefined') {
    //     console.log("redraw table");

    //     crud.table.ajax.reload(null, false); // false = keep pagination and filters
    // }
    // }, 5000);

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('remind2fa') === '1') {
        new Noty({
            type: 'error',
            text: 'Reminder: You Pharmasolve account has not enabled Google 2FA. Please go to My Account page or click <a href="{{  backpack_url("edit-account-info"); }}" style="font-weight:700;"> HERE </a> to set it up for account security.',
            timeout: 10000,
            escapeHTML: false // important to render the <a> tag

        }).show();
    }

    document.addEventListener("DOMContentLoaded", function() {
      //poll every 5 seconds
      var pharmacyId = '{{ $pharmacyId }}'; // replace with dynamic pharmacy ID if needed
      setInterval(function() {
          checkPharmacyUpdate(pharmacyId);
      }, 10000);
    });



    //Subscribe to push notifications
    document.addEventListener('DOMContentLoaded', async function() {

      if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;

      const registration = await navigator.serviceWorker.register('/storage/js/service-worker.js');
      let subscription = await registration.pushManager.getSubscription();

      if (!subscription) {
          try {
              // await subscription.unsubscribe(); // remove old subscription
              // console.log("subscription unsubscribe");
              const permission = await Notification.requestPermission();
              if (permission !== 'granted') return;

              subscription = await registration.pushManager.subscribe({
                  userVisibleOnly: true,
                  applicationServerKey: urlBase64ToUint8Array("{{ config('webpush.vapid.public_key') }}")
              });
              console.log(subscription);
              await fetch('{{ url('/admin/save-subscription') }}', {
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json',
                      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                  },
                  body: JSON.stringify(subscription)
              });

              console.log('Auto subscribed for push notifications');
          } catch (e) {
              console.error('Push subscription failed:', e);
          }
      }
      else {
        console.log('User is already subscribed for push notifications');
      }
    });

    function updateCallVerificationType(btn) {
      const callId = btn.dataset.callId;
      const verifyType = btn.previousElementSibling.value;

      fetch(`/admin/verify-call/${callId}`, {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-CSRF-TOKEN': document
                      .querySelector('meta[name="csrf-token"]')
                      .getAttribute('content')
              },
              body: JSON.stringify({
                  verifyType: verifyType
              })
          })
          .then(response => {
              if (response.ok) {

                  new Noty({
                      type: 'success',
                      text: 'Call Verified successfully',
                      timeout: 2000
                  }).show();

              } else {

                  new Noty({
                      type: 'error',
                      text: 'Failed to verify call',
                      timeout: 2000
                  }).show();

              }
          })
          .catch(error => {
              console.error(error);
              new Noty({
                  type: 'error',
                  text: 'Error updating NHI number',
                  timeout: 2000
              }).show();
          });
    }



    function urlBase64ToUint8Array(base64String) {
        var padding = '='.repeat((4 - base64String.length % 4) % 4);
        var base64 = (base64String + padding)
            .replace(/\-/g, '+')
            .replace(/_/g, '/');

        var rawData = window.atob(base64);
        var outputArray = new Uint8Array(rawData.length);

        for (var i = 0; i < rawData.length; ++i) {
            outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
    }


    function updateCounter(textarea) {
        let counter = textarea.parentElement.querySelector('.sms-counter');
        if (!counter) return;

        let length = textarea.value.length;
        counter.textContent = `${length} / {{ config('services.2talk.max_sms_length') }}`;

        if (length > {{ config('services.2talk.max_sms_length') }}) {
            textarea.value = textarea.value.substring(0, {{ config('services.2talk.max_sms_length') }});
            counter.textContent = `{{ config('services.2talk.max_sms_length') }} / {{ config('services.2talk.max_sms_length') }}`;
        }
    }

    // initial bind
    function bindCounters() {
        document.querySelectorAll('.sms-text').forEach(textarea => {
            updateCounter(textarea);

            textarea.removeEventListener('input', textarea._counterHandler);

            textarea._counterHandler = function () {
                updateCounter(this);
            };

            textarea.addEventListener('input', textarea._counterHandler);
        });
    }
    // call on load
    bindCounters();


    async function copyNhi(btn) {
      const wrapper = btn.closest('.nhi-wrapper');
      const input = wrapper.querySelector('input[name="nhi_number"]');
      const popover = wrapper.querySelector('.copy-popover');

      const value = input.value || '';

      try {
          await navigator.clipboard.writeText(value);

          popover.showPopover();
          
          const btnRect = btn.getBoundingClientRect();
          popover.style.position = 'fixed';
          popover.style.left = `${btnRect.left + btnRect.width / 2}px`;
          popover.style.top = `${btnRect.top - 8}px`;
          popover.style.transform = 'translateX(-50%) translateY(-100%)';

          setTimeout(() => {
              popover.hidePopover();
          }, 1500);

      } catch (err) {
          console.error('Copy failed:', err);
      }
    }

    let nhiUpdateTimers = {};
    function updateNhiNumber(input) {

      let patientId = input.getAttribute("data-patient-id");
      let nhiNumber = input.value;

      // Clear previous timer
      clearTimeout(nhiUpdateTimers[patientId]);

      // Wait 3 seconds after typing stops
      nhiUpdateTimers[patientId] = setTimeout(() => {

          console.log("Updating NHI number...");

          fetch(`/admin/patients/${patientId}/update-nhi`, {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-CSRF-TOKEN': document
                      .querySelector('meta[name="csrf-token"]')
                      .getAttribute('content')
              },
              body: JSON.stringify({
                  nhi_number: nhiNumber
              })
          })
          .then(response => {
              if (response.ok) {

                  new Noty({
                      type: 'success',
                      text: 'NHI number updated successfully',
                      timeout: 2000
                  }).show();

              } else {

                  new Noty({
                      type: 'error',
                      text: 'Failed to update NHI number',
                      timeout: 2000
                  }).show();

              }
          })
          .catch(error => {
              console.error(error);
              new Noty({
                  type: 'error',
                  text: 'Error updating NHI number',
                  timeout: 2000
              }).show();
          });
      }, 2000);
    }

  </script>
  {{-- <script src="https://cdn.jsdelivr.net/npm/choices.js@11.1.0/public/assets/scripts/choices.min.js"></script> --}}
  <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>


  {{-- CRUD LIST CONTENT - crud_list_scripts stack --}}
  @stack('crud_list_scripts')
@endsection
<style>

.copy-icon {
    cursor: pointer;
}

.copy-popover {
    margin: 0;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-size: 0.75rem;
    white-space: nowrap;
}
</style>