@extends('layouts.backend')
@section('title')
    Admin | Advertise Setup
@endsection

@section('extra_css')
    <style>
        .image-uploader {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .image-uploader__label {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            position: relative;
        }
        .image-uploader__input {
            display: none !important;
        }
        .card-body img {
            border-radius: 5px;
            height: 50px;
            width: auto;
            max-width: 187px;
        }
    </style>
@endsection


@section('extra_js')
<script>
    const input = document.querySelector('.image-uploader__input');
    const previewImage = document.querySelector('.image-uploader__preview-image');
    const removeBtn = document.getElementById('removeImage');
    const defaultImage = "{{ asset('/defaults/default3.png') }}";

    input.addEventListener('change', () => {
        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = (event) => {
            previewImage.src = event.target.result;
        };

        if (file) {
            reader.readAsDataURL(file);
        }
    });

    removeBtn.addEventListener('click', () => {
        input.value = ""; // Clear file input
        previewImage.src = defaultImage; // Reset preview image
    });
</script>
@endsection

@section('content')
    <main>
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-4">
                    <div class="card shadow-lg border-0 rounded-lg mt-3 mb-3">
                        <div class="card-header">
                            <h4 class="text-center font-weight-light my-1">Add Advertisement</h4>
                        </div>
                        <div class="card-body">
                            <form role="form" method="post" action="{{ route('ad.store') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group row">
                                    <label class="col-md-3" for="name">Name <span class="text-danger">*</span></label>
                                    <div class="col-md-9">
                                        <input class=" form-control" name="name" placeholder="Name" type="text"
                                            autocomplete="off" required>
                                        <span
                                            class="text-danger">{{ $errors->has('name') ? $errors->first('name') : '' }}</span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3" for="url">URL <span class="text-danger"></span></label>
                                    <div class="col-md-9">
                                        <input class=" form-control" name="url" placeholder="URL" type="text">
                                        <span
                                            class="text-danger">{{ $errors->has('url') ? $errors->first('url') : '' }}</span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3" for="position">Position <span
                                            class="text-danger"></span></label>
                                    <div class="col-md-9">
                                        <input class=" form-control" name="position" placeholder="Position" type="number">
                                        <span
                                            class="text-danger">{{ $errors->has('position') ? $errors->first('position') : '' }}</span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3" for="photo">Photo<span class="text-danger">*</span></label>
                                    <div class="col-md-9">
                                        <div class="image-uploader">
                                            <label for="imageFile" class="image-uploader__label">
                                                <img src="{{ asset('/defaults/default3.png') }}" alt="Preview image"
                                                    class="image-uploader__preview-image img-thumbnail p-1"
                                                    style="width: 170px; height: 90px;">
                                                <input type="file" name="photo" class="image-uploader__input"
                                                    id="imageFile" accept="image/*">
                                            </label>
                                            @error('photo')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="float-right btn btn-success">Create</button>
                            </form>
                        </div>
                    </div>
                </div> <!--col-6-->

                <div class="col-lg-8">
                    <div class="card shadow-lg border-0 rounded-lg mt-3 mb-3">
                        <div class="card-header">
                            <h4 class="text-center font-weight-light my-1">All Advertisement</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="width: 50px;">ID</th>
                                            <th>Name</th>
                                            <th>URL</th>
                                            <th class="text-center">Position</th>
                                            <th class="text-center">Photo</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($ads as $row)
                                            <tr>
                                                <td class="text-center">{{ $row->id }}</td>
                                                <td>{{ $row->name }}</td>
                                                <td>{{ $row->url }}</td>
                                                <td class="text-center">{{ $row->position }}</td>
                                                <td class="text-center"><img src="{{ asset('/ad-images/' . $row->photo) }}"
                                                        class="ads__img"></td>
                                                <td class="text-center">
                                                    <a href="{{ route('ad.edit', ['id' => $row->id]) }}"
                                                        class="btn btn-sm btn-info"><i
                                                            class="fa fa-edit"></i></a>
                                                    <a href="{{ route('ad.delete', ['id' => $row->id]) }}"
                                                        onclick="return confirm('Are you sure to delete this!')"
                                                        class="btn btn-sm btn-danger permanently"><i
                                                            class="fa fa-trash"></i> </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div>
                                    {{ $ads->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!--col-6-->
            </div>
        </div>
    </main>
@endsection