@extends('adminlte::page')

@section('title', 'Manage Vendors')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-weight-bold text-dark">Vendor Management</h1>
        @can('create vendors')
            <a class="btn btn-primary shadow-sm" href="{{ route('vendors.create') }}">
                <i class="fas fa-plus mr-2"></i> Create New Vendor
            </a>
        @endcan
    </div>
@stop

@section('content')
    @if ($message = Session::get('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="fas fa-check-circle mr-2"></i> {{ $message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="card shadow-md border-0 rounded-lg">
        <div class="card-body p-0">
            <table class="table table-hover table-striped mb-0">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="pl-4 py-3 border-0">No</th>
                        <th class="py-3 border-0">Name</th>
                        <th class="py-3 border-0">Contact Person</th>
                        <th class="py-3 border-0">Email</th>
                        <th class="py-3 border-0">Phone</th>
                        <th class="pr-4 py-3 border-0 text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($vendors as $key => $vendor)
                    <tr>
                        <td class="pl-4 align-middle">{{ ++$i }}</td>
                        <td class="align-middle font-weight-bold">{{ $vendor->name }}</td>
                        <td class="align-middle">{{ $vendor->contact_person }}</td>
                        <td class="align-middle"><a href="mailto:{{ $vendor->email }}" class="text-primary">{{ $vendor->email }}</a></td>
                        <td class="align-middle">{{ $vendor->phone }}</td>
                        <td class="pr-4 align-middle text-right">
                             <div class="btn-group">
                                <a class="btn btn-sm btn-info shadow-sm" href="{{ route('vendors.show',$vendor->id) }}" data-toggle="tooltip" title="Show">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @can('edit vendors')
                                    <a class="btn btn-sm btn-warning shadow-sm ml-1" href="{{ route('vendors.edit',$vendor->id) }}" data-toggle="tooltip" title="Edit">
                                        <i class="fas fa-pen"></i>
                                    </a>
                                @endcan
                                @can('delete vendors')
                                    <form action="{{ route('vendors.destroy', $vendor->id) }}" method="POST" style="display:inline" class="ml-1">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger shadow-sm" data-toggle="tooltip" title="Delete" onclick="return confirm('Are you sure?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-white border-0 py-3">
            {!! $vendors->links('pagination::bootstrap-5') !!}
        </div>
    </div>
@stop

@section('css')
@stop

@section('js')
@stop