@extends('layouts.master')
@section('contain')
    <div class="row page-titles"
        style="box-shadow: 0px 0px 14px 3px #cfcfcf; background: linear-gradient(45deg, rgb(241, 234, 234), transparent);border: 1px solid #cdcdcd;">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Restricted Ads</h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    {{-- <li class="breadcrumb-item active">User Table</li> --}}
                </ol>
                {{-- <a href="{{ Route('annoucnment.swform') }}"><button type="button"
                        class="btn btn-info d-none d-lg-block m-l-15 text-white"><i class="fa fa-plus-circle"></i>Create
                        New</button></a> --}}
            </div>
        </div>
    </div>
    <style>
        table.dataTable tbody td {
            text-align: center;
        }
    </style>
    <div class="card" style="font-size: small;">
        <div class="card-body">
            {{-- <h6 class="card-subtitle">Data table example</h6> --}}
            <div class="table-responsive">
                <table id="myTablea" class="table table-striped border">
                    <thead>
                        <tr class="text-white" style="background-color: gray">
                            <th>S.No</th>
                            <th>Name</th>
                            <th>Title</th>
                            <th>Amount</th>
                            <th>Days</th>
                            <th>Likes</th>
                            <th>Comments</th>
                            <th>Url</th>
                            <th>Status</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th style="width:10%;">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- sample modal detail -->
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog " role="document">
            <div class="modal-content" style="background-color: darkgray;border-radius: 5%;">
                <div class="modal-header">
                    <h4 class="font-bold" id="exampleModalLabel1">Ad Detail
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="" class="table table-striped">
                            <thead>
                                <tr class="text-white" style="background-color: gray">
                                    <th>S.No</th>
                                    {{-- <th>Thumbnail</th> --}}
                                    <th>Reason</th>
                                    {{-- <th>Description</th> --}}
                                    {{-- <th>Media</th> --}}
                                    {{-- <th>Created</th> --}}
                                </tr>
                            </thead>
                            <tbody class="mydata">

                                <tr>
                                    <td>0</td>
                                    <td
                                        value="https://images.unsplash.com/photo-1604964432806-254d07c11f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8ZGV2ZWxvcGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=700&q=60">
                                        image</td>
                                    <td>null</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td
                                        value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4">
                                        video</td>
                                    <td>null</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {{-- <div class="modal-footer"> --}}
                <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal">Close</button>
                {{-- </div> --}}
            </div>
        </div>
    </div>
    <!-- /.modal detail end-->
    {{-- reason modal --}}
    <div id="responsive-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <!-- Modal content -->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="padding: 2%;">
                    <h4 class="font-bold">Enter Reason</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ Route('ad.status') }}" method="POST">
                    @csrf
                    @method('delete')
                    <div class="modal-body" style="padding: 14px;">
                        <div class="form-group">
                            <label for="message-text" class="form-label">Reason:</label>
                            <textarea required class="form-control" id="message-text" maxlength="255" name="reason"></textarea>
                            <input type="hidden" name="adId" id="adId">
                            <input type="hidden" name="status" value="0">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>

                        <button type="submit" class="btn btn-danger waves-effect waves-light text-white">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- reason modal end --}}
    <style>
        .mfp-title {
            position: absolute;
            top: auto;
            /* Adjust as needed */
            left: 0;
            color: red;
            /* Change color to ensure visibility */
            padding: 10px;
            background: white;
            /* Optional: background color for better readability */
            text-align: center;
            width: 100%;
        }

        img.mfp-img {
            width: 70%;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#myTablea').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('restrictedAds.list') }}",
                "columns": [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: false,
                        orderable: false
                    },
                    {
                        "data": "user.full_name"
                    },
                    {
                        "data": "title"
                    },
                    {
                        "data": "total_amount",
                        "render": function(data, type, row) {
                            return "$" + " " +
                                data; // Assuming data is already formatted as currency
                        }
                    },
                    {
                        "data": "days_number"
                    },
                    {
                        "data": "ad_likes_count"
                    },
                    {
                        "data": "ad_comments_count"
                    },
                    {
                        "data": "redirect_url"
                    },
                    {
                        "data": "is_active"
                    },
                    {
                        "data": "start_date"
                    },
                    {
                        "data": "end_date"
                    },
                    {
                        "data": "action"
                    }
                ]
            });
        });

        // popup method detail
        function setMsg(e) {
            let dataList = '';
            var s_no = 1;
            let mydata = $(e).attr("data-msg");
            let value = JSON.parse(mydata);
            if (mydata.length > 0) {
                // alert(value.thumbnail)
                if (value) {
                    let data = '<a href="{{ URL::asset(env('MEDIA_URL')) }}' + value.thumbnail +
                        '" target="_blank"><img width="50px" style ="height: 50px" class="img-circle" src="{{ URL::asset(env('MEDIA_URL')) }}' +
                        value.thumbnail +
                        '" /></a>';
                    let reason = value.reason ? value.reason : 'N/A';
                    // let description = value.description ? value.description : 'N/A';
                    dataList += '<tr><td>' + s_no++ + '</td><td>' + reason + '</td></tr><br>';
                }
            } else {
                dataList = '<tr><td colspan="4"> No Data </td></tr>';
            }
            console.log(dataList);
            $('.mydata').empty();
            $('.mydata').html(dataList);
            // $('#tdMdlMsg').html($(e).attr("data-msg"));
        }

        function swalll(routeUrl, title, confirmText, successMessage) {
            event.preventDefault();
            swal({
                title: title,
                text: confirmText,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    window.location.href = routeUrl;
                    swal(successMessage, {
                        icon: "success",
                    });
                } else {
                    // swal("Your imaginary file is safe!");
                }
            });
        }


        function swal2(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure want to Approve this Ad?",
                    // text: "Active this Ad !",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "approve-ad-" + id;
                        document.getElementById(formId).submit();
                        // swal("Poof! Your imaginary file has been deleted!", {
                        //     icon: "success",
                        // });
                    } else {
                        // swal("Your imaginary file is safe!");
                    }
                });


            // alert(id);
        }

        function openMediaModal(images) {
            var mediaUrl = "{{ env('MEDIA_URL') }}";
            var mediaList = [];

            // Iterate through each media item
            images.media.forEach(function(media) {
                var mediaSrc = mediaUrl + media.media;
                if (media.accuracy_detection === null || (Array.isArray(media.accuracy_detection) && media
                        .accuracy_detection.length === 0)) {
                    media.accuracy_detection = '<span class="text-success">Not Restrict</span>';
                } else {
                    if (media.media_type == 'video') {
                        accuracyDetectionArray = JSON.parse(media.accuracy_detection);
                        var reparsData = JSON.parse(accuracyDetectionArray);

                        var sum = reparsData.reduce(function(accumulator, item) {
                            return accumulator + (item.pornographyLikelihood || 0);
                        }, 0);
                        media.accuracy_detection = '<h4 class="text-warnig;">Detected inappropriate content ' +
                            sum +
                            ' times.</h4>'
                    } else {
                        accuracyDetectionArray = JSON.parse(media.accuracy_detection);
                        var reparsData = JSON.parse(accuracyDetectionArray);
                        let badgesHTML = Object.entries(reparsData).map(([key, value]) => {
                            return `
                            <span style="
                                    display: inline-block;
                                    margin: 0.2em;
                                "><strong style="color:black;">${key}:</strong> ${value} times</span>`;
                        }).join(' ');

                        media.accuracy_detection = '<h4 class="text-warnig;">Detected inappropriate content</h4> ' +
                            badgesHTML;
                    }

                };
                // Check the media type
                if (media.media_type === 'image') {
                    mediaList.push({
                        src: mediaSrc,
                        type: 'image', // Specify the media type
                        title: media.accuracy_detection
                    });
                } else if (media.media_type === 'video') {
                    mediaList.push({
                        src: mediaSrc,
                        type: 'iframe', // Specify the media type as iframe
                        title: media.accuracy_detection, // Set the hardcoded title for videos
                        iframe: {
                            patterns: {
                                youtube: {
                                    index: 'youtube.com/', // Check for YouTube videos
                                    id: 'v=',
                                    src: 'https://www.youtube.com/embed/%id%?autoplay=1' // YouTube embed URL
                                }
                            }
                        }
                    });
                }
            });

            // Initialize Magnific Popup
            $.magnificPopup.open({
                items: mediaList,
                gallery: {
                    enabled: true // Enable gallery mode if needed
                },
                iframe: {
                    markup: '<div class="mfp-iframe-scaler">' +
                        '<div class="mfp-close"></div>' +
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                        '<div class="mfp-title">Some caption</div>' +
                        '</div>'
                },
                type: 'image', // Default type (images)
                callbacks: {
                    buildControls: function() {
                        var self = this;
                        // Ensure there is a container for the title
                        if (self.wrap.find('.mfp-title').length === 0) {
                            self.wrap.find('.mfp-figure, .mfp-iframe').append(
                                '<div class="mfp-title">Title Placeholder</div>');
                        }
                    },
                }
            });
        }
    </script>
@endsection