@extends('layouts.admin')
<link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
@section('content')
<div class="page-heading">
  <div class="page-title">
      <div class="row">
          <div class="col-12 col-md-6 order-md-1 order-last">
              <h3>Nas Details</h3>
              <p class="text-subtitle text-muted">Here you can view the Nas configurations</p>
          </div>
          <div class="col-12 col-md-6 order-md-2 order-first">
              
          </div>
      </div>
  </div>

  <!-- Basic Tables start -->
  <section class="section">
      <div class="card">

      <form action="{{ route('deleteNas', $nas->id) }}" method='post' class='mt-3 ml-4'>
            @method('DELETE')
            @csrf
            <button type='submit' class='ml-4 btn btn-danger' >Delete NAS</button>
        </form>
        <form class="p-5 my-2" action="{{ route('updateNas', $nas->id) }}" method="post">
            @method("PUT")
            @csrf
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Name</label>
                <input type="text" name="shortname" class="form-control" id="exampleInputEmail1" value="{{ $nas->shortname }}">
            </div>
            <div class="d-flex-wrap justify-content-between">
                <div class="row">
                    <input type="hidden" name='nasID' value="{{ $nas->id }}">
                    <div class="mb-3 col-6">
                        <label for="text" class="form-label">IP Address</label>
                        <input type="text" name="nasname" class="form-control" id="text" value='{{ $nas->nasname }}'>
                    </div>
                    <div class="mb-3 col-6">
                                <label for="text" class="form-label">Secret:</label>
                                <input class="form-control" name="secret" type="password" name="password" id="password" value="{{$nas->secret}}"/>
                                <span>
                                    <i class="bi bi-eye-slash" id="togglePassword"></i>
                                    <div id="emailHelp" class="form-text">Reveal Password.</div>
                                </span>
                    </div>
                    <!-- <input type='hidden' class="form-control" id="message-text" name="franchise_id" value="{{ Auth::id() }}"></input> -->
                    <div class="form-group">
                            <label for="message-text" class="col-form-label">Administrator*</label>
                            <select class="form-control" id="exampleFormControlSelect1" name='franchise_id'>
                              @forelse($admins as $admin)
                                @if(!empty($nas->franchise_id) && $nas->franchise_id == $admin->id)
                                    <option value="{{ $admin->id }}" selected>{{ $admin->name }}</option>
                                @else
                                    <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                @endif
                              @empty
                                <option>1</option>
                              @endforelse
                            </select>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        
      </div>

      

  </section>
  <script>
        const togglePassword = document
            .querySelector('#togglePassword');
        const password = document.querySelector('#password');
        togglePassword.addEventListener('click', () => {
            // Toggle the type attribute using
            // getAttribure() method
            const type = password
                .getAttribute('type') === 'password' ?
                'text' : 'password';
            password.setAttribute('type', type);
            // Toggle the eye and bi-eye icon
            this.classList.toggle('bi-eye');
        });
    </script>
  <!-- Basic Tables end -->
</div>
@endsection