@extends('backEnd.layouts.master')
@section('title', 'Customer Tags')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('admin.customers.insights-settings') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left"></i></a>
            <div>
                <h4 class="fw-bold mb-0"><i class="fas fa-tags me-2 text-primary"></i>Customer Tags (Manual)</h4>
                <small class="text-muted">Create tags and assign from Customer Insights page</small>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-bold">Add Tag</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.customer-tags.store') }}">
                        @csrf
                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Name *</label>
                            <input type="text" name="name" class="form-control form-control-sm" required placeholder="Wholesale, Influencer...">
                        </div>
                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Icon (FontAwesome)</label>
                            <input type="text" name="icon" class="form-control form-control-sm" value="fa-tag" placeholder="fa-star">
                        </div>
                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Sort order</label>
                            <input type="number" name="sort_order" class="form-control form-control-sm" value="0" min="0">
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="tagActiveNew" checked>
                            <label class="form-check-label small" for="tagActiveNew">Active</label>
                        </div>
                        <button type="submit" class="btn btn-success btn-sm w-100"><i class="fas fa-plus me-1"></i> Create Tag</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <div class="card-body p-0">
                    <table class="table table-sm mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Tag</th>
                                <th>Slug</th>
                                <th>Assigned</th>
                                <th>Status</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tags as $tag)
                            <tr>
                                <td>
                                    <span class="ci-tag ci-tag-manual"><i class="fas {{ $tag->icon }} me-1"></i>{{ $tag->name }}</span>
                                </td>
                                <td><code>{{ $tag->slug }}</code></td>
                                <td>{{ $tag->assignments_count ?? $tag->assignments()->count() }}</td>
                                <td>
                                    @if($tag->is_active)
                                    <span class="badge bg-success">Active</span>
                                    @else
                                    <span class="badge bg-secondary">Off</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#editTag{{ $tag->id }}">Edit</button>
                                    <form action="{{ route('admin.customer-tags.destroy', $tag->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this tag?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
                                    </form>
                                </td>
                            </tr>
                            <tr class="collapse" id="editTag{{ $tag->id }}">
                                <td colspan="5" class="bg-light">
                                    <form method="POST" action="{{ route('admin.customer-tags.update', $tag->id) }}" class="row g-2 align-items-end p-2">
                                        @csrf @method('PUT')
                                        <div class="col-md-3">
                                            <label class="small fw-semibold">Name</label>
                                            <input type="text" name="name" class="form-control form-control-sm" value="{{ $tag->name }}" required>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="small fw-semibold">Icon</label>
                                            <input type="text" name="icon" class="form-control form-control-sm" value="{{ $tag->icon }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="small fw-semibold">Sort</label>
                                            <input type="number" name="sort_order" class="form-control form-control-sm" value="{{ $tag->sort_order }}">
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="is_active" value="1" id="tagActive{{ $tag->id }}" {{ $tag->is_active ? 'checked' : '' }}>
                                                <label class="form-check-label small" for="tagActive{{ $tag->id }}">Active</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3 text-end">
                                            <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">No tags yet. Create one on the left.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($tags->hasPages())
                <div class="card-footer">{{ $tags->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/customer-insights.css') }}?v={{ @filemtime(public_path('backEnd/css/customer-insights.css')) ?: time() }}">
@endpush