@extends('admin.zsi.layouts.admin')
@section('content')
    <div class="content mt-3">
        @if (session('error'))
            {!! session('error') !!}
        @endif

        @if (session('success'))
            {!! session('success') !!}
        @endif

        <div class="animated fadeIn">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">

                        <div class="card-header">
                            <strong class="card-title">
                                <i class="fa fa-file-image-o"></i> Organization Logo
                            </strong>

                            <a href="{{ url('zsi/customerLogo/add') }}" class="btn btn-primary float-end">
                                + Organization Logo
                            </a>
                        </div>

                        <div class="card-body">
                            @if (!empty($arGallerys) && count($arGallerys) > 0)
                                <table id="bootstrap-data-table" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Image</th>
                                            <th>Alt (English)</th>
                                            <th>Alt (Hindi)</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach ($arGallerys as $arGallery)
                                            <tr>
                                                <td id="banner-name">
                                                    <img src="{{ asset('uploads/customer-logo/' . $arGallery->szImageName) }}"
                                                        alt="{{ $arGallery->szImageAlt }}"
                                                        style="max-width:120px; max-height:80px;">
                                                </td>

                                                <td id="banner-title">
                                                    {{ $arGallery->szImageAlt }}
                                                </td>

                                                <td id="banner-title">
                                                    {{ $arGallery->szImageAltHindi }}
                                                </td>

                                                <td>
                                                    <a href="{{ url('zsi/customerLogo/edit/' . $arGallery->szUniqueKey) }}">
                                                        <i class="fa fa-edit"></i> Edit
                                                    </a>
                                                    |

                                                    <a href="{{ url('zsi/customerLogo/delete/' . $arGallery->szUniqueKey) }}"
                                                        onclick="return confirm('Are you sure you want to delete this logo?')">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <div class="alert alert-info mb-0">
                                    No organization logo found.
                                </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <style>
        /* Card */
        .card {
            border: 0;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .card-header {
            background: #fff;
            border-bottom: 1px solid #e9ecef;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #343a40;
        }

        /* Button */
        .btn-primary {
            border-radius: 6px;
            padding: 8px 18px;
            font-weight: 500;
        }

        /* Table */
        #bootstrap-data-table {
            margin-top: 15px;
        }

        #bootstrap-data-table thead th {
            background: #0d6efd;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            font-size: 14px;
        }

        #bootstrap-data-table tbody td {
            vertical-align: middle;
            text-align: center;
        }

        #bootstrap-data-table tbody tr:hover {
            background: #f8f9fa;
        }

        /* Image */
        #banner-name img {
            width: 120px;
            height: 70px;
            object-fit: contain;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 4px;
            background: #fff;
            transition: .3s;
        }

        #banner-name img:hover {
            transform: scale(1.08);
            box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
        }

        /* Action Links */
        td a {
            text-decoration: none;
            font-weight: 500;
        }

        td a:first-child {
            color: #0d6efd;
        }

        td a:last-child {
            color: #dc3545;
        }

        td a:hover {
            text-decoration: underline;
        }

        /* Alert */
        .alert {
            border-radius: 8px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            #banner-name img {
                width: 90px;
                height: 55px;
            }
        }
    </style>
@endpush