@extends('layouts.admin')

@section('title', 'Banner Management')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Banners</h1>
        <p class="page-subtitle">Manage all banners from this single page.</p>
    </div>
    <div class="page-actions">
        <button class="btn btn-primary" onclick="openModal('createModal')">
            <i class="fa-solid fa-plus"></i> Add New Banner
        </button>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($banners as $banner)
                <tr>
                    <td>
                        <img src="{{ asset('images/' . $banner->image) }}" alt="banner" 
                             style="width: 60px; height: 35px; object-fit: cover; border-radius: 4px;">
                    </td>
                    <td><div class="td-name">{{ $banner->name }}</div></td>
                    <td>{{ $banner->title ?? 'N/A' }}</td>
                    <td>{{ $banner->short_description ?? 'N/A' }}</td>
                    <td>
                        <div class="action-btns">
                            <button class="action-btn edit" 
                                    onclick="editBanner({{ json_encode($banner) }})">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </button>
                            <form action="{{ route('admin.banners.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Delete this banner?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn delete"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="createModal" class="modal-overlay">
    <div class="auth-card modal-content">
        <div class="auth-header">
            <h2 class="auth-title">Add New Banner</h2>
            <button class="close-btn" onclick="closeModal('createModal')">&times;</button>
        </div>
        <form action="{{ route('admin.banners.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="form-label">Name</label>
                <input type="text" name="name" class="form-input" style="padding-left: 15px;" required>
            </div>
            <div class="form-group">
                <label class="form-label">Title</label>
                <input type="text" name="title" class="form-input" style="padding-left: 15px;">
            </div>
            <div class="form-group">
                <label class="form-label">Short Description</label>
                <textarea name="short_description" class="form-input" rows="3" style="padding: 10px; height: auto;"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Image</label>
                <input type="file" name="image" class="form-input" style="padding: 10px;" required>
            </div>
            <button type="submit" class="btn btn-primary btn-auth">Save Banner</button>
        </form>
    </div>
</div>

<div id="editModal" class="modal-overlay">
    <div class="auth-card modal-content">
        <div class="auth-header">
            <h2 class="auth-title">Edit Banner</h2>
            <button class="close-btn" onclick="closeModal('editModal')">&times;</button>
        </div>
        <form id="editForm" method="POST" enctype="multipart/form-data">
            @csrf @method('PUT')
            <div class="form-group">
                <label class="form-label">Name</label>
                <input type="text" name="name" id="edit_name" class="form-input" style="padding-left: 15px;" required>
            </div>
            <div class="form-group">
                <label class="form-label">Title</label>
                <input type="text" name="title" id="edit_title" class="form-input" style="padding-left: 15px;">
            </div>
            <div class="form-group">
                <label class="form-label">Short Description</label>
                <textarea name="short_description" id="edit_short_description" class="form-input" rows="3" style="padding: 10px; height: auto;"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">New Image (Optional)</label>
                <input type="file" name="image" class="form-input" style="padding: 10px;">
            </div>
            <button type="submit" class="btn btn-primary btn-auth">Update Banner</button>
        </form>
    </div>
</div>

@push('styles')
<style>
    .modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.7);
        display: none; align-items: center; justify-content: center; z-index: 2000;
        backdrop-filter: blur(5px);
    }
    .modal-content { position: relative; width: 100%; max-width: 500px; animation: fadeUp 0.3s ease; }
    .close-btn {
        position: absolute; top: 15px; right: 20px; background: none; border: none;
        color: var(--text-muted); font-size: 24px; cursor: pointer;
    }
</style>
@endpush

@push('scripts')
<script>
    function openModal(id) {
        document.getElementById(id).style.display = 'flex';
    }

    function closeModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    function editBanner(banner) {
        const form = document.getElementById('editForm');
        form.action = `/admin/banners/${banner.id}`;

        document.getElementById('edit_name').value = banner.name;
        document.getElementById('edit_title').value = banner.title || '';

        document.getElementById('edit_short_description').value = banner.short_description || '';

        openModal('editModal');
    }

    window.onclick = function(event) {
        if (event.target.className === 'modal-overlay') {
            event.target.style.display = 'none';
        }
    }
</script>
@endpush
@endsection