@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>Customer Details</h3>
              <p class="text-subtitle text-muted">Here you can view the Customer Details</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 class='px-5 mt-5' action="{{ route('updateStatus', $customer->id) }}" method="get">
        @csrf
        @if($customer->user_status == 1)
            <button type='submit' class="btn btn-danger">Disable Customer</button>
        @else
            <button type='submit' class="btn btn-success">Enable Customer</button>
        @endif
      </form>

        <form class="p-5" action="{{ route('updateCustomer', $customer->id) }}" method="post">
            @method("PUT")
            @csrf
            <div class="d-flex-wrap justify-content-between">
                <div class="row">
                    <input type="hidden" name='nasID' value="{{ $customer->id }}">
                    <div class="mb-3 col-6">
                        <label for="exampleInputEmail1" class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" id="exampleInputEmail1" value="{{ $customer->name }}">
                    </div>
                    <!-- <div class="mb-3 col-6">
                            <label for="exampleInputEmail1" class="form-label">Nas for the user</label>
                             <select class="form-select" aria-label="Default select example" name='nas_id'>
                             <option selected>Select Nas for this Customer</option>
                            @foreach($nas as $n)
                                @if($customer->nas_id == $n->id)
                                    <option selected value="{{ $n->id }}"> {{ $n->name }} </option>
                                @else
                                    <option value="{{ $n->id }}"> {{ $n->name }} </option>
                                @endif
                            @endforeach
                          </select>
                    </div> -->
                    <div class="mb-3 col-6">
                        <label for="text" class="form-label">Email</label>
                        <input type="text" name="email" class="form-control" id="text" value='{{ $customer->email }}'>
                    </div>
                    
                    <div class="mb-3 col-6">
                        <label for="text" class="form-label">Username</label>
                        <input type="text" name="username" class="form-control" id="text" value="{{$customer->username}}">
                    </div>
                    <div class="mb-3 col-6">
                                <label for="text" class="form-label">Password:</label>
                                <input class="form-control" name="password" type="password" name="password" id="password" value="{{$customer->value}}"/>
                                <span>
                                    <i class="bi bi-eye-slash" id="togglePassword"></i>
                                    <div id="emailHelp" class="form-text">Reveal Password.</div>
                                </span>
                    </div>
                    <div class="mb-3 col-6">
                        <label for="text" class="form-label">Address</label>
                        <input type="text" name="address" class="form-control" id="text" value="{{$customer->address}}">
                    </div>
                    <div class="mb-3 col-6">
                            <label for="message-text" class="col-form-label">Birth Year</label>
                            <input type='date' class="form-control" id="message-text" name="birth_year" value="{{ $customer->birth_year }}"></input>
                    </div>
                   

                    <div class="mb-3 col-12">
                            <label for="message-text" class="col-form-label">Validity (Hours)</label>
                            <input type='number' class="form-control" id="message-text" name="validity" value="{{ $customer->validity }}"></input>
                    </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