@extends('admin.layouts.plain')

@section('style')
@endsection

@section('content')
<!-- Top Nav -->
  <nav class="vs-nav">
    <a href="#" class="vs-brand">All in Mova</a>
  </nav>

  <!-- Main Content -->
  <main class="vs-content">

    <h1 class="vs-title">Vendor Settings</h1>

    <!-- ===== Store Settings ===== -->
    <div class="vs-card">
      <div class="vs-card-title">Store Settings</div>

      <div class="vs-row">
        <div class="vs-row-info">
          <div class="vs-row-label">Store Status</div>
          <div class="vs-row-sub">Customers can view your products</div>
        </div>
        <div class="vs-row-action">
          <div class="form-check form-switch vs-toggle">
            <input class="form-check-input" type="checkbox" role="switch"
              id="storeStatus" checked aria-label="Toggle store status">
          </div>
        </div>
      </div>

      <div class="vs-row">
        <div class="vs-row-info">
          <div class="vs-row-label">Vacation Mode</div>
          <div class="vs-row-sub">Temporarily pause orders</div>
        </div>
        <div class="vs-row-action">
          <div class="form-check form-switch vs-toggle">
            <input class="form-check-input" type="checkbox" role="switch"
              id="vacationMode" aria-label="Toggle vacation mode">
          </div>
        </div>
      </div>
    </div>

    <!-- ===== Notifications ===== -->
    <div class="vs-card">
      <div class="vs-card-title">Notifications</div>

      <div class="vs-row">
        <div class="vs-row-info">
          <div class="vs-row-label">New Orders</div>
        </div>
        <div class="vs-row-action">
          <div class="form-check form-switch vs-toggle">
            <input class="form-check-input" type="checkbox" role="switch"
              id="notifOrders" checked aria-label="Toggle new orders notification">
          </div>
        </div>
      </div>

      <div class="vs-row">
        <div class="vs-row-info">
          <div class="vs-row-label">Low Stock Alerts</div>
        </div>
        <div class="vs-row-action">
          <div class="form-check form-switch vs-toggle">
            <input class="form-check-input" type="checkbox" role="switch"
              id="notifStock" checked aria-label="Toggle low stock alerts">
          </div>
        </div>
      </div>

      <div class="vs-row">
        <div class="vs-row-info">
          <div class="vs-row-label">Payment Updates</div>
        </div>
        <div class="vs-row-action">
          <div class="form-check form-switch vs-toggle">
            <input class="form-check-input" type="checkbox" role="switch"
              id="notifPayments" checked aria-label="Toggle payment updates notification">
          </div>
        </div>
      </div>

      <div class="vs-row">
        <div class="vs-row-info">
          <div class="vs-row-label">Customer Messages</div>
        </div>
        <div class="vs-row-action">
          <div class="form-check form-switch vs-toggle">
            <input class="form-check-input" type="checkbox" role="switch"
              id="notifMessages" checked aria-label="Toggle customer messages notification">
          </div>
        </div>
      </div>
    </div>

    <!-- ===== Account Settings ===== -->
    <div class="vs-card">
      <div class="vs-card-title">Account Settings</div>

      <a href="#" class="vs-row-link" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
        <span class="vs-row-info">
          <span class="vs-row-label">Change Password</span>
        </span>
      </a>

      <a href="#" class="vs-row-link" data-bs-toggle="modal" data-bs-target="#paymentMethodsModal">
        <span class="vs-row-info">
          <span class="vs-row-label">Payment Methods</span>
        </span>
      </a>

      <a href="#" class="vs-row-link" data-bs-toggle="modal" data-bs-target="#taxInfoModal">
        <span class="vs-row-info">
          <span class="vs-row-label">Tax Information</span>
        </span>
      </a>

      <a href="#" class="vs-row-link danger" data-bs-toggle="modal" data-bs-target="#deactivateModal">
        <span class="vs-row-info">
          <span class="vs-row-label">Deactivate Account</span>
        </span>
      </a>
    </div>

  </main>

  <!-- ===================== Change Password Modal ===================== -->
  <!-- <div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePwLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="border-radius:16px; border:1px solid var(--card-border); box-shadow:0 8px 40px rgba(16,24,40,0.12);">
        <div class="modal-header border-0 pb-0 pt-4 px-4">
          <h5 class="modal-title" id="changePwLabel" style="font-weight:700; color:var(--heading); font-size:1.1rem;">Change Password</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body px-4 pt-3 pb-2">
          <div class="mb-3">
            <label for="currentPw" class="form-label">Current Password</label>
            <div class="password-wrap">
              <input type="password" class="form-control" id="currentPw" placeholder="Enter current password">
              <button class="eye-btn" type="button"></button>
            </div>
          </div>
          <div class="mb-3">
            <label for="newPw" class="form-label">New Password</label>
            <div class="password-wrap">
              <input type="password" class="form-control" id="newPw" placeholder="Enter new password">
              <button class="eye-btn" type="button"></button>
            </div>
          </div>
          <div class="mb-1">
            <label for="confirmPw" class="form-label">Confirm New Password</label>
            <div class="password-wrap">
              <input type="password" class="form-control" id="confirmPw" placeholder="Confirm new password">
              <button class="eye-btn" type="button"></button>
            </div>
          </div>
        </div>
        <div class="modal-footer border-0 px-4 pb-4 pt-3 gap-2">
          <button type="button" class="btn btn-outline-primary flex-fill" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary flex-fill" data-bs-dismiss="modal" data-toast="Password updated successfully">Update Password</button>
        </div>
      </div>
    </div>
  </div> -->

  <!-- ===================== Payment Methods Modal ===================== -->
  <!-- <div class="modal fade" id="paymentMethodsModal" tabindex="-1" aria-labelledby="paymentMethodsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="border-radius:16px; border:1px solid var(--card-border); box-shadow:0 8px 40px rgba(16,24,40,0.12);">
        <div class="modal-header border-0 pb-0 pt-4 px-4">
          <h5 class="modal-title" id="paymentMethodsLabel" style="font-weight:700; color:var(--heading); font-size:1.1rem;">Payment Methods</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body px-4 pt-3 pb-2">
          <div class="mb-3">
            <label for="bankName" class="form-label">Bank Name</label>
            <input type="text" class="form-control" id="bankName" placeholder="e.g. Chase Bank">
          </div>
          <div class="mb-3">
            <label for="accountNumber" class="form-label">Account Number</label>
            <input type="text" class="form-control" id="accountNumber" placeholder="Enter account number">
          </div>
          <div class="mb-1">
            <label for="routingNumber" class="form-label">Routing Number</label>
            <input type="text" class="form-control" id="routingNumber" placeholder="Enter routing number">
          </div>
        </div>
        <div class="modal-footer border-0 px-4 pb-4 pt-3 gap-2">
          <button type="button" class="btn btn-outline-primary flex-fill" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary flex-fill" data-bs-dismiss="modal" data-toast="Payment method saved">Save</button>
        </div>
      </div>
    </div>
  </div> -->

  <!-- ===================== Tax Information Modal ===================== -->
  <!-- <div class="modal fade" id="taxInfoModal" tabindex="-1" aria-labelledby="taxInfoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="border-radius:16px; border:1px solid var(--card-border); box-shadow:0 8px 40px rgba(16,24,40,0.12);">
        <div class="modal-header border-0 pb-0 pt-4 px-4">
          <h5 class="modal-title" id="taxInfoLabel" style="font-weight:700; color:var(--heading); font-size:1.1rem;">Tax Information</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body px-4 pt-3 pb-2">
          <div class="mb-3">
            <label for="taxId" class="form-label">Tax ID / EIN</label>
            <input type="text" class="form-control" id="taxId" placeholder="XX-XXXXXXX">
          </div>
          <div class="mb-1">
            <label for="businessType" class="form-label">Business Type</label>
            <select class="form-select" id="businessType">
              <option value="" disabled selected>Select business type</option>
              <option value="sole">Sole Proprietorship</option>
              <option value="llc">LLC</option>
              <option value="corp">Corporation</option>
              <option value="partnership">Partnership</option>
            </select>
          </div>
        </div>
        <div class="modal-footer border-0 px-4 pb-4 pt-3 gap-2">
          <button type="button" class="btn btn-outline-primary flex-fill" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary flex-fill" data-bs-dismiss="modal" data-toast="Tax information saved">Save</button>
        </div>
      </div>
    </div>
  </div> -->

  <!-- ===================== Deactivate Account Modal ===================== -->
  <!-- <div class="modal fade" id="deactivateModal" tabindex="-1" aria-labelledby="deactivateLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
      <div class="modal-content" style="border-radius:16px; border:1px solid var(--card-border); box-shadow:0 8px 40px rgba(16,24,40,0.12);">
        <div class="modal-body text-center px-4 pt-4 pb-3">
          <div class="mb-3" style="width:52px;height:52px;border-radius:50%;background:#FDECEA;display:grid;place-items:center;margin:0 auto;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#E53935" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
          </div>
          <h6 style="font-weight:700;color:var(--heading);margin-bottom:0.4rem;">Deactivate Account?</h6>
          <p style="font-size:0.875rem;color:var(--muted);margin:0;">Your store will be hidden and all active orders will be paused. You can reactivate at any time.</p>
        </div>
        <div class="modal-footer border-0 px-4 pb-4 pt-1 gap-2">
          <button type="button" class="btn btn-outline-primary flex-fill" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary flex-fill"
            style="background:#E53935;border-color:#E53935;"
            data-bs-dismiss="modal" data-toast="Account deactivated">Deactivate</button>
        </div>
      </div>
    </div>
  </div> -->
@endsection