@extends('affiliate.layout.index')
@section('title', 'Muftaax | Restaurant Dashboard')
@section('custom-style')
    <style>
        .swiper-button-next {
            background: #00a1fe;
            margin-top: calc(10px - (var(--swiper-navigation-size)/ 2));
            right: var(--swiper-navigation-sides-offset, 5px);
        }

        .swiper-button-prev {
            background: #00a1fe;
            margin-top: calc(10px - (var(--swiper-navigation-size)/ 2));
            left: var(--swiper-navigation-sides-offset, 5px);
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">

@endsection
@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Generate Links</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Affiliate</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Generate Links</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div>
                    <button class="btn btn-sm btn-primary btn-wave waves-light waves-effect waves-light"
                        data-bs-toggle="modal" href="#generateLinkModal"><i
                            class="ri-add-line fw-medium align-middle me-1"></i> Generate Link</button>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="generateLinkTable" class="table text-nowrap">
                                    <thead>
                                        <tr>
                                            <th scope="col">#ID</th>
                                            {{-- <th scope="col">Redeem Code</th> --}}
                                            <th scope="col">Links</th>
                                            <th scope="col">Type</th>

                                            <th scope="col">Status</th>
                                            <th scope="col">Created At</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be populated by DataTables -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Generate Link Modal -->
    <div class="modal fade" id="generateLinkModal" tabindex="-1" aria-labelledby="generateLinkModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="generateLinkForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="generateLinkModalLabel">Generate Link</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="linkType" class="form-label">Select Type</label>
                            <select class="form-select" id="linkType" name="type" required>
                                <option value="" selected disabled>Select Type</option>
                                <option value="user">User</option>
                                <option value="driver">Driver</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="generateLinkBtn">Generate</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteLinkModal" tabindex="-1" aria-labelledby="deleteLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteLinkModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this link?
                    <input type="hidden" id="deleteLinkId" name="deleteLinkId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteLinkBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('custom-script')
    <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>

    <script>
        const notyf = new Notyf({
            duration: 3000,
            position: {
                x: 'right',
                y: 'top'
            },
            ripple: true,
            dismissible: true
        });

        $(document).ready(function() {
            // Initialize DataTable
            let table = $('#generateLinkTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: "{{ route('getGeneratedLinks') }}",
                columns: [{
                        data: null,
                        name: 'serial_number',
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'link',
                        name: 'link',
                        render: function(data) {
                            // return `<a href="${data}" class="text-primary" target="_blank">${data}</a>`;
                            // link is very big so manage it
                            return `<a href="${data}" class="text-primary" target="_blank">${data.substring(0, 50)}...</a>`;
                        }
                    },
                    // {
                    //     data: 'link',
                    //     name: 'copy_link',
                    //     render: function(data) {
                    //         return ``;
                    //     }
                    // },
                    {
                        data: 'link_type',
                        name: 'link_type',
                        render: function(data) {
                            return data === 'user' ?
                                '<span class="badge bg-warning">User</span>' :
                                '<span class="badge bg-primary">Driver</span>';
                        }
                    },
                    // {
                    //     data: 'redeem_code',
                    //     name: 'redeem_code'
                    // },
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data) {
                            return data === 'active' ?
                                '<span class="badge bg-danger">Active</span>' :
                                '<span class="badge bg-success">Redeemed</span>';
                        }
                    },

                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data) {
                            return moment(data).format('DD-MM-YYYY');
                        }
                    },
                    // action
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                    }
                ]
            });

        });

        $(document).on('click', '.copy-link-btn', function() {
            const link = $(this).data('link');
            navigator.clipboard.writeText(link).then(() => {
                new Notyf({
                    duration: 3000,
                    position: {
                        x: 'right',
                        y: 'top'
                    },
                    ripple: true,
                    dismissible: true
                }).success('Link copied to clipboard successfully!');
            }).catch((err) => {
                console.error('Failed to copy link:', err);
                new Notyf({
                    duration: 3000,
                    position: {
                        x: 'right',
                        y: 'top'
                    },
                    ripple: true,
                    dismissible: true
                }).error('Failed to copy link.');
            });
        });

        // Handle Generate Link form submission
        $('#generateLinkForm').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);
            let submitButton = $(this).find('#generateLinkBtn');

            // Disable button and show processing text
            submitButton.prop('disabled', true).text('Processing...');

            $.ajax({
                url: "{{ route('generateAffiliateLink') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        setTimeout(function() {
                            notyf.success(response.message);
                        }, 500);

                        $('#generateLinkModal').modal('hide'); // Close the modal
                        $('#generateLinkForm')[0].reset(); // Reset form fields
                        $('#generateLinkTable').DataTable().ajax.reload();
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseJSON.errors);

                    if (xhr.responseJSON.errors) {
                        let notyf = new Notyf({
                            duration: 4000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        });

                        $.each(xhr.responseJSON.errors, function(key, value) {
                            console.log(`Field: ${key}, Error: ${value[0]}`);
                            notyf.error(value[0]);
                        });

                    } else {
                        notyf.error('An error occurred. Please try again later.');
                    }
                },
                complete: function() {
                    // Re-enable button and reset text
                    submitButton.prop('disabled', false).text('Generate');
                }
            });
        });

        let deleteLinkId;

        // Open Delete Modal and Set ID
        $(document).on('click', '.delete-link-btn', function() {
            deleteLinkId = $(this).data('id');
            console.log(deleteLinkId);

            $('#deleteLinkId').val(deleteLinkId);
        });

        // Confirm Deletion
        $('#confirmDeleteLinkBtn').on('click', function() {
            let linkId = $('#deleteLinkId').val();

            $.ajax({
                url: "{{ route('deleteAffiliateLink') }}", // Define this route in your web.php
                type: 'DELETE',
                data: {
                    _token: "{{ csrf_token() }}",
                    id: linkId
                },
                success: function(response) {
                    if (response.success) {
                        setTimeout(function() {
                            notyf.success(response.message);
                        }, 500);

                        $('#deleteLinkModal').modal('hide'); // Close the modal
                        $('#generateLinkTable').DataTable().ajax.reload(); // Reload the DataTable
                    }
                },
                error: function(xhr) {
                    notyf.error('An error occurred. Please try again later.');
                }
            });
        });
    </script>
@endsection