@extends('admin.admin_dashboard')

@section('customcss')
<style>
    .expense-vendor-card {
        border: 1px solid #d7d7d7;
        border-radius: 10px;
        background: #f9f9f9;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        height: 100%;
    }

    .expense-vendor-card-body {
        padding: 12px 12px 8px;
    }

    .expense-vendor-photo {
        width: 92px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
        border: 1px solid #cfcfcf;
        background: #fff;
    }

    .expense-vendor-name {
        color: #2b2b2b;
        font-weight: 700;
        font-size: 30px;
        margin-bottom: 8px;
        line-height: 1.2;
        text-align: center;
    }

    .vendor-info-line {
        font-size: 14px;
        line-height: 1.45;
        color: #1f1f1f;
    }

    .vendor-info-line strong {
        color: #000;
        font-weight: 700;
    }

    .vendor-status-pill {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
    }

    .vendor-status-active {
        background: #e7f8ed;
        color: #1f7a35;
    }

    .vendor-status-inactive {
        background: #fdeeee;
        color: #a61d24;
    }

    .vendor-action-bar {
        margin-top: 8px;
        border-top: 1px solid #d2d2d2;
        background: #f2f2f2;
        display: flex;
        align-items: stretch;
    }

    .vendor-action-link,
    .vendor-action-dropdown .btn {
        color: #1f1f1f !important;
        text-align: center;
        padding: 9px 8px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        border: none;
        background: transparent;
        width: 100%;
        border-radius: 0;
        text-transform: uppercase;
    }

    .vendor-action-link:hover,
    .vendor-action-dropdown .btn:hover {
        background: #e8e8e8;
    }

    .vendor-action-sep {
        width: 1px;
        align-self: stretch;
        background: #cfcfcf;
    }

    .vendor-action-col {
        flex: 1 1 0;
    }
</style>
@endsection

@section('admin')
<div class="content-body default-height">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Accounting</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Expense Vendors</a></li>
            </ol>
        </div>

        <div class="row">
            <div class="col-xl-12">
                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <div class="filter cm-content-box box-primary mb-3">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-sharp fa-solid fa-filter me-2"></i>Filter
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>
                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <form method="GET" action="{{ route('admin.expense_vendors.index') }}" class="row gy-2 gx-3 align-items-end">
                                <div class="col-md-4">
                                    <label class="form-label">Search</label>
                                    <input type="text" name="search" class="form-control" value="{{ request('search') }}"
                                        placeholder="Name, company, phone, email, NID">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Status</label>
                                    <select name="status" class="form-select">
                                        <option value="">All</option>
                                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-search me-1"></i>Filter
                                        </button>
                                        <a href="{{ route('admin.expense_vendors.index') }}" class="btn btn-outline-secondary">Clear</a>
                                        <a href="{{ route('admin.expense_vendors.create') }}" class="btn btn-success ms-auto">
                                            <i class="fas fa-plus me-1"></i>Add Expense Vendor
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="filter cm-content-box box-primary">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa w-100">
                            <div class="summary-header d-flex justify-content-between align-items-center flex-wrap w-100">
                                <div class="fw-bold text-dark">
                                    Displaying vendors
                                    @if($vendors instanceof \Illuminate\Pagination\LengthAwarePaginator)
                                        from {{ $vendors->firstItem() ?? 0 }} to {{ $vendors->lastItem() ?? 0 }}
                                    @endif
                                    out of total <strong>{{ $totalVendors }}</strong> |
                                    Active: <strong>{{ $activeCount }}</strong> |
                                    Inactive: <strong>{{ $inactiveCount }}</strong>
                                </div>

                                <div class="d-flex align-items-center mt-2 mt-md-0">
                                    <label class="me-2 fw-semibold mb-0">Show:</label>
                                    <select id="perPage" class="form-select form-select-sm" style="width: 90px;">
                                        @foreach([20, 50, 100, 200] as $option)
                                            <option value="{{ $option }}" {{ (int) $perPage === $option ? 'selected' : '' }}>{{ $option }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body pb-4">
                            <div class="row g-3">
                                @forelse($vendors as $vendor)
                                    <div class="col-xl-4 col-lg-6 col-md-12">
                                        <div class="expense-vendor-card">
                                            <div class="expense-vendor-card-body">
                                                <div class="expense-vendor-name">{{ $vendor->name }}</div>

                                                <div class="d-flex align-items-start gap-3">
                                                    @if($vendor->photo)
                                                        <img src="{{ asset('storage/' . $vendor->photo) }}" alt="{{ $vendor->name }}" class="expense-vendor-photo">
                                                    @else
                                                        <div class="expense-vendor-photo d-flex align-items-center justify-content-center">
                                                            <span class="text-muted">Photo</span>
                                                        </div>
                                                    @endif

                                                    <div class="flex-grow-1">
                                                        <div class="vendor-info-line"><strong>Reg. No:</strong> {{ str_pad((string)$vendor->id, 2, '0', STR_PAD_LEFT) }}</div>
                                                        <div class="vendor-info-line"><strong>Age:</strong> -- years</div>
                                                        <div class="vendor-info-line"><strong>Reg. Date:</strong> {{ optional($vendor->created_at)->format('d-m-Y') }}</div>
                                                        <div class="vendor-info-line"><strong>Company:</strong> {{ $vendor->company_name ?: '--' }}</div>
                                                        <div class="vendor-info-line"><strong>Primary:</strong> {{ $vendor->primary_phone ?: '--' }}</div>
                                                        <div class="vendor-info-line mt-1">
                                                            @if($vendor->is_active)
                                                                <span class="vendor-status-pill vendor-status-active">Active</span>
                                                            @else
                                                                <span class="vendor-status-pill vendor-status-inactive">Inactive</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="vendor-action-bar">
                                                <div class="vendor-action-col">
                                                    <a href="{{ route('admin.expense_vendors.edit', $vendor->id) }}" class="vendor-action-link"><i class="fa fa-pencil me-1"></i> Edit</a>
                                                </div>
                                                <div class="vendor-action-sep"></div>
                                                <div class="vendor-action-col">
                                                    <a href="{{ route('admin.expense_vendors.show', $vendor->id) }}" class="vendor-action-link"><i class="fa fa-eye me-1"></i> View</a>
                                                </div>
                                                <div class="vendor-action-sep"></div>
                                                <div class="vendor-action-col vendor-action-dropdown dropdown">
                                                    <button class="btn dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa fa-cog me-1"></i> Actions</button>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="{{ route('admin.expense_vendors.edit', $vendor->id) }}">Edit Profile</a>
                                                        <a class="dropdown-item" href="{{ route('admin.expense_vendors.show', $vendor->id) }}">View Profile</a>
                                                        <form action="{{ route('admin.expense_vendors.destroy', $vendor->id) }}" method="POST"
                                                            onsubmit="return confirm('Delete this expense vendor?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="dropdown-item text-danger">Delete</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12">
                                        <div class="text-center py-5">No expense vendors found.</div>
                                    </div>
                                @endforelse
                            </div>

                            <div class="d-flex justify-content-end mt-3">
                                {{ $vendors->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const perPageSelect = document.getElementById('perPage');
        if (!perPageSelect) return;

        perPageSelect.addEventListener('change', function () {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', this.value);
            url.searchParams.delete('page');
            window.location.href = url.toString();
        });
    });
</script>
@endsection