@extends('user.app.layout')

@section('content')
    <div class="main-content">
        <section class="table-section">
            <div class="table-section-color">
                <div class="table-button">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6 my-auto">
                            <h4>Campaigns</h4>
                            <!-- <form>
                                                                                                                    <input class="input-elevated" type="text" placeholder="Search Template">
                                                                                                                  </form> -->
                        </div>
                        <div class="col-lg-8 col-sm-6 text-end">
                            <a class="btn btn-blue-button" href="javascript:void(0)" data-bs-toggle="modal"
                                data-bs-target="#addresourcepopup"><img src="../assets/images/plus.png" alt="plus"
                                    class="me-3">Create New
                                Campaign</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">Campaign Name</th>
                            <th scope="col" class="text-center">Total Audience</th>
                            <th scope="col" class="text-center">Delivered Count</th>
                            <th scope="col" class="text-center">Failed Count</th>
                            <th scope="col" class="text-center">Start Time</th>
                            <th scope="col" class="text-center">End Time</th>
                            <th scope="col" class="text-center">Status</th>
                            <th scope="col" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
    </div>
    </section>
    <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-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Create New Campaign</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">
                            {{ Form::open(['url' => '#', 'name' => 'campaignForm', 'id' => 'campaignForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                            <div class="resorces-leftbox file-upload">
                                <div class="form-group">
                                    <label for="campaign_name">Campaign Name <span class="text-danger"><i
                                                class="fa-solid fa-star-of-life" aria-hidden="true"></i></span></label>
                                    <input type="text" id="campaign_name" name="campaign_name" class="form-control"
                                        placeholder="Enter Campaign Name" required autofocus>
                                </div>
                                <div class="row">
                                    <div class="col-lg-8 col-md-8 col-12">
                                        <div class="form-group">
                                            <label for="cars">Select Template <span class="text-danger"><i
                                                        class="fa-solid fa-star-of-life"
                                                        aria-hidden="true"></i></span></label>

                                            <div class="fillter_group_no">
                                                <select class="form-control js-example-basic-single" id="selectTemplate"
                                                    name="selectTemplate" onchange="updateTemplatePreview(this.value)">
                                                    <option value="">Select Template</option>
                                                    @foreach ($templates as $template)
                                                        <option value="{{ Crypt::encrypt($template->id) }}">
                                                            {{ $template->template_name }}</option>
                                                    @endforeach
                                                </select>
                                                <label id="selectTemplate-error" class="error"
                                                    for="selectTemplate"></label>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-10 col-md-12">
                                                <div class="form-group">
                                                    <label for="inputEmail">Group <span class="text-danger"><i
                                                                class="fa-solid fa-star-of-life"
                                                                aria-hidden="true"></i></span></label>
                                                    <div class="fillter_group_no">
                                                        <select class="form-control js-example-basic-single"
                                                            onchange="getGroupCount(this.value)" id="selectGroup"
                                                            name="selectGroup">
                                                            <option value="">Group Filter</option>
                                                            @foreach ($groups as $group)
                                                                <option value="{{ Crypt::encrypt($group->id) }}">
                                                                    {{ $group->group_name }}</option>
                                                            @endforeach
                                                        </select>
                                                        <label id="selectGroup-error" class="error"
                                                            for="selectGroup"></label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-10 col-md-12">
                                                <div class="form-group">
                                                    <label for="AaudienceCount">Audience Count</label>
                                                    <input type="text" id="AaudienceCount" disabled
                                                        class="form-control" placeholder="Audience Count">
                                                </div>
                                            </div>
                                            <div class="col-lg-10 col-md-12">
                                                <div class="form-group">
                                                    <label for="remainingCredit">Remaining Credits</label>
                                                    <input type="text" id="remainingCredit" disabled
                                                        class="form-control" placeholder="Remaining Credits">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-12">
                                        <div class="form-group">
                                            <label for="templatePreview">Selected Template</label>
                                            <div class="poster_de">
                                                <!-- <i class="fa-solid fa-xmark"></i> -->
                                                <a id="templatePreview2" href="./../assets/images/poster.png"
                                                    class="image_view">
                                                    <img id="templatePreview" src="./../assets/images/poster.png"
                                                        alt="image" class="img_width">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" id="campaignFormSubmit" class="btn btn-submit">Submit</button>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
@endsection

@section('js')
    <script>
        function getGroupCount(group_id) {
            if (!group_id) {
                $('#AaudienceCount').val('');
                $('#remainingCredit').val('');
                return;
            }
            $.ajax({
                url: "{{ route('getGroupCount') }}",
                type: 'POST',
                data: {
                    id: group_id,
                    '_token': "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.status === 1) {
                        $('#AaudienceCount').val(response.data.audience_count);
                        $('#remainingCredit').val(response.data.remaining_credit);
                    } else {
                        $('#AaudienceCount').val('');
                        $('#remainingCredit').val('');
                        $.notify(response.message || "Failed to fetch group details.", "error");
                    }
                },
                error: function(jqXHR) {
                    console.error("Error fetching group details:", jqXHR);
                    $.notify("An error occurred while fetching the group details.", "error");
                }
            });
        }

        function exportCampaignData(url) {
            window.location.replace(url);
        }



        function updateTemplatePreview(templateId) {
            if (!templateId) {
                $('#templatePreview').attr('src', './../assets/images/poster.png');
                $('#templatePreview2').attr('href', './../assets/images/poster.png');
                return;
            }
            $.ajax({
                url: "{{ route('GetTemplateDetails') }}",
                type: 'POST',
                data: {
                    id: templateId,
                    '_token': "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.status === 1) {
                        const imageUrl = response.data.image_url;
                        $('#templatePreview').attr('src', imageUrl);
                        $('#templatePreview2').attr('href', imageUrl);
                    } else {
                        $('#templatePreview').attr('src', './../assets/images/poster.png');
                        $('#templatePreview2').attr('href', './../assets/images/poster.png');
                        $.notify(response.message || "Failed to fetch template details.", "error");
                    }
                },
                error: function(jqXHR) {
                    console.error("Error fetching template details:", jqXHR);
                    $.notify("An error occurred while fetching the template details.", "error");
                }
            });
        }

        $('#addresourcepopup').on('hidden.bs.modal', function() {
            $('#campaignForm')[0].reset();
            var validator = $('#campaignForm').validate();
            validator.resetForm();
            $('#selectTemplate').val(null).trigger('change');
            $('#selectGroup').val(null).trigger('change');
        });

        function changeStatus(id) {
            $.ajax({
                url: "{{ route('groupStatusAdmin') }}",
                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 editGroupDetails(id) {
            $.ajax({
                url: "{{ route('groupViewDetails') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#group_id').val(response.encrypted_group_id);
                        $('#group_name').val(response.data.group_name);
                        $('#add_new_group_head').html('Edit Group Details');
                        $('#groupFormSubmit').show();

                        $('#add_new_group').modal('show');
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }


        function filterData() {
            var i = 1;
            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('CampaignPaginate') }}",
                    data: function(d) {
                        _token: "{{ csrf_token() }}";
                    },
                },
                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: 'campaign_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'audience_count',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'delivery_count',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'fail_count',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'start_time',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'end_time',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'campaign_status',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: true
                    },
                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7, 8],
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],

            });

        }

        $(document).ready(function() {
            filterData();

            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return $.trim(value).length > 0;
            }, "This field cannot be just spaces.");

            $('#campaignForm').validate({
                ignore: ".ignore",
                rules: {
                    campaign_name: {
                        required: true,
                        maxlength: 50,
                        notOnlySpaces: true,
                    },
                    selectTemplate: {
                        required: true,
                    },
                    selectGroup: {
                        required: true,
                    },
                },
                messages: {},
                submitHandler: function(form) {
                    $("#campaignFormSubmit").attr('disabled', true);

                    var formData = new FormData($("#campaignForm")[0]);

                    $.ajax({
                        url: "{{ route('AddUpdateCampaign') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            $("#campaignFormSubmit").attr('disabled', false);
                            if (response.status === 'success') {
                                $.notify(response.message, "success");
                                filterData();
                                $('#addresourcepopup').modal('hide');
                            } else {
                                $.notify(response.message, "error");
                            }
                        },
                        error: function(jqXHR) {
                            $("#campaignFormSubmit").attr('disabled', false);
                            if (jqXHR.status === 422) {
                                const errors = jqXHR.responseJSON.errors;
                                for (const [field, messages] of Object.entries(errors)) {
                                    $.notify(messages[0],
                                        "error");
                                }
                            } else {
                                $.notify(jqXHR.responseJSON.message || "An error occurred.",
                                    "error");
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection