@extends('user.app.layout')

@section('content')
    <style>
        .swal-custom-title {
            font-weight: bold;
            font-size: 1.25rem;
        }

        .swal-accept-button {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
            color: #fff !important;
        }

        .swal-reject-button {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: #fff !important;
        }
    </style>
    <div class="main-content">
        <section class="table-section">
            <div class="table-section-color">
                <div class="table-button">
                    <div class="row justify-content-end">

                        <div class="col-lg-auto col-auto my-auto">
                            <h4>Audience</h4>
                        </div>
                        <div class="col-lg-auto col-auto text-end ms-auto my-auto">
                            <div class="Pending_group">
                                <p>Pending Request</p>
                                <label class="switch">
                                    <input type="checkbox" id="pendingList">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-auto col-auto text-end">
                            <div class="fillter_group">
                                <select class="form-control js-example-basic-single" id="group_filter">
                                    <option value="">Group Filter</option>
                                    <option value="none">None</option>
                                    @foreach ($groups as $group)
                                        <option value="{{ Crypt::encrypt($group->id) }}">{{ $group->group_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-auto col-auto text-end">
                            <div class="fillter_group">
                                <select class="form-control js-example-basic-single" id="veification_filter">
                                    <option value="" selected="selected">Verification Status</option>
                                    <option value="completed">Completed</option>
                                    <option value="failed">Failed</option>
                                    <option value="pending">Pending</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-auto col-auto text-end">
                            <div class="fillter_group">
                                <select class="form-control js-example-basic-single" id="type_filter">
                                    <option value="">Select Type</option>
                                    <option value="self">Self</option>
                                    <option value="admin">Admin</option>
                                </select>
                            </div>
                        </div>
                        {{-- <div class="col-lg-auto col-auto">
                            <a class="btn btn-blue-button" data-bs-toggle="modal" data-bs-target="#import_audience"><img
                                    src="../assets/images/import.png" width="18px" class="me-3">Import
                                Audience</a>
                        </div> --}}
                        <div class="col-lg-auto col-auto">
                            <button class="btn btn-blue-button" id="copyLinkButton">
                                <img src="../assets/images/link.png" width="20px" class="me-0">
                            </button>
                        </div>

                        <input type="hidden" id="generatedLink"
                            value="{{ route('addNewContactUser', ['id' => Crypt::encrypt(Auth::user()->id)]) }}">

                        <div class="col-lg-auto col-auto">
                            <a class="btn btn-blue-button" href="{{ route('addNewContact') }}"><img
                                    src="../assets/images/plus.png" alt="plus" class="me-3">Add New Audience</a>
                        </div>
                    </div>
                </div>
                <table id="table_1" class="datatable_ct table table-striped mb-2 pb-1 mt-2 text-center"
                    style="width:100%">

                    <thead>
                        <tr>
                            <th scope="col" class="text-center">Sr No</th>
                            <th scope="col" class="text-center">Name</th>
                            <th scope="col" class="text-center">Image</th>
                            <th scope="col" class="text-center">Email</th>
                            <th scope="col" class="text-center">Mobile Number</th>
                            <th scope="col" class="text-center">Whatsapp No.</th>
                            <th scope="col" class="text-center">Group Name</th>
                            <th scope="col" class="text-center">Verification Status</th>
                            <th scope="col" class="text-center">Active / Inactive</th>
                            <th scope="col" class="text-center">Actions</th>

                        </tr>
                    </thead>
                    <tbody>
                        {{-- <tr class="table_p">
                            <td>01</td>
                            <td>Contact Name 1</td>
                            <td>
                                <a href="./../assets/images/poster.png" class="image_view">
                                    <img src="./../assets/images/poster.png" alt="image" class="img_width">
                                </a>
                            </td>
                            <td>abc@gmail.com</td>
                            <td>9858784255</td>
                            <td>9858784255</td>
                            <td>Group Name </td>
                            <td>Tyep 1</td>
                            <td><span class="table_span table-span1"><img
                                        src="../assets/images/complete.svg">Completed</span></td>
                            <td><label class="switch">
                                    <input type="checkbox" checked="">
                                    <span class="slider round"></span>
                                </label></td>
                            <td>

                                <div class="d-flex justify-content-center">
                                    <a href="addcontact.php" class="btn edit_btn"><img src="../assets/images/b.png"
                                            alt="image" class="me-2"> Edit</a>

                                    <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                        data-bs-target="#addresourcepopup"><img src="../assets/images/c.png" alt="image"
                                            class="me-2"> View</button>
                                </div>
                        </tr>
                        <tr class="table_p">
                            <td>01</td>
                            <td>Contact Name 1</td>
                            <td>
                                <a href="./../assets/images/poster.png" class="image_view">
                                    <img src="./../assets/images/poster.png" alt="image" class="img_width">
                                </a>
                            </td>
                            <td>abc@gmail.com</td>
                            <td>9858784255</td>
                            <td>9858784255</td>
                            <td>Group Name </td>
                            <td>Tyep 1</td>
                            <td>
                                <span class="table_span table-span3" data-bs-toggle="modal"
                                    data-bs-target="#addpending"><img
                                        src="../assets/images/Group 27628.svg">Pending</span>
                            </td>
                            <td><label class="switch">
                                    <input type="checkbox" checked="">
                                    <span class="slider round"></span>
                                </label></td>
                            <td>

                                <div class="d-flex justify-content-center">
                                    <a href="addcontact.php" class="btn edit_btn"><img src="../assets/images/b.png"
                                            alt="image" class="me-2"> Edit</a>
                                    <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                        data-bs-target="#addresourcepopup"><img src="../assets/images/c.png"
                                            alt="image" class="me-2"> View</button>
                                </div>
                        </tr> --}}

                    </tbody>
                </table>
            </div>
    </div>
    <div class="modal fade addresource-modal" id="addresourcepopup" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-width">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="audience_head"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="new-resorces row">
                        <div class="col-sm-12 col-lg-12 col-md-12">
                            <div class="resorces-leftbox file-upload">
                                <img id="audience_logo_view" src="../assets/images/profile1.png" alt="image" style="width: 70px;">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="first_name_view">First Name</label>
                                            <input type="text" id="first_name_view" disabled class="form-control"
                                                placeholder="Rakesh">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="last_name_view">Last Name</label>
                                            <input type="text" id="last_name_view" disabled class="form-control"
                                                placeholder="Mehan">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="email_view">Email</label>
                                            <input type="email" id="email_view" disabled class="form-control"
                                                placeholder="rakeshmehan123@gmail.com">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="mobile_number_view">Mobile Number</label>
                                            <input type="tel" id="mobile_number_view" disabled class="form-control"
                                                placeholder="9858784255">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="whatsapp_number_view">Whatsapp Number</label>
                                            <input type="text" id="whatsapp_number_view" disabled class="form-control"
                                                placeholder="xyz">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="business_name_view">Business Name</label>
                                            <input type="text" id="business_name_view" disabled class="form-control"
                                                placeholder="xyz">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="inputEmail">Business Logo</label>
                                            <div class="form-control-img">
                                                <img id="business_logo_view" src="../assets/images/business.png" style="width: 70px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="business_address_view">Business Address</label>
                                            <input type="text" id="business_address_view" disabled
                                                class="form-control" placeholder="">
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="state_view">State</label>
                                            <input type="text" id="state_view" disabled class="form-control"
                                                placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="city_view">City</label>
                                            <input type="text" id="city_view" disabled class="form-control"
                                                placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="pincode_view">Pincode</label>
                                            <input type="email" id="pincode_view" disabled class="form-control"
                                                placeholder="320008">
                                        </div>
                                    </div>
                                </div>

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

    <div class="modal fade" id="addpending" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Rakesh Mehan's Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="reject-resorces row">
                        <div class="col-sm-12 col-lg-12 col-md-12">
                            <p>You can either approve or reject requests directly from here</p>
                            <div class="text-center">
                                <button type="button" class="btn btn-success"><i class="fa-solid fa-check me-2"></i>
                                    Approve</button>
                                <button type="button" class="btn btn-danger"><i
                                        class="fa-solid fa-xmark me-2"></i>Reject</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="import_audience" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Import Audience</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="new-resorces row">
                        <div class="col-sm-12 col-lg-12 col-md-12">
                            <div class="resorces-leftbox file-upload">
                                <div class="row">
                                    <div class="col-md-6 col-lg-6 col-12 my-auto">
                                        <h6>Upload Data</h6>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-12 text-end">
                                        <button class="btn excel_btn"><img src="./../assets/images/excel_green.png">
                                            Download Demo Excel</button>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <!-- <label for="inputEmail">Please Select Media Type</label> -->
                                            <div class="file image-upload-wrap">
                                                <div class="file__input" id="file__input">
                                                    <input class="file__input--file file-upload-input" id="customFile"
                                                        type="file" multiple="multiple" name="files[]">
                                                    <div class="drag-text">
                                                        <img src="../assets/images/Group 27535 (1).svg" alt="img">
                                                        <p>Drop Files Here Or Browse Files</p>
                                                    </div>
                                                    <!-- <a class="btn file__input--label" href="javascript:void(0)"><img src="image/upload.png" alt="img">Upload File</a> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12 col-sm-12 text-center pt-3">
                                        <a class="btn btn-blue-button">Save</a>
                                    </div>
                                </div>
                                <table id="" class="datatable_ct datatable_modal table table-striped w-100">
                                    <thead>
                                        <tr>
                                            <th>Sr No</th>
                                            <th>Time</th>
                                            <th>Insert Count</th>
                                            <th>Update Count</th>
                                            <th>Error Count</th>
                                            <th>Total Count</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>13</td>
                                            <td><span class="table_span"><img src="../assets/images/Group 27627.svg">In
                                                    Process</span></td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>13</td>
                                            <td><span class="table_span table-span1"><img
                                                        src="../assets/images/complete.svg">Completed</span></td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>05</td>
                                            <td>13</td>
                                            <td><span class="table_span table-span3"><img
                                                        src="../assets/images/Group 27628.svg">Pending</span></td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.getElementById('copyLinkButton').addEventListener('click', function() {
            const linkToCopy = document.getElementById('generatedLink').value;

            const tempInput = document.createElement('input');
            tempInput.value = linkToCopy;

            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);
            $.notify('Link copied to clipboard.', "success");
        });
    </script>

    <script>
        function changeStatus(id) {
            $.ajax({
                url: "{{ route('audienceStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        filterData()
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function acceptAudience(id) {
            Swal.fire({
                title: 'Confirm Acceptance',
                text: "Are you sure you want to accept this audience?",
                showCancelButton: true,
                confirmButtonColor: '#28a745', // Green for accepting
                cancelButtonColor: '#6c757d', // Grey for cancel
                confirmButtonText: 'Yes, Accept',
                cancelButtonText: 'Cancel',
                customClass: {
                    title: 'swal-custom-title',
                    confirmButton: 'swal-accept-button'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('acceptAudience') }}",
                        type: 'POST',
                        data: {
                            'id': id,
                            '_token': "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response, textStatus, xhr) {
                            if (response.status == 1) {
                                filterData();
                                $.notify(response.msg, "success");
                            } else {
                                $.notify(response.msg, "error");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                    });
                }
            });
        }

        function failAudience(id) {
            Swal.fire({
                title: 'Confirm Rejection',
                text: "Are you sure you want to reject this audience?",
                showCancelButton: true,
                confirmButtonColor: '#dc3545', // Red for rejecting
                cancelButtonColor: '#6c757d', // Grey for cancel
                confirmButtonText: 'Yes, Reject',
                cancelButtonText: 'Cancel',
                customClass: {
                    title: 'swal-custom-title',
                    confirmButton: 'swal-reject-button'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('failAudience') }}",
                        type: 'POST',
                        data: {
                            'id': id,
                            '_token': "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response, textStatus, xhr) {
                            if (response.status == 1) {
                                filterData();
                                $.notify(response.msg, "success");
                            } else {
                                $.notify(response.msg, "error");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                    });
                }
            });
        }



        function viewAudienceDetails(id) {
            $.ajax({
                url: "{{ route('audienceViewDetails') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#first_name_view').val(response.data.first_name);
                        $('#last_name_view').val(response.data.last_name);
                        $('#email_view').val(response.data.email);
                        $('#mobile_number_view').val(response.data.mobile_number);
                        $('#whatsapp_number_view').val(response.data.whatsapp_number);
                        $('#business_name_view').val(response.data.business_name);
                        $('#business_address_view').val(response.data.business_address);
                        $('#state_view').val(response.state);
                        $('#city_view').val(response.city);
                        $('#pincode_view').val(response.data.pincode);
                        $('#audience_head').html(response.data.first_name + ' ' + response.data.last_name);

                        var businessLogo = response.data.business_logo_file ?
                            "{{ asset('storage/Images/temp/') }}/" + response.data.business_logo_file :
                            "../assets/images/business.png";
                        $('#business_logo_view').attr('src',
                            businessLogo);

                        var audienceLogo = response.data.audience_photo_file ?
                            "{{ asset('storage/Images/temp/') }}/" + response.data.audience_photo_file :
                            "../assets/images/business.png";
                        $('#audience_logo_view').attr('src',
                            audienceLogo);
                        $('#addresourcepopup').modal('show');
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }




        $('#group_filter, #veification_filter, #type_filter, #pendingList').on('change', function() {
            filterData();
        });


        function filterData() {
            var table = $('#table_1').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search",
                    emptyTable: "No records available", // Message when no data exists
                    zeroRecords: "No matching records found", // Message when no search results are found
                    processing: "Loading, please wait...", // Message during data loading
                },
                ajax: {
                    url: "{{ route('audiancePaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"; // Properly include CSRF token
                        d.pendingList = $('#pendingList').is(':checked') ? 1 : 0;
                        d.group_filter = $('#group_filter').val();
                        d.verification_filter = $('#veification_filter').val();
                        d.type_filter = $('#type_filter').val();
                    },
                },
                drawCallback: function(settings) {
                    var api = this.api();

                    // Handle empty data explicitly
                    if (api.rows({
                            page: 'current'
                        }).data().length === 0) {
                        $("#table_1 tbody").html(`
                    <tr>
                        <td colspan="10" class="text-center">${api.settings()[0].oLanguage.emptyTable}</td>
                    </tr>
                `);
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'audience_photo_file',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'email',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'mobile_number',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'whatsapp_number',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'group_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'verification_status',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'audiences_status',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: true
                    },
                ],
                columnDefs: [{
                    targets: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                    render: function(data, type, full) {
                        return data != null ? data : '-'; // Return "-" if data is null
                    },
                }, ],
            });
        }


        $(document).ready(function() {
            filterData();
        });
    </script>
@endsection