@extends('layouts.main')
@section('content')
   <style>
      .custom-btn {
         background-color: #007bff;
         color: white;
         border: none;
         padding: 10px 20px;
         border-radius: 5px;
         cursor: pointer;
      }

      .custom-btn:hover {
         background-color: #0056b3;
      }

      .corporate-table {
         border-collapse: separate;
         border-spacing: 0 14px;
      }

      /* TABLE HEAD */
      .corporate-table thead th {
         border: none;
         background: #f8fafc;
         color: #64748b;
         font-size: 13px;
         font-weight: 700;
         padding: 16px;
         text-transform: uppercase;
         white-space: nowrap;
      }

      /* ROW STYLE */
      .corporate-table tbody tr {
         background: #fff;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
         border-radius: 18px;
         transition: 0.3s ease;
      }

      .corporate-table tbody tr:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
      }

      .corporate-table tbody td {
         padding: 18px 16px;
         vertical-align: middle;
         border-top: none;
         border-bottom: none;
      }

      /* AVATAR */
      .client-avatar {
         width: 52px;
         height: 52px;
         border-radius: 50%;
         background: linear-gradient(135deg, #6366f1, #8b5cf6);
         color: #fff;
         font-size: 20px;
         font-weight: 700;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
      }

      /* STATUS */
      .active-badge {
         background: rgba(34, 197, 94, 0.12);
         color: #16a34a;
         padding: 8px 14px;
         border-radius: 30px;
         font-size: 13px;
         font-weight: 600;
      }

      /* BUTTONS */
      .btn-action {
         width: 42px;
         height: 42px;
         border: none;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 18px;
         transition: 0.3s;
         text-decoration: none;
      }

      /* EDIT */
      .editBtn {
         background: rgba(59, 130, 246, 0.12);
         color: #2563eb;
      }

      .editBtn:hover {
         background: #2563eb;
         color: #fff;
         transform: scale(1.08);
      }

      /* DELETE */
      .delete-btn {
         background: rgba(239, 68, 68, 0.12);
         color: #dc2626;
      }

      .delete-btn:hover {
         background: #dc2626;
         color: #fff;
         transform: scale(1.08);
      }

      /* EMPTY STATE */
      .empty-state {
         padding: 40px;
         text-align: center;
      }

      /* MOBILE */
      @media(max-width:768px) {

         .corporate-table thead {
            display: none;
         }

         .corporate-table tbody tr {
            display: block;
            margin-bottom: 20px;
         }

         .corporate-table tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f1f5f9;
         }

         .corporate-table tbody td:last-child {
            border-bottom: none;
         }

      }
   </style>
   <div>
      <div class="d-flex justify-content-between align-items-center mb-3">
         <h4>Corporate Clients</h4>
         <button class="custom-btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCorporateModal">
            + Add Corporate Client
         </button>
      </div>
      {{-- Success --}}
      @if(session('success'))
         <div class="alert alert-success">{{ session('success') }}</div>
      @endif
      {{-- Table --}}
      <div class="card shadow-sm border-0">
         <div class="card-body p-0">
            <div class="table-responsive">

               <table class="table table-hover align-middle mb-0 corporate-table">

                  <thead>
                     <tr>
                        <th>#ID</th>
                        <th>Client</th>
                        <th>Email Address</th>
                        <th>Status</th>
                        <th class="text-center">Action</th>
                     </tr>
                  </thead>

                  <tbody>

                     @forelse($users as $key => $user)

                        <tr>

                           <!-- ID -->
                           <td>
                              <span class="fw-bold text-primary">
                                 #{{ $key + 1 }}
                              </span>
                           </td>

                           <!-- CLIENT INFO -->
                           <td>

                              <div class="d-flex align-items-center gap-3">

                                 <!-- Avatar -->
                                 <div class="client-avatar">
                                    {{ strtoupper(substr($user->first_name ?? $user->name, 0, 1)) }}
                                 </div>

                                 <!-- Name -->
                                 <div>

                                    <h6 class="mb-0 fw-semibold text-dark">
                                       {{ $user->first_name ?? $user->name }}
                                    </h6>

                                    <small class="text-muted">
                                       Corporate Client
                                    </small>

                                 </div>

                              </div>

                           </td>

                           <!-- EMAIL -->
                           <td>

                              <span class="fw-medium text-muted">
                                 {{ $user->email }}
                              </span>

                           </td>

                           <!-- STATUS -->
                           <td>

                              <span class="badge active-badge">
                                 <i class="bi bi-check-circle-fill me-1"></i>
                                 Active
                              </span>

                           </td>

                           <!-- ACTION -->
                           <td>

                              <div class="d-flex justify-content-center align-items-center gap-2">

                                 <!-- EDIT -->
                                 <button type="button" class="btn-action editBtn" data-id="{{ $user->id }}"
                                    data-name="{{ $user->first_name }}" data-email="{{ $user->email }}"
                                    data-gst_number="{{ $user->gst_number }}"
                                    data-contact_person="{{ $user->contact_person }}"
                                    data-contact_number="{{ $user->contact_number }}" data-bs-toggle="modal"
                                    data-bs-target="#editCorporateModal" title="Edit">

                                    <i class="bi bi-pencil-square"></i>

                                 </button>


                                 <!-- DELETE -->
                                 <form method="POST" action="{{ route('superadmin.corporateclient.delete', $user->id) }}"
                                    class="m-0">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit" class="btn-action delete-btn" title="Delete"
                                       onclick="return confirm('Are you sure?')">

                                       <i class="bi bi-trash"></i>

                                    </button>

                                 </form>

                              </div>

                           </td>

                        </tr>

                     @empty

                        <tr>

                           <td colspan="5">

                              <div class="empty-state">

                                 <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png" width="120" class="mb-3">

                                 <h5>No Corporate Clients Found</h5>

                                 <p class="text-muted mb-0">
                                    No corporate client records available.
                                 </p>

                              </div>

                           </td>

                        </tr>

                     @endforelse

                  </tbody>

               </table>

            </div>

         </div>
      </div>
   </div>
   {{-- Modal --}}
   <div class="modal fade" id="addCorporateModal">
      <div class="modal-dialog">
         <form method="POST" action="{{ route('superadmin.corporateclient.store') }}">
            @csrf

            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">

               <!-- Header -->
               <div class="modal-header bg-primary text-white border-0">
                  <div>
                     <h5 class="mb-0 fw-bold">Add Corporate Client</h5>
                     <small class="opacity-75">Enter corporate client details</small>
                  </div>

                  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
               </div>

               <!-- Body -->
               <div class="modal-body p-4">
                  <div class="row">

                     <!-- Company Name -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Company Name</label>
                        <input type="text" name="name" class="form-control shadow-sm" placeholder="Enter company name"
                           required>
                     </div>

                     <!-- GST Number -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">GST Number</label>
                        <input type="text" name="gst_number" class="form-control shadow-sm" placeholder="Enter GST number">
                     </div>

                     <!-- Contact Person -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Contact Person</label>
                        <input type="text" name="contact_person" class="form-control shadow-sm"
                           placeholder="Enter contact person name">
                     </div>

                     <!-- Contact Number -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Contact Number</label>
                        <input type="text" name="contact_number" class="form-control shadow-sm"
                           placeholder="Enter contact number">
                     </div>

                     <!-- Email -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Email Address</label>
                        <input type="email" name="email" class="form-control shadow-sm" placeholder="Enter email address"
                           required>
                     </div>

                     <!-- Password -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Password</label>
                        <input type="password" name="password" class="form-control shadow-sm" placeholder="Enter password"
                           required>
                     </div>

                  </div>

               </div>

               <!-- Footer -->
               <div class="modal-footer border-0 px-4 pb-4">

                  <button type="button" class="btn btn-light px-4 rounded-pill" data-bs-dismiss="modal">
                     Cancel
                  </button>

                  <button type="submit" class="btn btn-primary px-4 rounded-pill shadow-sm">
                     Save Client
                  </button>

               </div>

            </div>
         </form>
      </div>
   </div>
   <div class="modal fade" id="editCorporateModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
         <form method="POST" id="editForm">
            @csrf
            @method('PUT')

            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">

               <!-- Header -->
               <div class="modal-header bg-primary text-white border-0">
                  <div>
                     <h5 class="mb-0 fw-bold">Edit Corporate Client</h5>
                     <small class="opacity-75">Update corporate client details</small>
                  </div>

                  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
               </div>

               <!-- Body -->
               <div class="modal-body p-4">

                  <input type="hidden" name="id" id="edit_id">

                  <div class="row">

                     <!-- Company Name -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Company Name</label>
                        <input type="text" name="name" id="edit_name" class="form-control shadow-sm"
                           placeholder="Enter company name" required>
                     </div>

                     <!-- GST Number -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">GST Number</label>
                        <input type="text" name="gst_number" id="edit_gst_number" class="form-control shadow-sm"
                           placeholder="Enter GST number">
                     </div>

                     <!-- Contact Person -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Contact Person</label>
                        <input type="text" name="contact_person" id="edit_contact_person" class="form-control shadow-sm"
                           placeholder="Enter contact person">
                     </div>

                     <!-- Contact Number -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Contact Number</label>
                        <input type="text" name="contact_number" id="edit_contact_number" class="form-control shadow-sm"
                           placeholder="Enter contact number">
                     </div>

                     <!-- Email -->
                     <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Email Address</label>
                        <input type="email" name="email" id="edit_email" class="form-control shadow-sm"
                           placeholder="Enter email address" required>
                     </div>

                  </div>

               </div>

               <!-- Footer -->
               <div class="modal-footer border-0 px-4 pb-4">

                  <button type="button" class="btn btn-light px-4 rounded-pill" data-bs-dismiss="modal">
                     Cancel
                  </button>

                  <button type="submit" class="btn btn-primary px-4 rounded-pill shadow-sm">
                     Update Client
                  </button>

               </div>

            </div>
         </form>
      </div>
   </div>
   <script>
      document.querySelectorAll('.editBtn').forEach(button => {

         button.addEventListener('click', function () {

            let id = this.dataset.id;

            let url = "{{ route('superadmin.corporateclient.update', ':id') }}";
            url = url.replace(':id', id);

            document.getElementById('editForm').action = url;

            document.getElementById('edit_id').value = id;

            document.getElementById('edit_name').value = this.dataset.name;
            document.getElementById('edit_email').value = this.dataset.email;

            document.getElementById('edit_gst_number').value = this.dataset.gst_number;
            document.getElementById('edit_contact_person').value = this.dataset.contact_person;
            document.getElementById('edit_contact_number').value = this.dataset.contact_number;

         });

      });

      document.querySelectorAll('.deleteForm').forEach(form => {

         form.addEventListener('submit', function (e) {

            if (!confirm('Are you sure you want to delete this client?')) {
               e.preventDefault();
            }

         });

      });
   </script>
@endsection