@extends('layouts.admin')

@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 List</h3>
              <p class="text-subtitle text-muted">Here you can view all the Customers</p>
          </div>
          <div class="col-12 col-md-6 order-md-2 order-first">
              <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                  <ol class="breadcrumb">
                  </ol>
              </nav>
          </div>
      </div>
  </div>

  <!-- Basic Tables start -->
  <section class="section">
      <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
              Add
           </button>
            </div>
            <div>
              <a href="{{ route('exportCustomers') }}" class="btn btn-success">
                <i class="fas fa-download me-2"></i>Export to Excel
              </a>
            </div>
          </div>
          <div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle"> <b> Add a Customer </b></h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span data-bs-dismiss="modal">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('storeCustomer') }}" method="post">
                        @csrf
                          <input type="hidden" name='client_id' value="{{ Auth::id() }}">
                          <div class="form-group">
                            <label for="recipient-name" class="col-form-label">Name</label>
                            <input class="form-control" id="recipient-name" name="name">
                          </div>
                          <div class="form-group">
                            <label for="recipient-name" class="col-form-label">Address</label>
                            <input class="form-control" id="recipient-name" name="address">
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="col-form-label">Email</label>
                            <input class="form-control" id="message-text" name="email"></input>
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="col-form-label">Birth Year</label>
                            <input type='date' class="form-control" id="message-text" name="birth_year"></input>
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="col-form-label">Username</label>
                            <input class="form-control" id="message-text" name="username"></input>
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="col-form-label">Password</label>
                            <input type="password" class="form-control" id="message-text" name="password"></input>
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="col-form-label">Validity (Hours)</label>
                            <input type="number" class="form-control" id="message-text" name="validity"></input>
                          </div>
                          <input type="hidden" name='franchise_id' value="{{Auth::id()}}">
                       
                        </div>
                        <div class="modal-footer">
                          <button  class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </form>
              </div>
            </div>
          </div>
          <div class="card-body">
              <table class="table" id="table1">
                  <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Creation</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Username</th>
                        <th scope="col">Password</th>
                        <th scope="col">Address</th>
                        <th scope="col">Birth Year</th>
                        <th scope="col">Validity</th>
                        <th scope="col">Actions</th>
                      </tr>
                  </thead>
                  <tbody>
                    @foreach ($customers as $customer)
                      <tr>
                        <th scope="row">{{ $loop->index+1 }}</th>
                        <td>{{ $customer->created_at }}</td>
                        <td>{{ $customer->name }}</td>
                        <td>{{ $customer->email }}</td>
                        <td>{{ $customer->username }}</td>
                        <td>{{ $customer->value }}</td>
                        <td>{{ $customer->address }}</td>
                        <td>{{ $customer->birth_year }}</td>
                        <td>{{ $customer->validity }}</td>
                        <td>
                          <button class="btn btn-primary" type="button" onclick="window.location='{{ route("showCustomer", $customer->id) }}'">Edit</button>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
              </table>
          </div>
      </div>

      

  </section>
  <!-- Basic Tables end -->
</div>
@endsection