@extends('admin.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

    <style>
        .table-no-border {
            border: none;
        }

        .table-no-border th,
        .table-no-border td {
            border: none;
        }

        /* Adjusting select padding for better alignment within DataTables */
        .dataTables_wrapper .dataTables_length select {
            padding: 8px 48px 8px 16px !important;
        }

        .btn-primary.submit-btn {
            background-color: #1e3a8a; /* A deep blue */
            border-color: #1e3a8a;
            color: #ffffff;
        }

        .btn-primary.submit-btn:hover {
            background-color: #1c357d;
            border-color: #1c357d;
        }

        .action-btn {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 16px;
            margin: 0 4px;
            border-radius: 6px;
        }

        /* Style for image preview in table */
        .preview-td-img {
            max-width: 80px; /* Adjust as needed */
            height: auto;
            border-radius: 4px;
        }
    </style>

    <div class="container-fluid page-wrapper category-container">

        <div class="row">
            <div class="d-flex align-items-center">
                <h3 class="page-top-heading">Avatar Management</h3>
            </div>
        </div>

        <div class="row d-flex justify-content-center mt-4">
            <div class="col-lg-6">
                <div class="card ILY-form-card">
                    <div class="card-header">
                        <h5 class="card-title">Add New Avatar</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('add_image_post') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group mb-3">
                                        <label for="image_file" class="form-label">Choose Image</label>
                                        <input type="file" name="image" class="form-control custom-file-input"
                                            id="image_file" accept="image/*"> {{-- Added accept attribute for file input --}}
                                        @error('image')
                                            <div class="text-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="url" class="form-label">Link URL (Optional)</label>
                                        <input type="url" name="url" class="form-control" id="url"
                                            placeholder="https://example.com">
                                        @error('url')
                                            <div class="text-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="button-container mt-4">
                                        <button type="submit" class="btn btn-primary submit-btn">
                                            <i class="fa-regular fa-circle-check me-2"></i>Add Avatar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        ---

        <div class="row mt-5">
            <div class="col-lg-12">
                <div class="mb-3">
                    <h6 class="table-heading">Existing Avatars</h6>
                </div>
                <div class="card datatable-card">
                    <div class="card-body">
                        <div class="table-responsive"> {{-- Added table-responsive for better mobile view --}}
                            <table id="data-table" class="table nowrap align-middle" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>S/N</th>
                                        <th>DATE</th>
                                        <th>IMAGE</th>
                                        <th>URL</th> {{-- Added URL column for clarity --}}
                                        <th class="center-action-cell">ACTION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($banners as $banner)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $banner->updated_at->format('d-m-Y') }}</td>
                                            <td>
    @php
        $bannerImageUrl = null;

        $digitalOceanBaseUrl =
            'https://dstone.sfo3.digitaloceanspaces.com';

        if (!empty($banner->image)) {

            $storedImage = ltrim(
                trim($banner->image),
                '/'
            );

            /*
            |--------------------------------------------------------------------------
            | Already full URL
            |--------------------------------------------------------------------------
            */
            if (
                str_starts_with(
                    $storedImage,
                    'http://'
                ) ||
                str_starts_with(
                    $storedImage,
                    'https://'
                )
            ) {
                $bannerImageUrl =
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | DigitalOcean paths
            |--------------------------------------------------------------------------
            */
            } elseif (
                str_starts_with(
                    $storedImage,
                    'advertisement/'
                ) ||
                str_starts_with(
                    $storedImage,
                    'icons/'
                )
            ) {
                $bannerImageUrl =
                    rtrim(
                        $digitalOceanBaseUrl,
                        '/'
                    ) .
                    '/' .
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | Old local path
            |--------------------------------------------------------------------------
            */
            } else {
                $bannerImageUrl =
                    asset($storedImage);
            }
        }
    @endphp

    @if($bannerImageUrl)

        <img src="{{ $bannerImageUrl }}"
             class="preview-td-img"
             alt="Banner Image"
             loading="lazy"
             onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='inline';
             ">

        <span class="text-danger"
              style="display:none;">

            Image not found

        </span>

    @else

        <span class="text-muted">
            Null
        </span>

    @endif
</td>
                                            <td><a href="{{ $banner->url }}" target="_blank" class="text-decoration-none">{{ $banner->url ?? 'N/A' }}</a></td> {{-- Display URL --}}
                                            <td class="center-action-cell">
                                                <button class="action-btn btn btn-danger delete-btn" data-id="{{ $banner->id }}"
                                                    data-bs-toggle="modal" data-bs-target="#Delete2Modal">
                                                    <i class="fa fa-trash"></i>
                                                </button>

                                                <button class="action-btn btn btn-primary edit-btn" data-id="{{ $banner->id }}"
                                                    data-url="{{ $banner->url }}" data-image="{{ asset($banner->image) }}"
                                                    data-bs-toggle="modal" data-bs-target="#EditModal">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">No avatars found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        ---

        <div class="modal fade zoom-in" id="Delete2Modal" tabindex="-1" aria-labelledby="deleteModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="p-3">
                                    <div class="text-center">
                                        <img class="mb-3" src="{{ asset('/assets') }}/images/icons/delete-icon.svg" alt="Delete Icon">
                                        <p class="my-4 are-you-sure">Confirm Deletion</p>
                                        <p class="text-muted my-2 are-you-sure-subtext">Are you sure you want to delete this avatar? This action cannot be undone.</p>
                                    </div>
                                    <form action="{{ route('delete_image') }}" method="POST">
                                        @csrf
                                    
                                        <input type="hidden" id="delete_id" name="delete_id">
                                        <div class="d-flex align-items-center justify-content-center mt-5 mb-3"> {{-- Centered buttons --}}
                                            <button type="button" class="btn btn-light cancel-btn me-3"
                                                data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary yes-btn">
                                                <i class="fa-regular fa-circle-check me-2"></i>Yes, Delete
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        ---

        <div class="modal fade" id="EditModal" tabindex="-1" aria-labelledby="EditModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form action="{{ route('update_image') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                    
                        <input type="hidden" name="edit_id" id="edit_id">

                        <div class="modal-header">
                            <h5 class="modal-title" id="EditModalLabel">Edit Avatar</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <div class="form-group mb-3 text-center">
                                <label class="form-label">Current Image</label><br>
                                <img id="edit_preview_image" src="" class="img-fluid" style="max-height: 150px;"
                                    alt="Current Avatar Image">
                            </div>

                            <div class="form-group mb-3">
                                <label for="edit_image" class="form-label">Upload New Image (Optional)</label>
                                <input type="file" name="edit_image" class="form-control" id="edit_image" accept="image/*">
                                <div class="form-text">Leave blank to keep the current image.</div>
                                @error('edit_image')
                                    <div class="text-danger mt-2">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group mb-3">
                                <label for="edit_url" class="form-label">Link URL</label>
                                <input type="url" name="edit_url" id="edit_url" class="form-control"
                                    placeholder="https://example.com">
                                @error('edit_url')
                                    <div class="text-danger mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Update Avatar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('footer')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    {{-- DataTables JavaScript --}}
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script> {{-- Added Responsive JS --}}

    {{-- Optional: DataTables Buttons --}}
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable
            $('#data-table').DataTable({
                responsive: true, // Enable responsiveness
                "language": {
                    "emptyTable": "No avatars available in the history."
                }
            });

            // Delete button functionality
            document.querySelectorAll('.delete-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    document.getElementById('delete_id').value = id;
                });
            });

            // Edit button functionality
            document.querySelectorAll('.edit-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    const url = this.getAttribute('data-url');
                    const image = this.getAttribute('data-image');

                    document.getElementById('edit_id').value = id;
                    document.getElementById('edit_url').value = url;
                    document.getElementById('edit_preview_image').src = image;
                });
            });
        });
    </script>
@endsection