@extends('admin.layout')

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

@section('content')
<div class="container-fluid">

    {{-- Page Title --}}
    <div class="mb-3">
        <h5 class="fw-semibold">Upload Banner</h5>
    </div>

    {{-- Upload Card --}}
    <div class="row justify-content-center mb-4">
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">

                    <h6 class="mb-3">Upload Banner</h6>

                    <form action="" method="POST" enctype="multipart/form-data">
                        @csrf

                        {{-- Upload Box --}}
                        <label class="w-100">
                            <div class="border border-dashed rounded p-4 text-center cursor-pointer"
                                 style="border-style:dashed;">
                                <div class="mb-2">
                                    ⬆️
                                </div>
                                <h6 class="mb-1">Upload Banner</h6>
                                <small class="text-muted">
                                    Choose photo size should be less than<br>
                                    <strong>2 MB</strong> and should be in
                                    <strong>Jpg, Png, JPEG</strong> Format
                                </small>
                            </div>

                            <input
                                type="file"
                                name="banner"
                                class="d-none"
                                accept="image/png,image/jpeg,image/jpg"
                                required
                            >
                        </label>

                        {{-- Submit --}}
                        <button type="submit" class="btn btn-warning w-100 mt-3">
                            Submit
                        </button>
                    </form>

                </div>
            </div>
        </div>
    </div>

    {{-- Banner Table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">

          <table class="table table-hover mb-0">
    <thead class="table-light">
        <tr>
            <th style="width: 80px;">SNO</th>
            <th>Date</th>
            <th>Banner</th>
            <th style="width: 150px;">Action</th>
        </tr>
    </thead>
    <tbody>
        @for($i = 1; $i <= 5; $i++)
        <tr>
            <td>{{ $i }}</td>
            <td>{{ \Carbon\Carbon::now()->subDays($i)->format('d/m/Y') }}</td>
            <td>
                <img src="https://via.placeholder.com/150x50?text=Banner+{{ $i }}" 
                     alt="Banner {{ $i }}" class="img-fluid" style="height:50px;">
            </td>
           <td>
    <a href="" class="text-warning me-3" title="View">
        View
    </a>

    <a href="" class="text-danger" 
       onclick="return confirm('Are you sure you want to block this banner?')" 
       title="Block">
        Block
    </a>
</td>

        </tr>
        @endfor
    </tbody>
</table>


        </div>
    </div>

</div>
@endsection