@extends('backend.master')
@section('title','Banner Manager')

@section('content')

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    :root{--primary:#e53935;--bg:#f5f5f5;--ink:#111827;--muted:#6b7280;}
    body{background:var(--bg);}
    .page-wrap{max-width:1000px;margin:20px auto 60px;padding:0 12px;}
    .card-main{
        background:#fff;border-radius:18px;padding:16px 16px 20px;
        box-shadow:0 10px 25px rgba(15,23,42,.08);border:1px solid #e5e7eb;
    }
    .header-row{
        display:flex;justify-content:space-between;align-items:center;gap:10px;
    }
    .title{font-size:18px;font-weight:700;color:var(--ink);}
    .subtitle{font-size:13px;color:var(--muted);}
    .btn-add{
        border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;
    }
    table{width:100%;border-collapse:collapse;font-size:13px;}
    th,td{
        padding:7px 6px;border-bottom:1px solid #eef2f7;white-space:nowrap;text-align:left;
    }
    th{background:#f9fafb;font-weight:600;color:#4b5563;}
    tr:hover{background:#fafafa;}
    .thumb{
        width:70px;height:38px;border-radius:6px;overflow:hidden;
        background:#f3f4f6;display:flex;align-items:center;justify-content:center;
    }
    .thumb img{width:100%;height:100%;object-fit:cover;}
    .badge-status{
        display:inline-flex;align-items:center;gap:4px;border-radius:999px;
        padding:2px 8px;font-size:11px;font-weight:600;
    }
    .badge-active{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0;}
    .badge-inactive{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}

    .btn-xs{
        border-radius:999px;border:none;padding:5px 9px;font-size:11px;font-weight:600;
        display:inline-flex;align-items:center;gap:4px;cursor:pointer;
    }
    .btn-toggle{background:#f3f4f6;color:#111827;}
    .btn-edit{background:#e0f2fe;color:#0369a1;}
    .btn-delete{background:#fee2e2;color:#b91c1c;}
</style>

<div class="page-wrap">
    <div class="card-main">

        <div class="header-row">
            <div>
                <div class="title">
                    <i class="fa-solid fa-image"></i> Banner Manager
                </div>
                <div class="subtitle">
                    হোমপেজ / অ্যাপের banner গুলো এখানে manage করতে পারবেন।
                </div>
            </div>
            <a href="{{ route('admin.banners.create') }}" class="btn btn-sm btn-primary btn-add">
                <i class="fa-solid fa-plus"></i> Add New
            </a>
        </div>

        @if(session('success'))
            <div class="alert alert-success py-2 mt-2">{{ session('success') }}</div>
        @endif

        <div style="overflow-x:auto;margin-top:10px;">
            <table>
                <thead>
                <tr>
                    <th>#</th>
                    <th>Banner</th>
                    <th>Title</th>
                    <th>Button</th>
                    <th>Order</th>
                    <th>Status</th>
                    <th style="text-align:right;">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($banners as $banner)
                    <tr>
                        <td>{{ $banner->id }}</td>
                        <td>
                            <div class="thumb">
                                @if($banner->image)
                                    <img src="{{ asset('storage/'.$banner->image) }}" alt="">
                                @else
                                    <span style="font-size:11px;color:#9ca3af;">No image</span>
                                @endif
                            </div>
                        </td>
                        <td>{{ $banner->title ?? '-' }}</td>
                        <td>
                            @if($banner->button_text)
                                <span style="font-size:12px;font-weight:600;">{{ $banner->button_text }}</span>
                                <br>
                                <small style="font-size:11px;color:#6b7280;">
                                    {{ $banner->button_url }}
                                </small>
                            @else
                                <span style="font-size:11px;color:#9ca3af;">—</span>
                            @endif
                        </td>
                        <td>{{ $banner->sort_order }}</td>
                        <td>
                            @if($banner->status)
                                <span class="badge-status badge-active">
                                    <i class="fa-solid fa-circle-check"></i> Active
                                </span>
                            @else
                                <span class="badge-status badge-inactive">
                                    <i class="fa-solid fa-ban"></i> Inactive
                                </span>
                            @endif
                        </td>
                        <td style="text-align:right;">
                            {{-- Toggle status --}}
                            <form action="{{ route('admin.banners.toggle-status', $banner) }}"
                                  method="POST" style="display:inline;">
                                @csrf
                                <button type="submit" class="btn-xs btn-toggle">
                                    @if($banner->status)
                                        <i class="fa-solid fa-ban"></i> Disable
                                    @else
                                        <i class="fa-solid fa-check"></i> Enable
                                    @endif
                                </button>
                            </form>

                            {{-- Edit --}}
                            <a href="{{ route('admin.banners.edit', $banner) }}"
                               class="btn-xs btn-edit">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>

                            {{-- Delete --}}
                            <form action="{{ route('admin.banners.destroy', $banner) }}"
                                  method="POST" style="display:inline;"
                                  onsubmit="return confirm('Are you sure you want to delete this banner?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-xs btn-delete">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted">
                            কোনো banner পাওয়া যায়নি।
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-2">
            {{ $banners->links() }}
        </div>
    </div>
</div>
@endsection