@extends('admin.layouts.admin')

@section('title', 'Branches - SIVILIMA Admin')
@section('breadcrumb_title', 'Branches')
@section('breadcrumb')
  <li class="breadcrumb-item active" aria-current="page">Showroom Branches</li>
@endsection

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{ session('success') }}</div>
@endif

<div class="row">
  <div class="col-12 col-lg-4 order-lg-2">
    <div class="card">
      <div class="card-header"><h6 class="mb-0" id="branchFormTitle">Add Branch</h6></div>
      <div class="card-body">
        <form method="POST" action="{{ route('admin.branches.store') }}" id="branchForm">
          @csrf
          <input type="hidden" name="_method" value="POST" id="branchMethod">
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Name *</label>
              <input type="text" name="name" class="form-control" id="branchName" required>
            </div>
            <div class="col-12">
              <label class="form-label">Address</label>
              <textarea name="address" class="form-control" id="branchAddress" rows="2"></textarea>
            </div>
            <div class="col-12">
              <label class="form-label">Phone</label>
              <input type="text" name="phone" class="form-control" id="branchPhone">
            </div>
            <div class="col-12">
              <label class="form-label">Opening Hours</label>
              <input type="text" name="hours" class="form-control" id="branchHours" placeholder="Mon - Sat: 8:30 AM - 5:30 PM">
            </div>
            <div class="col-12">
              <label class="form-label">Google Maps Embed URL</label>
              <input type="text" name="map_embed" class="form-control" id="branchMapEmbed" placeholder="https://www.google.com/maps/embed?pb=...">
            </div>
            <div class="col-md-6">
              <label class="form-label">Sort Order</label>
              <input type="number" name="sort_order" class="form-control" value="0" id="branchOrder">
            </div>
            <div class="col-md-6">
              <label class="form-label">Status</label>
              <select name="is_active" class="form-select" id="branchStatus">
                <option value="1">Active</option>
                <option value="0">Inactive</option>
              </select>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary w-100" id="branchSubmit">Add Branch</button>
              <button type="button" class="btn btn-light w-100 mt-2 d-none" id="branchCancel" onclick="resetForm()">Cancel Edit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-8 order-lg-1">
    <div class="card">
      <div class="card-header"><h6 class="mb-0">All Branches ({{ $branches->count() }})</h6></div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered align-middle">
            <thead><tr><th>#</th><th>Name</th><th>Address</th><th>Phone</th><th>Hours</th><th width="60">Order</th><th width="60">Status</th><th width="80">Actions</th></tr></thead>
            <tbody>
              @forelse($branches as $branch)
              <tr>
                <td>{{ $loop->iteration }}</td>
                <td><strong>{{ $branch->name }}</strong></td>
                <td><small>{{ Str::limit($branch->address, 30) }}</small></td>
                <td>{{ $branch->phone }}</td>
                <td>{{ $branch->hours }}</td>
                <td>{{ $branch->sort_order }}</td>
                <td>@if($branch->is_active)<span class="badge bg-success">Active</span>@else<span class="badge bg-secondary">Inactive</span>@endif</td>
                <td>
                  <div class="d-flex gap-1">
                    <button type="button" class="btn btn-sm btn-outline-primary edit-branch"
                      data-id="{{ $branch->id }}"
                      data-name="{{ $branch->name }}"
                      data-address="{{ $branch->address }}"
                      data-phone="{{ $branch->phone }}"
                      data-hours="{{ $branch->hours }}"
                      data-map_embed="{{ $branch->map_embed }}"
                      data-sort_order="{{ $branch->sort_order }}"
                      data-is_active="{{ $branch->is_active }}"
                    ><i class="bi bi-pencil"></i></button>
                    <form method="POST" action="{{ route('admin.branches.destroy', $branch) }}" onsubmit="return confirm('Delete?')" style="display:inline">
                      @csrf @method('DELETE')
                      <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                    </form>
                  </div>
                </td>
              </tr>
              @empty
              <tr><td colspan="8" class="text-center text-muted py-4">No branches yet.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
function resetForm() {
  document.getElementById('branchForm').action = '{{ route("admin.branches.store") }}';
  document.getElementById('branchMethod').value = 'POST';
  document.getElementById('branchFormTitle').textContent = 'Add Branch';
  document.getElementById('branchSubmit').textContent = 'Add Branch';
  document.getElementById('branchCancel').classList.add('d-none');
  document.getElementById('branchName').value = '';
  document.getElementById('branchAddress').value = '';
  document.getElementById('branchPhone').value = '';
  document.getElementById('branchHours').value = '';
  document.getElementById('branchMapEmbed').value = '';
  document.getElementById('branchOrder').value = '0';
  document.getElementById('branchStatus').value = '1';
}

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.edit-branch').forEach(btn => {
    btn.addEventListener('click', function() {
      const id = this.dataset.id;
      document.getElementById('branchForm').action = '/admin-siwilima/branches/' + id;
      document.getElementById('branchMethod').value = 'PUT';
      document.getElementById('branchFormTitle').textContent = 'Edit Branch';
      document.getElementById('branchSubmit').textContent = 'Update Branch';
      document.getElementById('branchCancel').classList.remove('d-none');
      document.getElementById('branchName').value = this.dataset.name;
      document.getElementById('branchAddress').value = this.dataset.address;
      document.getElementById('branchPhone').value = this.dataset.phone;
      document.getElementById('branchHours').value = this.dataset.hours;
      document.getElementById('branchMapEmbed').value = this.dataset.map_embed;
      document.getElementById('branchOrder').value = this.dataset.sort_order;
      document.getElementById('branchStatus').value = this.dataset.is_active;
      window.scrollTo({ top: 200, behavior: 'smooth' });
    });
  });
});
</script>
@endpush