@extends('admin.layouts.app')

@section('panel')
@php
    $pageTitle = 'Courier Accounts';
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.couriers.create') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-plus"></i> Add Courier
    </a>
@endpush

<div class="row">
    <div class="col-lg-12">
        <div class="card courier-page-card">
            <div class="card-body p-0">

                <div class="courier-list">

                    <div class="courier-list-head">
                        <div>
                            <div class="courier-page-title">
                                <i class="las la-truck"></i>
                                Courier Accounts
                            </div>
                            <div class="courier-page-subtitle">
                                Total: {{ $couriers->total() ?? 0 }}
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table courier-table mb-0">
                            <thead>
                                <tr>
                                    <th>Account</th>
                                    <th>Courier</th>
                                    <th>Base URL</th>
                                    <th>Default</th>
                                    <th>Status</th>
                                    <th>Sort</th>
                                    <th class="text-right">Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse($couriers as $courier)
                                    <tr>
                                        <td>
                                            <div class="courier-name">
                                                {{ $courier->name }}
                                            </div>
                                        </td>

                                        <td>
                                            <span class="courier-badge badge-driver">
                                                {{ $drivers[$courier->driver] ?? ucwords(str_replace('_', ' ', $courier->driver)) }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="courier-url" title="{{ $courier->base_url ?: '-' }}">
                                                {{ $courier->base_url ?: '-' }}
                                            </div>
                                        </td>

                                        <td>
                                            @if($courier->is_default)
                                                <span class="courier-badge badge-default">Default</span>
                                            @else
                                                <span class="muted-text">-</span>
                                            @endif
                                        </td>

                                        <td>
                                            @if($courier->is_active)
                                                <span class="courier-badge badge-active">Active</span>
                                            @else
                                                <span class="courier-badge badge-inactive">Inactive</span>
                                            @endif
                                        </td>

                                        <td>
                                            <span class="sort-pill">
                                                {{ $courier->sort_order }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="action-wrap">
                                                <a href="{{ route('admin.couriers.edit', $courier->id) }}" class="btn btn--primary btn-sm action-btn">
                                                    <i class="las la-edit"></i>
                                                </a>

                                                <form method="POST" action="{{ route('admin.couriers.destroy', $courier->id) }}" class="d-inline-block">
                                                    @csrf
                                                    <button type="submit" class="btn btn--danger btn-sm action-btn">
                                                        <i class="las la-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7">
                                            <div class="empty-box">
                                                কোনো courier account পাওয়া যায়নি।
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($couriers->hasPages())
                        <div class="courier-pagination">
                            {{ $couriers->links() }}
                        </div>
                    @endif

                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('style')
<style>
    .courier-page-card{
        border:1px solid #eee;
        border-radius:14px;
        overflow:hidden;
        background:#fff;
        box-shadow:none;
    }

    .courier-list{
        border-radius:12px;
        background:#fff;
    }

    .courier-list-head{
        padding:18px 20px;
        border-bottom:1px solid #eee;
        background:#fff7f2;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    .courier-page-title{
        font-size:18px;
        font-weight:900;
        color:#222;
        line-height:1.3;
        display:flex;
        align-items:center;
        gap:6px;
    }

    .courier-page-subtitle{
        font-size:12px;
        font-weight:800;
        color:#777;
        margin-top:3px;
    }

    .courier-table{
        width:100%;
        margin:0;
    }

    .courier-table th{
        background:#fafafa;
        color:#555;
        font-size:12px;
        font-weight:900;
        border-bottom:1px solid #eee!important;
        padding:12px 14px!important;
        white-space:nowrap;
        vertical-align:middle!important;
    }

    .courier-table td{
        color:#222;
        font-size:13px;
        font-weight:700;
        border-bottom:1px solid #f1f1f1!important;
        padding:13px 14px!important;
        white-space:nowrap;
        vertical-align:middle!important;
    }

    .courier-table tbody tr:last-child td{
        border-bottom:0!important;
    }

    .courier-name{
        font-size:13px;
        font-weight:900;
        color:#222;
        max-width:190px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .courier-url{
        max-width:310px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#64748b;
        font-size:12px;
        font-weight:800;
    }

    .courier-badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:5px 10px;
        border-radius:999px;
        font-size:11px;
        font-weight:900;
        line-height:1;
        white-space:nowrap;
    }

    .badge-driver{
        background:#fff7ed;
        color:#ea580c;
        border:1px solid #fed7aa;
    }

    .badge-default{
        background:#dbeafe;
        color:#1d4ed8;
        border:1px solid #bfdbfe;
    }

    .badge-active{
        background:#dcfce7;
        color:#15803d;
        border:1px solid #bbf7d0;
    }

    .badge-inactive{
        background:#fee2e2;
        color:#b91c1c;
        border:1px solid #fecaca;
    }

    .sort-pill{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:34px;
        height:26px;
        border-radius:999px;
        background:#f8fafc;
        border:1px solid #e5e7eb;
        color:#475569;
        font-size:12px;
        font-weight:900;
    }

    .muted-text{
        color:#94a3b8;
        font-weight:900;
    }

    .action-wrap{
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:7px;
    }

    .action-btn{
        width:34px;
        height:32px;
        border-radius:8px;
        padding:0!important;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:15px;
        font-weight:900;
    }

    .empty-box{
        padding:38px 12px;
        text-align:center;
        color:#dc2626;
        font-size:14px;
        font-weight:900;
    }

    .courier-pagination{
        padding:14px 16px;
        border-top:1px solid #eee;
    }

    @media(max-width:575px){
        .courier-list-head{
            padding:15px;
            align-items:flex-start;
            flex-direction:column;
        }

        .courier-page-title{
            font-size:16px;
        }

        .courier-table th,
        .courier-table td{
            padding:10px 12px!important;
            font-size:12px;
        }

        .courier-name{
            max-width:145px;
        }

        .courier-url{
            max-width:210px;
        }
    }
</style>
@endpush