@extends('layouts.master')
@section('title') Attach ONUs @endsection
@section('css')
<link href="{{ URL::asset('assets/js/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/css/datatable-custom.css') }}" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
@endsection
@section('content')
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">SmartOLT ONU Suggestions</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
         <li class="breadcrumb-item active">Attach ONUs</li>
      </ol>
   </div>
</div>
<div class="row">
   <div class="col-lg-12">
      @if (session('status'))
      <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
         <i class="ri-check-double-line label-icon"></i><strong>Success</strong> - {{ session('status') }}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      @if (session('error'))
      <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show" role="alert">
         <i class="ri-error-warning-line label-icon"></i><strong>Error</strong> - {!! session('error') !!}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      <form method="POST" action="{{ route('smartolt.attach-selected-onus') }}" id="attach-form">
         @csrf
         <div class="d-flex align-items-center mb-3">
            <div class="flex-grow-1">
               <h5 class="mb-0 text-uppercase text-muted"><span class="text-gradient">MATCHED</span> ONUs</h5>
            </div>
            <div class="flex-shrink-0 d-none" id="attach-selected-top">
               <button type="button" id="confirm-attach" 
                  class="btn btn-primary btn-label waves-effect waves-light btn-sm">
               <i class="ri-check-double-line label-icon align-middle fs-16 me-2"></i>
               Attach Selected ONUs
               </button>
            </div>
         </div>
         <div class="card">
            <div class="card-body">
               @if(count($suggestions))
               <div class="table-responsive table-card mb-1">
                  <table class="table align-middle table-striped" id="datatable" style="width: 100%;">
                     <thead class="table-light text-muted">
                        <tr>
                           <th><input type="checkbox" id="select-all" class="form-check-input"></th>
                           <th>Serial</th>
                           <th>ONU Name</th>
                           <th>Signal</th>
                           <th>Client Name</th>
                           <th>Service ID</th>
                        </tr>
                     </thead>
                     <tbody class="list form-check-all">
                        @foreach($suggestions as $index => $item)
                        <tr class="no-border">
                           <td>
                              <input type="checkbox" name="selected[{{ $index }}]" value="1" class="form-check-input">
                              <input type="hidden" name="data[{{ $index }}][serial]" value="{{ $item['onu']['sn'] }}">
                              <input type="hidden" name="data[{{ $index }}][service_id]" value="{{ $item['service']->id }}">
                           </td>
                           <td class="text-info">{{ $item['onu']['sn'] }}</td>
                           <td>{{ $item['onu']['name'] }}</td>
                            <td>
                                @php
                                    $signalText = strtolower($item['onu']['signal'] ?? '');
                                    $status = strtolower($item['onu']['status'] ?? '');
                                    $color = 'text-muted';

                                    if ($status === 'los') {
                                        $color = 'text-danger';
                                    } elseif (str_contains($signalText, 'very good')) {
                                        $color = 'text-success';
                                    } elseif (str_contains($signalText, 'warning')) {
                                        $color = 'text-warning';
                                    } elseif (str_contains($signalText, 'critical')) {
                                        $color = 'text-danger';
                                    }
                                @endphp

                                <span class="{{ $color }}">
                                    {{ $item['onu']['signal_1310'] ?? '-' }}
                                </span>
                            </td>
                           <td>{{ $item['client']->fullName() }}</td>
                           <td>{{ $item['service']->id }}</td>
                        </tr>
                        @endforeach
                     </tbody>
                  </table>
               </div>
               @else
               <div class="noresult" style="display: block;">
                  <div class="text-center">
                     <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop"
                        colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px"></lord-icon>
                     <h5 class="mt-2 text-danger">No matching ONUs found or all are already attached</h5>
                  </div>
               </div>
               @endif
            </div>
         </div>
      </form>
   </div>
</div>
@endsection
@section('script')
<script src="{{ URL::asset('assets/js/jquery-3.6.1.js') }}"></script>
<script src="{{ URL::asset('assets/js/app.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/datatable.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   $(document).ready(function () {
       const attachTop = $('#attach-selected-top');
   
       $('#select-all').on('click', function () {
           const isChecked = $(this).is(':checked');
           $('input[name^="selected"]').prop('checked', isChecked);
           toggleAttachTop();
       });
   
       $(document).on('change', 'input[name^="selected"]', function () {
           toggleAttachTop();
       });
   
       function toggleAttachTop() {
           const anyChecked = $('input[name^="selected"]:checked').length > 0;
           attachTop.toggleClass('d-none', !anyChecked);
       }
   
       $('#confirm-attach').on('click', function () {
           const selected = $('input[name^="selected"]:checked').length;
           if (selected === 0) {
               Swal.fire({
                   icon: 'warning',
                   title: 'No ONUs selected',
                   text: 'Please select at least one ONU to attach.',
               });
               return;
           }
   
           Swal.fire({
               title: 'Are you sure?',
               text: `You are about to attach ${selected} ONU(s) to their services.`,
               icon: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Yes, attach them'
           }).then((result) => {
               if (result.isConfirmed) {
                   $('#attach-form').submit();
               }
           });
       });
   });
</script>
@endsection