@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">Advertisement</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>Media</th>
                            <th>Status</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>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 --}}
    <script>
        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;
                // Check the media type
                if (media.media_type === 'image') {
                    // alert(media.media_type);
                    mediaList.push({
                        src: mediaSrc,
                        type: 'image', // Specify the media type
                        title: media.title // Set the title for images
                    });
                } else if (media.media_type === 'video') {
                    // For videos, use type: 'iframe' and provide the video URL
                    mediaList.push({
                        src: mediaSrc,
                        type: 'iframe', // Specify the media type as iframe
                        title: media.title, // Set the 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
                },
                type: 'image' // Default type (images)
            });
        }
        $(document).ready(function() {
            $('#myTablea').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('ads.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": "media"
                    },
                    {
                        "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"));
        }



        // popup method detail end
        // popup method

        function populateModal(adId) {
            var form = document.getElementById('my-form');
            var reasonInput = document.getElementById('message-text').value;

            var modal = new bootstrap.Modal(document.getElementById('responsive-modal'));
            $('#adId').val(adId);
            // modal.show();
        }

        function swalll(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure want to Reject this Ad?",
                    // text: "Pending this Ad !",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + 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 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);
        }
    </script>
@endsection