@extends('admin.layouts.master')
@section('breadcrumb')
    <section class="content-header">
        <h1>Subscribe Store Webhooks</h1>
    </section>
@stop
@section('content')
    <div class="container-fluid my-style">
        <form action="{{ route('admin.settings.webhooks.subscribe') }}" method="POST" id="form-settings">
            @csrf
        <div class="wraper">
            <div class="content-div">
                <div class="form-group row">
                    <label for="status_id"
                           class="col-sm-2 col-form-label col-form-label-sm lable-style">Select Stores</label>
                    <div class="col-sm-10">
                        <select multiple="multiple" id="stores" name="stores[]" data-rule-required="true"
                                class="form-control form-control-sm">
                            <option value="all">All Stores</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="status_id"
                           class="col-sm-2 col-form-label col-form-label-sm lable-style">Execute</label>
                    <div class="col-sm-10">
                        <select id="execute" name="execute" data-rule-required="true"
                                class="form-control form-control-sm">
                            <option value="now">Now</option>
                            <option value="queue">In Queues</option>
                        </select>
                    </div>
                </div>
                <div class="sub-btn">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
        </form>
    </div>
    <br>
    <section class="content-header">
        <h1><strong>Subscribed Webhooks</strong></h1>
    </section>
    <br>
    <div class="form-group row">
        <label for="status_id"
               class="col-sm-2 col-form-label col-form-label-sm lable-style">Select Stores</label>
        <div class="col-sm-10">
            <select id="subscribed_stores" name="stores[]" data-rule-required="true"
                    class="form-control form-control-sm">
            </select>
        </div>
    </div>
    <table id="webhookTable" class="table table-bordered mt-3">
        <thead>
        <tr>
            <th>Webhook Topic</th>
            <th>Callback URL</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody id="webhook-list">
        </tbody>
    </table>
@stop
@section('last_scripts')
    <script>
     oric_Validation_application("form-settings");
        $('#stores').select2({
            placeholder: "Select Stores",
            ajax: {
                url: "{{ route('stores_select2_format') }}",
                minimumInputLength: 1,
                cache: true,
                data: function (params) {
                    var query = {
                        search: params.term || '',
                        page: params.page || 1
                    }
                    return query;
                }
            }
        });

     $('#stores').on('change', function (e) {
         var selectedValues = $(this).val();
         if (selectedValues && selectedValues.includes('all')) {
             // Perform actions when "All Stores" is selected
             $('#execute').val('queue').trigger('change').prop('readonly', true).css('pointer-events', 'none');


         } else {
             $('#execute').val('').trigger('change').prop('readonly', false).css('pointer-events', 'auto');
         }});

     $('#subscribed_stores').select2({
         placeholder: "Select Store",
         ajax: {
             url: "{{ route('stores_select2_format') }}",
             minimumInputLength: 1,
             cache: true,
             data: function (params) {
                 return {
                     search: params.term || '',
                     page: params.page || 1
                 };
             },
             processResults: function (data) {
                 const filtered = data.results.filter(item => item.id !== 'all');

                 return {
                     results: filtered,
                     pagination: {
                         more: data.pagination.more
                     }
                 };
             }
         }
     });

     $('#subscribed_stores').on('change', function () {
         html='';
         const selectedStoreId = $(this).val();
         if (selectedStoreId && selectedStoreId !== 'all') {
             $.ajax({
                 url: "{{ route('get_subscribed_webhooks') }}",
                 method: 'POST',
                 data: {
                     _token: "{{ csrf_token() }}",
                     store_id: selectedStoreId
                 },
                 success: function (response) {
                     let tbody = $('#webhook-list');
                     tbody.empty();
                     tbody.html(html);
                     if ($.fn.DataTable.isDataTable('#webhookTable')) {
                         $('#webhookTable').DataTable().destroy();
                     }
                     response.results.forEach(function (webhook) {
                         const isAppUninstalled = webhook.topic === 'app/uninstalled';
                         const removeBtn = isAppUninstalled ? '' : `
                                <button class="btn btn-danger btn-sm remove-webhook"
                                    data-id="${webhook.id}"
                                    data-store="${selectedStoreId}"
                                    data-topic="${webhook.topic}">
                                    Remove
                                </button>
                            `;
                         html += `
                                <tr>
                                    <td>${webhook.topic}</td>
                                    <td>${webhook.callbackUrl}</td>
                                    <td>${removeBtn}</td>
                                </tr>
                            `;
                     });
                     tbody.html(html);
                     $('#webhookTable').DataTable({
                         responsive: true,
                         pageLength: 10,
                         lengthChange: false,
                         ordering: true,
                         columnDefs: [
                             { orderable: false, targets: 2 }
                         ]
                     });
                 },
                 error: function (xhr) {
                     $('#webhooks-output').html('Error fetching webhooks.');
                 }
             });
         } else {
             $('#webhooks-output').html('');
         }
     });

     $(document).on('click', '.remove-webhook', function () {
         const webhookId = $(this).data('id');
         const storeId = $(this).data('store');
         const topic = $(this).data('topic');

         swal({
             title: "Are you sure?",
             text: `You are about to unsubscribe the "${topic}" webhook.`,
             icon: "warning",
             buttons: true,
             dangerMode: true,
             closeModal: true
         }).then((willDelete) => {
             if (willDelete) {
                 $.ajax({
                     url: "{{ route('remove_webhook') }}",
                     method: 'POST',
                     data: {
                         _token: "{{ csrf_token() }}",
                         webhook_id: webhookId,
                         store_id: storeId,
                         topic_name: topic,
                     },
                     success: function (res) {
                         swal("Success", res.message, "success");
                         $('#subscribed_stores').trigger('change');
                     },
                     error: function (xhr) {
                         let errorMsg = 'Something went wrong.';
                         if (xhr.responseJSON?.message) {
                             errorMsg = xhr.responseJSON.message;
                         }
                         swal("Error", errorMsg, "error");
                     }
                 });
             }
         });
     });

     $(document).ready(function () {
         $('#webhookTable').DataTable({
             responsive: true,
             pageLength: 10,
             lengthChange: false,
             ordering: true,
             columnDefs: [
                 { width: '15%', targets: 0 },
                 { width: '50%', targets: 1 },
                 { width: '20%', targets: 2, orderable: false }
             ],
             language: {
                 emptyTable: "Please select a store to view subscribed webhooks"
             }
         });
     });
    </script>
@stop