@extends('backend.template')
@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Registrations List</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Jobs</a></li>
                    <li class="breadcrumb-item active">Registrations List</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="applicationList">
            <div class="card-header  border-0">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title mb-3 mb-md-0 flex-grow-1">Registrations List</h5>
                    <?php if (!empty($data->registration_id)) : ?>
                        <div class="flex-shrink-0">
                            <div class="d-flex gap-1 flex-wrap">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smsModal">
                                    <i class="ri-add-line align-bottom me-1"></i> Bulk SMS
                                </button>
                                <a href="{{ route('generate-pdf', ['ids' => implode(',', $data->pluck('registration_id')->toArray())]) }}" class="btn btn-success add-btn"><i class="ri-add-line align-bottom me-1"></i> Generate PDF</a>
                                <a href="{{ route('registrations.create') }}" class="btn btn-success add-btn"><i class="ri-add-line align-bottom me-1"></i> Create New Registration</a>

                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            <div class="modal fade" id="smsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form name="sendBulkSMS" method="POST" action="{{route('registrations.sms.send')}}">
                        @csrf


                        <input type="hidden" name="mobile" value="<?php $mobileNumbers = [];
                                                                    foreach ($data as $item) {
                                                                        if (isset($item->mobile)) {
                                                                            $mobileNumbers[] = $item->mobile;
                                                                        }
                                                                    }
                                                                    $csvString = implode(',', $mobileNumbers);
                                                                    echo $csvString;

                                                                    ?>">

                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Send Bulk SMS</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <!-- Textbox for SMS content -->
                                <div class="mb-3">
                                    <label for="smsContent" class="form-label">SMS Content:</label>
                                    <textarea name="message" class="form-control" id="smsContent" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <!-- Send button -->
                                <button type="submit" class="btn btn-primary">Send</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form method="POST" action="" id="filterForm">
                    @csrf
                    <div class="row g-3">
                        <div class="col-xxl-2 col-sm-6">
                            <div class="search-box">

                                <input type="text" class="form-control search datepicker" name="from" id="from" value="{{isset($request['from'])?$request['from']:''}}" placeholder="Select From Date">
                                <i class="ri-calendar-event-line search-icon"></i>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-6">
                            <div class="search-box">
                                <input type="text" class="form-control datepicker" name="to" id="to" value="{{isset($request['to'])?$request['to']:''}}" placeholder="Select To Date">
                                <i class="ri-calendar-event-line search-icon"></i>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-4">
                            {{createCustomSelect("tbl_campaigns","title","campaign_id",isset($request['campaign_id'])?$request['campaign_id']:null,"","campaign_id","select2 js-example-basic-single","status=1")}}
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-4">
                            {{createCustomSelect("tbl_sources","title","source_id",isset($request['source_id'])?$request['source_id']:null,"","source_id","select2 js-example-basic-single","status=1")}}
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-4">
                            {{createCustomSelect("tbl_countries","title","country_id",isset($request['country_id'])?$request['country_id']:null,"","country_id","select2","status=1")}}
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-4">
                            {{createCustomSelect("tbl_leadcategories","title","leadcategory_id",isset($request['leadcategory_id'])?$request['leadcategory_id']:null,"","leadcategory_id","select2","status=1", "Placeholder='lead category'")}}
                        </div>
                        <!--end col-->

                        <div class="col-xxl-1 col-sm-4">
                            <div>
                                <button class="btn btn-info w-100" type="Submit">
                                    <!-- <i class="ri-equalizer-fill me-1 align-bottom "></i> -->
                                    Filters
                                </button>
                            </div>
                        </div>
                        <div class="col-xxl-1 col-sm-4">
                            <div>
                                <button class="btn btn-danger w-100" type="Reset" onclick="resetForm()">
                                    <!-- <i class="ri-recycle-line me-1 align-bottom"></i> -->
                                    Reset
                                </button>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="card">
    <div class="card-header">
        <h4 class="card-title mb-0">
            <?php if (isset($title)) : ?>
                {{ label($title) }}
            <?php endif; ?>
        </h4>
    </div>
    <div class="card-body">
        <div class="table-responsive ">
            <table class="table dataTable" id="tbl_registrations" data-url="{{ route('registrations.sort') }}">
                <thead class="table-light">
                    <tr>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{label("Sn.")}}</span></th>
                        <!-- <th class="tb-col text-uppercase"><span class="overline-title">{{ label("campaigns") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("sources") }}</span></th> -->

                        <!-- <th class="tb-col text-uppercase"><span class="overline-title">{{ label("lead categories") }}</span></th> -->
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("name") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("email") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("mobile") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("qualification") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("Score") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("countries") }}</span></th>
                        <th class="tb-col text-uppercase"><span class="overline-title">{{ label("Form") }}</span></th>

                        <!-- <th class="tb-col text-uppercase"><span class="overline-title">{{ label("agents") }}</span></th> -->
                        <th class="tb-col text-uppercase" data-sortable="false"><span class="overline-title">{{ label("Action") }}</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $i = 1;
                    @endphp
                    @foreach ($data as $item)
                    <tr data-id="{{$item->registration_id}}" data-display_order="{{$item->display_order}}" class="draggable-row <?php echo ($item->status == 0) ? "bg-light bg-danger" : ""; ?>">
                        <td class="tb-col">{{ $i++ }}</td>
                        <!-- <td class="tb-col">
                            {!! getFieldData("tbl_campaigns", "title", "campaign_id", $item->campaigns_id) !!}
                        </td>
                        <td class="tb-col">
                            {!! getFieldData("tbl_sources", "title", "source_id", $item->sources_id) !!}
                        </td> -->

                        <!-- 
                        <td class="tb-col">
                            {!! getFieldData("tbl_leadcategories", "title", "leadcategory_id", $item->leadcategories_id) !!}
                        </td> -->

                        <td class="tb-col"><span class="edit-trigger text-info">{{ $item->name }}</span></td>

                        <td class="tb-col">{{ $item->email }}</td>

                        <td class="tb-col">{{ $item->mobile }}</td>
                        <td class="tb-col">{{ $item->highest_qualification }}</td>
                        <td class="tb-col">{{ $item->highest_grade }}</td>
                        <!-- <td class="tb-col">
                            {!! getFieldData("tbl_agents", "title", "agent_id", $item->agents_id) !!}
                        </td> -->
                        <td class="tb-col">

                            {!! getFieldData("tbl_countries", "title", "country_id", $item->countries_id) !!}
                        </td>
                        <td><a href="{{route('pdf.generate')}}?id={{$item->registration_id}}" class="">{{label("Print Form")}}</a></td>
                        <td class="tb-col">



                            <div class="dropdown d-inline-block">


                                <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ri-more-fill align-middle"></i>
                                </button>



                                <ul class="dropdown-menu dropdown-menu-end">

                                    <li><a href="{{route('pdf.generate')}}?id={{$item->registration_id}}" class="dropdown-item "><i class="ri-file-pdf align-bottom me-2 text-muted"></i> {{label("Download")}}</a></li>
                                    <li><a href="{{route('registrations.edit.ajax',[$item->registration_id])}}" class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> {{label("Edit")}}</a></li>
                                    <li>
                                        <a href="{{route('registrations.toggle',[$item->registration_id])}}" class="dropdown-item toggle-item-btn" onclick="confirmToggle(this.href)">
                                            <i class="ri-article-fill align-bottom me-2 text-muted"></i> {{ ($item->status==1)?label('Unpublish'):label('Publish') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{route('registrations.destroy',[$item->registration_id])}}" class="dropdown-item remove-item-btn" onclick="confirmDelete(this.href)">
                                            <i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> {{ label('Delete') }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@push("css")

@endpush

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="editModalLabel">Edit Registration</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-0">

                <iframe id="editFrame" src="" width="100%" height="550px"></iframe>

            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div> -->
        </div>
    </div>
</div>




@endsection
@push("css")
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.4.0/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

@endpush
@push("js")


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Load pdfMake library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>

<!-- Load vfs_fonts.js after pdfMake -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>



<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/rowreorder/1.4.0/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function(e) {

        var mytable = $(".dataTable").DataTable({
            ordering: true,
            rowReorder: {
                //selector: 'tr'
            },
            dom: 'Bfrtip', // Specify the buttons container
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print' // Add export buttons here
            ]
        });
        var isRowReorderComplete = false;
        mytable.on('row-reorder', function(e, diff, edit) {
            isRowReorderComplete = true;
        });
        mytable.on('draw', function() {
            if (isRowReorderComplete) {
                var url = mytable.table().node().getAttribute('data-url');
                var ids = mytable.rows().nodes().map(function(node) {
                    return $(node).data('id');
                }).toArray();
                console.log(ids);
                $.ajax({
                    url: url,
                    type: "POST",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id_order: ids
                    },
                    success: function(response) {
                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
                isRowReorderComplete = false;
            }
        });
    });

    $('.change-alias-badge').on('click', function() {
        var aliasWrapper = $(this).prev('.alias-wrapper');
        var aliasSpan = aliasWrapper.find('.alias');
        var aliasInput = aliasWrapper.find('.alias-input');
        var isEditing = $(this).hasClass('editing');
        aliasInput.toggleClass("d-none");
        if (isEditing) {
            // Update alias text and switch to non-editing state
            var newAlias = aliasInput.val();
            aliasSpan.text(newAlias);
            aliasSpan.show();
            aliasInput.hide();
            $(this).removeClass('editing').text('Change Alias');
            var articleId = $(aliasWrapper).data('id');
            var ajaxUrl = "{{ route('registrations.updatealias') }}";
            var data = {
                articleId: articleId,
                newAlias: newAlias
            };
            $.ajax({
                url: ajaxUrl,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: data,
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        } else {
            // Switch to editing state
            aliasSpan.hide();
            aliasInput.show().focus();
            $(this).addClass('editing').text('Save Alias');
        }
    });

    function confirmDelete(url) {
        event.preventDefault();
        Swal.fire({
            title: 'Are you sure?',
            text: 'You will not be able to recover this item!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Delete',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire('Deleted!', 'The item has been deleted.', 'success');
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        Swal.fire('Error!', 'An error occurred while deleting the item.', 'error');
                    }
                });
            }
        });
    }

    function confirmToggle(url) {
        event.preventDefault();
        Swal.fire({
            title: 'Are you sure?',
            text: 'Publish Status of Item will be changed!! if Unpublished, links will be dead!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Proceed',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire('Updated!', 'Publishing Status has been updated.', 'success');
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        Swal.fire('Error!', 'An error occurred.', 'error');
                    }
                });
            }
        });
    }
</script>
<script>
    function resetForm() {
        document.getElementById("filterForm").reset();
        window.location = "{{ Route::current()->uri() }}";
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let editTriggers = document.querySelectorAll(".edit-trigger");

        editTriggers.forEach(function(trigger) {
            trigger.addEventListener("click", function() {
                let row = trigger.closest("tr");
                let editLink = row.querySelector(".edit-item-btn").getAttribute("href");
                let editFrame = document.getElementById("editFrame");

                // Set the iframe src to the edit link of the clicked row
                editFrame.src = editLink;

                // Show the modal
                let modal = new bootstrap.Modal(document.getElementById('editModal'));
                modal.show();
            });
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        let editTriggers = document.querySelectorAll(".edit-item-btn");

        editTriggers.forEach(function(trigger) {
            trigger.addEventListener("click", function() {
                // let row = trigger.closest("tr");
                // let editLink = row.querySelector(".edit-item-btn").getAttribute("href");
                let editLink = editTriggers.getAttribute("href");
                let editFrame = document.getElementById("editFrame");

                // Set the iframe src to the edit link of the clicked row
                editFrame.src = editLink;

                // Show the modal
                let modal = new bootstrap.Modal(document.getElementById('editModal'));
                modal.show();
            });
        });
    });
</script>
@endpush