@extends('vendor.layouts.app')

@section('title', 'Warehouse Settings')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<!-- Page header -->
        <div class="page-head">
          <div>
            <h1 class="page-title">Warehouse Settings</h1>
            <p class="page-sub mb-0">Manage your warehouse locations and inventory</p>
          </div>
          <div class="head-actions">
            <button type="button" class="btn-typ1">+ Add Warehouse</button>
          </div>
        </div>

        <!-- ===== Warehouse 1 (Primary / Active) ===== -->
        <div class="card mb-4">
          <div class="card-body p-4">
            <div class="wh-row">
              <div class="wh-thumb"></div>
              <div class="wh-body">
                <div class="wh-top">
                  <div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                      <h3 class="wh-name">Main Distribution Center</h3>
                      <span class="wh-badge primary">Primary</span>
                      <span class="wh-badge active">Active</span>
                    </div>
                    <div class="wh-id">Warehouse ID: WH-001</div>
                  </div>
                  <a href="#" class="wh-edit">Edit</a>
                </div>

                <div class="row g-4 wh-info">
                  <div class="col-md-6">
                    <div class="wh-col-h">Address</div>
                    <div class="wh-lines">456 Industrial Parkway<br>Building A, Suite 100<br>San Francisco, CA 94102<br>United States</div>
                  </div>
                  <div class="col-md-6">
                    <div class="wh-col-h">Contact Information</div>
                    <div class="wh-lines">Manager: John Smith<br>Phone: +1 (555) 123-4567<br>Email: warehouse@store.com<br>Hours: Mon-Fri, 8AM-6PM</div>
                  </div>
                </div>

                <div class="wh-stats">
                  <div class="wh-stat"><div class="stat-num blue">234</div><div class="stat-label">Products</div></div>
                  <div class="wh-stat"><div class="stat-num dark-green">3,456</div><div class="stat-label">Total Stock</div></div>
                  <div class="wh-stat"><div class="stat-num purple">85%</div><div class="stat-label">Capacity</div></div>
                  <div class="wh-stat"><div class="stat-num">45</div><div class="stat-label">Pending Ship</div></div>
                  <div class="wh-stat"><div class="stat-num indigo">2.5k</div><div class="stat-label">sq ft</div></div>
                </div>

                <div class="wh-services">
                  <span class="wh-services-label">Services:</span>
                  <span class="wh-service purple">Same-day Pickup</span>
                  <span class="wh-service blue">Returns Processing</span>
                  <span class="wh-service green">Inventory Management</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===== Warehouse 2 (Secondary / Active) ===== -->
        <div class="card mb-4">
          <div class="card-body p-4">
            <div class="wh-row">
              <div class="wh-thumb"></div>
              <div class="wh-body">
                <div class="wh-top">
                  <div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                      <h3 class="wh-name">East Coast Fulfillment</h3>
                      <span class="wh-badge secondary">Secondary</span>
                      <span class="wh-badge active">Active</span>
                    </div>
                    <div class="wh-id">Warehouse ID: WH-002</div>
                  </div>
                  <a href="#" class="wh-edit">Edit</a>
                </div>

                <div class="row g-4 wh-info">
                  <div class="col-md-6">
                    <div class="wh-col-h">Address</div>
                    <div class="wh-lines">456 Industrial Parkway<br>Building A, Suite 100<br>San Francisco, CA 94102<br>United States</div>
                  </div>
                  <div class="col-md-6">
                    <div class="wh-col-h">Contact Information</div>
                    <div class="wh-lines">Manager: John Smith<br>Phone: +1 (555) 123-4567<br>Email: warehouse@store.com<br>Hours: Mon-Fri, 8AM-6PM</div>
                  </div>
                </div>

                <div class="wh-stats">
                  <div class="wh-stat"><div class="stat-num blue">234</div><div class="stat-label">Products</div></div>
                  <div class="wh-stat"><div class="stat-num dark-green">3,456</div><div class="stat-label">Total Stock</div></div>
                  <div class="wh-stat"><div class="stat-num purple">85%</div><div class="stat-label">Capacity</div></div>
                  <div class="wh-stat"><div class="stat-num">45</div><div class="stat-label">Pending Ship</div></div>
                  <div class="wh-stat"><div class="stat-num indigo">2.5k</div><div class="stat-label">sq ft</div></div>
                </div>

                <div class="wh-services">
                  <span class="wh-services-label">Services:</span>
                  <span class="wh-service purple">Next-day Shipping</span>
                  <span class="wh-service blue">Returns Processing</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===== Warehouse 3 (Inactive) ===== -->
        <div class="card mb-4">
          <div class="card-body p-4">
            <div class="wh-row">
              <div class="wh-thumb"></div>
              <div class="wh-body">
                <div class="wh-top">
                  <div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                      <h3 class="wh-name muted">Southwest Distribution</h3>
                      <span class="wh-badge inactive">Inactive</span>
                    </div>
                    <div class="wh-id">Warehouse ID: WH-003</div>
                  </div>
                  <button type="button" class="btn-activate">Activate</button>
                </div>

                <div class="wh-oneline mt-3">321 Desert Boulevard, Phoenix, AZ 85001, United States</div>

                <div class="wh-inactive mt-3">This warehouse is currently inactive. Activate it to start using it for order fulfillment.</div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===== Inventory Synchronization ===== -->
        <div class="card mb-4">
          <div class="card-body p-4">
            <h2 class="section-h">Inventory Synchronization</h2>

            <div class="sync-row">
              <div>
                <div class="sync-title">Auto-route to nearest warehouse</div>
                <div class="sync-sub">Optimize shipping based on customer location</div>
              </div>
              <div class="toggle-switch active" role="switch" tabindex="0" aria-checked="true"></div>
            </div>

            <div class="sync-row">
              <div>
                <div class="sync-title">Real-time sync</div>
                <div class="sync-sub">Update stock levels instantly</div>
              </div>
              <div class="toggle-switch active" role="switch" tabindex="0" aria-checked="true"></div>
            </div>

            <div class="sync-row">
              <div>
                <div class="sync-title">Low stock alerts</div>
                <div class="sync-sub">Notify when inventory is low</div>
              </div>
              <div class="toggle-switch active" role="switch" tabindex="0" aria-checked="true"></div>
            </div>

            <div class="sync-row">
              <div>
                <div class="sync-title">Multi-warehouse distribution</div>
                <div class="sync-sub">Split inventory across locations</div>
              </div>
              <div class="toggle-switch active" role="switch" tabindex="0" aria-checked="true"></div>
            </div>
          </div>
        </div>

        <script>
          (function(){
            document.querySelectorAll('.toggle-switch').forEach(function(t){
              function flip(){
                t.classList.toggle('active');
                t.setAttribute('aria-checked', t.classList.contains('active') ? 'true' : 'false');
              }
              t.addEventListener('click', flip);
              t.addEventListener('keydown', function(e){
                if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); flip(); }
              });
            });
          })();
        </script>
</main>
@endsection

@section('script')
<script>
(function(){
            document.querySelectorAll('.toggle-switch').forEach(function(t){
              function flip(){
                t.classList.toggle('active');
                t.setAttribute('aria-checked', t.classList.contains('active') ? 'true' : 'false');
              }
              t.addEventListener('click', flip);
              t.addEventListener('keydown', function(e){
                if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); flip(); }
              });
            });
          })();
        </script>
      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    /* ---- Mobile sidebar toggle ---- */
    (function () {
      var sb = document.getElementById('dashSidebar');
      var ov = document.getElementById('sidebarOverlay');
      var open = document.getElementById('hamburgerBtn');
      var close = document.getElementById('sidebarCloseBtn');
      function show(){ sb.classList.add('open'); ov.classList.add('overlay-active'); }
      function hide(){ sb.classList.remove('open'); ov.classList.remove('overlay-active'); }
      if (open) open.addEventListener('click', show);
      if (close) close.addEventListener('click', hide);
      if (ov) ov.addEventListener('click', hide);
    })();
</script>
@endsection