@extends('vendor.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>

    @if (session('status'))
      <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    <!-- ===== 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" data-toggle-field="store_status" @checked(auth()->user()->store_status) 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" data-toggle-field="vacation_mode" @checked(auth()->user()->vacation_mode) 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" data-toggle-field="notify_new_orders" @checked(auth()->user()->notify_new_orders) 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" data-toggle-field="notify_low_stock" @checked(auth()->user()->notify_low_stock) 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" data-toggle-field="notify_payment_updates" @checked(auth()->user()->notify_payment_updates) 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" data-toggle-field="notify_customer_messages" @checked(auth()->user()->notify_customer_messages) 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);">
        <form method="POST" action="{{ route('vendor.vendor-settings.password') }}">
          @csrf
          <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">
            @if ($errors->updatePassword->any())
              <div class="alert alert-danger">
                @foreach ($errors->updatePassword->all() as $error)
                  <div>{{ $error }}</div>
                @endforeach
              </div>
            @endif
            <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" name="current_password" 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" name="password" 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" name="password_confirmation" 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="submit" class="btn btn-primary flex-fill">Update Password</button>
          </div>
        </form>
      </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

@section('script')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    document.querySelectorAll('[data-toggle-field]').forEach(function (input) {
      input.addEventListener('change', function () {
        fetch('{{ route('vendor.vendor-settings.toggle') }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json',
          },
          body: JSON.stringify({
            field: input.getAttribute('data-toggle-field'),
            value: input.checked,
          }),
        }).then(function (response) {
          if (response.ok && window.AIM) {
            window.AIM.toast('Saved');
          }
        });
      });
    });

    @if ($errors->updatePassword->any())
      var changePasswordModalEl = document.getElementById('changePasswordModal');
      if (changePasswordModalEl && window.bootstrap) {
        new bootstrap.Modal(changePasswordModalEl).show();
      }
    @endif
  });
</script>
@endsection