@extends('layouts.app')

@section('content')

@php $roleID     = Auth::user()->role_id ?? 0; @endphp

{{-- SUCCESS TOAST --}}
@if(session('success'))
    <div id="successToast">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div id="errorToast">
        <i class="fa fa-times-circle"></i> {{ session('error') }}
    </div>
@endif

{{-- OUTER CARD --}}
<div class="card">

    {{-- Card Header --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3>
            <i class="fa fa-arrow-circle-right"></i>
            Suppliers
        </h3>
        <a href="{{ route('supplier.create') }}" class="btn btn-primary btn-sm px-4">
            <i class="fa fa-plus me-1"></i> Create
        </a>
    </div>

    {{-- Breadcrumb --}}
    <div class="card-header border-bottom-0 px-4 py-2" style="border-top: 1px solid #f1f1f4;">
        <ul class="breadcrumb fs-7 my-0">
            <li class="breadcrumb-item">
                <a href="{{ route('supplier.index') }}">Home</a>
            </li>
            <li class="breadcrumb-item">Suppliers List</li>
        </ul>
    </div>

    {{-- Card Body --}}
    <div class="card-body pt-4">

        <div class="section-panel">
            <div class="section-panel__header">
                <i class="fa fa-list"></i> Suppliers List
            </div>
            <div class="section-panel__body p-0">
                <div class="table-responsive">
                    <table class="supp-table">
                        <thead>
                            <tr>
                                <th>Supplier Name</th>
                                <th>Service Type</th>
                                <th>API URL</th>
                                <th>Status</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($suppliers as $supplier)
                            <tr>
                                <td class="fw-semibold">{{ $supplier->supp_name }}</td>
                                <td>{{ ucfirst($supplier->supp_type) }}</td>
                                <td class="text-muted small">{{ $supplier->api_url }}</td>
                                <td>
                                    @if($supplier->status)
                                        <span class="status-badge status-badge--active">Active</span>
                                    @else
                                        <span class="status-badge status-badge--inactive">Inactive</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light-primary dropdown-toggle"
                                                type="button"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                            <i class="fa fa-cog me-1"></i> Options
                                        </button>

                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">

                                            @if($supplier->status == 1 && in_array($roleID, [1]) && $supplier->supp_type == 'hotel')
                                            <li>
                                                <a class="dropdown-item"
                                                href="{{ route('b2b.hotels.import_hotels', $supplier->id) }}" target="_blank">
                                                    <i class="fas fa-upload text-success me-2"></i>
                                                    Import Hotels
                                                </a>
                                            </li>
                                            @endif

                                            <li>
                                                <a class="dropdown-item"
                                                href="{{ route('supplier.edit', $supplier->id) }}">
                                                    <i class="fa fa-edit text-primary me-2"></i>
                                                    Edit
                                                </a>
                                            </li>

                                            <li>
                                                <form action="{{ route('supplier.destroy', $supplier->id) }}"
                                                    method="POST"
                                                    onsubmit="return confirm('Delete this supplier?')">
                                                    @csrf
                                                    @method('DELETE')

                                                    <button type="submit"
                                                            class="dropdown-item text-danger">
                                                        <i class="fa fa-trash me-2"></i>
                                                        Delete
                                                    </button>
                                                </form>
                                            </li>

                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">No suppliers found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>{{-- /card-body --}}

</div>{{-- /card --}}


<style>
    /* ---- Toast ---- */
    #successToast, #errorToast {
        position: fixed; bottom: 30px; left: 30px;
        color: #fff;
        padding: 12px 20px; border-radius: 6px;
        font-size: 14px; font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 9999; display: flex; align-items: center; gap: 8px;
        animation: fadeInUp 0.3s ease;
    }
    #successToast { background-color: #155724; }
    #errorToast   { background-color: #721c24; }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Card header ---- */
    .card-header h3 {
        font-size: 16px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 8px;
    }

    /* ---- Section panel ---- */
    .section-panel {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }
    .section-panel__header {
        display: flex; align-items: center; gap: 8px;
        background: #f8f9fc;
        border-bottom: 1px solid #e9ecef;
        padding: 12px 18px;
        font-size: 13px; font-weight: 600; color: #333;
    }
    .section-panel__header .fa { color: var(--bs-primary); font-size: 14px; }
    .section-panel__body { padding: 20px 18px; }

    /* ---- Table ---- */
    .supp-table {
        width: 100%; border-collapse: collapse;
        font-size: 13px;
    }
    .supp-table thead tr {
        background: #f8f9fc;
        border-bottom: 2px solid #e9ecef;
    }
    .supp-table thead th {
        padding: 12px 16px;
        font-size: 12px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.5px;
        color: #6c757d;
    }
    .supp-table tbody tr {
        border-bottom: 1px solid #f1f1f4;
        transition: background 0.15s;
    }
    .supp-table tbody tr:last-child { border-bottom: none; }
    .supp-table tbody tr:hover { background: #f8f9fc; }
    .supp-table tbody td { padding: 13px 16px; color: #333; }

    /* ---- Status badges ---- */
    .status-badge {
        display: inline-block;
        padding: 3px 10px; border-radius: 20px;
        font-size: 12px; font-weight: 600;
    }
    .status-badge--active   { background: #e8f5e9; color: #2e7d32; }
    .status-badge--inactive { background: #fdecea; color: #c62828; }
    .btn-light-primary {
        background: #eef6ff;
        color: #0d6efd;
        border: 1px solid #dbeafe;
    }

    .btn-light-primary:hover {
        background: #0d6efd;
        color: #fff;
    }

    .dropdown-menu {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 6px 0;
    }

    .dropdown-item {
        font-size: 13px;
        padding: 8px 14px;
    }

    .dropdown-item:hover {
        background: #f8f9fc;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Toast dismiss
    ['successToast', 'errorToast'].forEach(function(id) {
        var t = document.getElementById(id);
        if (t) {
            setTimeout(function () {
                t.style.transition = 'opacity 0.5s ease';
                t.style.opacity = '0';
                setTimeout(function () { t.remove(); }, 500);
            }, 3000);
        }
    });
</script>

@endsection