@extends('layouts.mainlayout')
  @section('title', 'platforms')
  @section('main')

  @php
    $allPlatforms = ['Chrome_extension', 'Mobile_Device', 'Biometric', 'Browser'];
    $savedPlatforms = isset($platformMarkval) ? json_decode($platformMarkval->value, true) : [];

    // If no platforms saved, default to Chrome_extension onlys
    if (empty($savedPlatforms)) {
      $savedPlatforms = ['Chrome_extension'];
    }
  @endphp

  <div class='card'>
    
    <div class="col-lg-12 mt-3">
      <div class="alert alert-info" role="alert">
        <div class="p-3 rounded shadow-sm" style="background: #f0f8ff; border-left: 5px solid #007bff;">
          <h5 class="mb-1" style="color:#007bff; font-weight:600;">
            Attendance Platforms
          </h5>
          <strong>Note:</strong> At least one platform must always remain selected. 
        </div>
      </div>
    </div>
    
    
    <div class="col-lg-12 form-group">
      <form>
        @csrf
        <div class="form-check form-check-inline mt-3">
          <input type="checkbox" 
            class="weekend form-check-input-styled-primary" 
            id="only_Chrome_extension" 
            name="check1" 
            value="Chrome_extension"
            @if(in_array('Chrome_extension', $savedPlatforms)) checked @endif
          >
          <label class="form-check-label" for="only_Chrome_extension"><strong>Chrome extension</strong></label>
        </div>

        <div class="form-check form-check-inline">
          <input type="checkbox" 
            class="weekend form-check-input-styled-primary" 
            id="only_Mobile_Device" 
            name="check2" 
            value="Mobile_Device"
            @if(in_array('Mobile_Device', $savedPlatforms)) checked @endif
          >
          <label class="form-check-label" for="only_Mobile_Device"><strong>Mobile Device</strong></label>
        </div>

        <div class="form-check form-check-inline">
          <input type="checkbox" 
            class="weekend form-check-input-styled-primary" 
            id="Biometric" 
            name="check3" 
            value="Biometric"
            @if(in_array('Biometric', $savedPlatforms)) checked @endif
          >
          <label class="form-check-label" for="Biometric"><strong>Biometric</strong></label>
        </div>

        <div class="form-check form-check-inline">
          <input type="checkbox" 
            class="weekend form-check-input-styled-primary" 
            id="Browser" 
            name="check4" 
            value="Browser"
            @if(in_array('Browser', $savedPlatforms)) checked @endif
          >
          <label class="form-check-label" for="Browser"><strong>Browser</strong></label>
        </div>
      </form>
    </div>
     <!-- BIOMETRIC SECTION -->
  <div id="biometricSection" class="col-lg-12 mt-3" style="display:none;">
    <div class="card p-3 border">
      <h6><strong>Add Biometric Device</strong></h6>

      <div class="row mt-2">
        <div class="col-md-5">
          <input type="text" id="machine_name" class="form-control" placeholder="Machine Name">
        </div>

        <div class="col-md-5">
          <input type="text" id="machine_id" class="form-control" placeholder="Machine ID">
        </div>

        <div class="col-md-2">
          <button type="button" id="saveBiometric" class="btn btn-primary w-100">
            Save
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- SAVED DEVICES TABLE -->
  @if(!empty($biometricDevices) && count($biometricDevices))
  <div class="col-lg-12 mt-3">
    <div class="card p-3">
      <h6><strong>Saved Biometric Devices</strong></h6>

      <table class="table table-bordered mt-2">
        <thead>
          <tr>
            <th>#</th>
            <th>Machine Name</th>
            <th>Machine ID</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($biometricDevices as $key => $device)
          <tr>
            <td>{{ $key + 1 }}</td>
            <td>{{ $device['machine_name'] ?? '-' }}</td>
            <td>{{ $device['machine_id'] ?? '-' }}</td>
            <td>
    <button class="btn btn-danger btn-sm deleteDevice"
            data-id="{{ $device['machine_id'] }}">
      Delete
    </button>
  </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endif
  </div>

  <script type='text/javascript'>
  // ✅ Show biometric section if already checked
  if ($('#Biometric').is(':checked')) {
    $('#biometricSection').show();
  }

  // ✅ Toggle biometric section
  $('#Biometric').on('change', function () {
    if ($(this).is(':checked')) {
      $('#biometricSection').slideDown();
    } else {
      $('#biometricSection').slideUp();
    }
  });
  $(document).on('click', '.deleteDevice', function () {

  let machineId = $(this).data('id');
  let row = $(this).closest('tr');

  if (!confirm('Are you sure you want to delete this device?')) {
    return;
  }

  $.ajax({
    url: '{{ route("deleteBiometricDevice") }}',
    type: 'POST',
    data: {
      _token: '{{ csrf_token() }}',
      machine_id: machineId
    },
    success: function (response) {

      new PNotify({
        title: 'Success',
        text: response.message,
        type: 'success',
        delay: 1500
      });

      row.remove(); // remove from UI
    },
    error: function (xhr) {
      new PNotify({
        title: 'Error',
        text: xhr.responseJSON?.message || 'Delete failed',
        type: 'error',
        delay: 1500
      });
    }
  });

});
    $('input[name^="check"]').on('change', function () {
      // Prevent unchecking all → keep at least one checked
      if ($('input[name^="check"]:checked').length === 0) {
        $(this).prop('checked', true);
        new PNotify({
          title: 'Warning',
          text: 'At least one platform must remain selected!',
          type: 'warning',
          hide: true,
          delay: 1500,
        });
        return false;
      }

      // Save checked items as array
      var selectedItems = $('input[name^="check"]:checked').map(function(){
        return $(this).val();
      }).get();

      $.ajax({
        url: '{{ route('storePlatform') }}',
        type: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          item_type: selectedItems.join(',')
        },
        success: function (data) {
          new PNotify({
            title: 'Success',
            text: 'Platform Setting Saved Successfully!',
            type: 'success',
            hide: true,
            delay: 1000,
          });
        },
        error: function (xhr){
          new PNotify({
            title: 'Warning',
            text: xhr.responseJSON.error || "You don't have permission to edit it!",
            type: 'error',
            hide: true,
            delay: 1500,
          });
        }
      });
    });
    // ✅ Save biometric device
  $('#saveBiometric').on('click', function () {

  let machineName = $('#machine_name').val();
  let machineId = $('#machine_id').val();

  if (!machineName || !machineId) {
    new PNotify({
      title: 'Warning',
      text: 'Both fields are required!',
      type: 'warning'
    });
    return;
  }

  $.ajax({
    url: '{{ route("saveBiometricDevice") }}',
    type: 'POST',
    data: {
      _token: '{{ csrf_token() }}',
      name: machineName,
      machine_id: machineId
    },
    success: function (response) {

      new PNotify({
        title: 'Success',
        text: response.message,
        type: 'success',
        delay: 1500
      });

      // Clear fields
      $('#machine_name').val('');
      $('#machine_id').val('');

      // ✅ Optional: add row dynamically
      let rowCount = $('table tbody tr').length + 1;

      $('table tbody').append(`
        <tr>
          <td>${rowCount}</td>
          <td>${machineName}</td>
          <td>${machineId}</td>
        </tr>
      `);
    },
    error: function (xhr) {

      new PNotify({
        title: 'Error',
        text: xhr.responseJSON?.message || 'Something went wrong',
        type: 'error',
        delay:1500
      });
    }
  });

});
  </script>
  @endsection