@extends('admin.layouts.master')
@section('breadcrumb')

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#conditions-section">API Version update</a></li>
        <li><a data-toggle="tab" href="#secondnotificzation">Channel Event Update</a></li>
        <li><a data-toggle="tab" href="#sec3">General Notifications</a></li>
    </ul>

@stop

@section('content')
    <div class="event-inner-content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light bordered">
                    <div class="tab-content">

                        <div class="portlet-body tab-pane fade in active" id="conditions-section">
                            <div class="table-scrollable" >
                                <section class="content-header" style="display: flex; align-items: center; justify-content: space-between">
                                    <h1>
                                        Notify Customers on Api version Update
                                    </h1>
                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                        Add
                                    </button>
                                </section>
                                <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info">
                                    <thead>
                                    <tr role="row">
                                    <tr>
                                        <th> #</th>
                                        <th class="all"> Title</th>
                                        <th class="all"> Description</th>
                                        <th> Status </th>
                                        <th class="all"> Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($history as $h)
                                        <tr>
                                            <td>{{ $h->id }}</td>
                                            <td>{{ $h->title }}</td>
                                            <td>{{ $h->description }}</td>
                                            <td>{{ $h->status }}</td>
                                            <td>
                                                <button type="button" class="btn btn-primary openEditModal" data-history-id="{{ $h->id }}" data-history-title="{{ $h->title }}" data-history-description="{{ $h->description }}" data-history-payload="{{ json_encode($h->payload) }}">Update</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>


                        <div id="secondnotificzation" class="tab-pane fade">
                            <section class="content-header" style="display: flex; align-items: center; justify-content: space-between">
                                <h1>
                                    Notify Customers on channel events Update
                                </h1>
                                <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
                                    Add
                                </button>

                            </section>
                            <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info">
                                <thead>
                                <tr role="row">
                                <tr >
                                    <th> #</th>
                                    <th class="all"> Title</th>
                                    <th class="all"> Description</th>
                                    <th> Status </th>
                                    <th class="all"> Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($channel_update as $cu)
                                    <tr>
                                        <td>{{ $cu->id }}</td>
                                        <td>{{ $cu->title }}</td>
                                        <td>{{ $cu->description }}</td>
                                        <td>{{ $cu->status }}</td>
                                        <td>
                                            <button type="button" class="btn btn-primary openEditModalChannelEvent" data-channel_update-id="{{ $cu->id }}" data-channel_update-title="{{ $cu->title }}" data-channel_update-description="{{ $cu->description }}" data-channel_update-payload="{{ json_encode($cu->payload) }}">Update</button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>


                        <div id="sec3" class="tab-pane fade">
                            <section class="content-header" style="display: flex; align-items: center; justify-content: space-between">
                                <h1>
                                    Notify Customers General Settings
                                </h1>
                                <!-- Button trigger modal -->
                                <button type="button" id='general_add' class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
                                    Add
                                </button>
                            </section>
                            <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info">
                                <thead>
                                <tr role="row">
                                    <th> #</th>
                                    <th class="all"> Title</th>
                                    <th class="all"> Description</th>
                                    <th> Status </th>
                                    <th class="all"> Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($general_update as $gu)
                                    <tr>
                                        <td>{{ $gu->id }}</td>
                                        <td>{{ $gu->title }}</td>
                                        <td>{{ $gu->description }}</td>
                                        <td>{{ $gu->status }}</td>
                                        <td>
                                            <button type="button" class="btn btn-primary openEditModalGeneralEvent" data-general-id="{{ $gu->id }}" data-general-title="{{ $gu->title }}" data-general-description="{{ $gu->description }}" data-general-payload="{{ json_encode($gu->payload) }}">Update</button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="notifcation_form" method="post" action="#">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Notify Customers on Api version Update</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-body">
                            <input type="hidden" class="form-group" name="id" id="id" value="0" />
                            <div class="form-group">
                                <label class="form-label input-label">Title</label>
                                <input type="text" class="form-control" name="title" id="title" />
                            </div>
                            <div class="form-group">
                                <label class="form-label input-label">Description</label>
                                <textarea name="description" id="description" cols="30" rows="10" class="form-control"></textarea>
                            </div>
                            <table class="customRow table" >
                                <tr id="changes_0">
                                    <td width="50">
                                        <label class="form-label select-label">Select Webhook</label>
                                        <select class="form-control webhook_event" name="webhook_events[]" id="webhook_events_id_0" data-id="0">
                                            <option value="" selected disabled>Select Webhook Name</option>
                                            @foreach($webhook_events as $webhook_event)
                                                <option value="{{ $webhook_event->id }}">{{ $webhook_event->event_name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td width="50">
                                        <label class="form-label select-label">Select Topics</label>
                                        <select class="form-control webhook_topic" multiple name="webhook_topics[]" id="webhook_topics_id_0">
                                            <option value="" selected disabled>Select Topics</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="form-group text-right">
                            <button class="btn" id="add-more">Add More</button>
                            <button class="btn btn-danger" id="remove-more">Remove</button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn" id="notify">Notify</button>
                        <button type="button" class="btn btn-secondary" id="notify_and_email">Notify and Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Modal 2--}}
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="notifcation_form" method="post" action="#">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Notify Customers on channel events Update</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-body-channel-event">
                            <input type="hidden" class="form-group" name="id_channel_event" id="id_channel_event" value="0" />
                            <div class="form-group">
                                <label class="form-label input-label">Title</label>
                                <input type="text" class="form-control" name="title_channel_event" id="title_channel_event" />
                            </div>
                            <div class="form-group">
                                <label class="form-label input-label">Description</label>
                                <textarea name="description_channel_event" id="description_channel_event" cols="30" rows="10" class="form-control"></textarea>
                            </div>
                            <table class="customRow table" >
                                <tr id="changes_ce0">
                                    <td width="50">
                                        <label class="form-label select-label">Select Channel Event</label>
                                        <select class="form-control channel_event" name="channel_events[]" id="channel_event_id_0" data-id="0">
                                            <option value="" selected disabled>Select Channel Events Name</option>
                                            @foreach($channel_events as $channel_event)
                                                <option value="{{ $channel_event->id }}">{{ $channel_event->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="form-group text-right">
                            <button class="btn" id="add-more-channel-event">Add More</button>
                            <button class="btn btn-danger" id="remove-more-channel-event">Remove</button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn" id="notify_channel_event">Notify</button>
                        <button type="button" class="btn btn-secondary" id="notify_and_email_channel_event">Notify and Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{--modal 3--}}
    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="notifcation_form_general">
                    <input type="hidden" name="action_type" id="action_type" value="">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Notify Customers on Channel Events Update</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-body">
                            <input type="hidden" class="form-group" name="id_general" id="id_general" value="0" />
                            <div class="form-group">
                                <label class="form-label input-label">Title</label>
                                <input type="text" class="form-control" name="title_general" id="title_general" />
                            </div>
                            <div class="form-group">
                                <label class="form-label input-label">Description</label>
                                <textarea name="description_general" id="description_general" cols="30" rows="10" class="form-control"></textarea>
                            </div>
                            <div>
                                <label>
                                    <input type="checkbox" name="plan_type[]" value="basic" class="plan-checkbox"> Basic Plan
                                </label><br>
                                <label>
                                    <input type="checkbox" name="plan_type[]" value="elite" class="plan-checkbox"> Elite Plan
                                </label><br>
                                <label>
                                    <input type="checkbox" name="plan_type[]" value="professional" class="plan-checkbox"> Professional Plan
                                </label><br>
                            </div>
                            <div class="form-group" style="width: 100%;">
                                <label for="stores" class="form-label input-label">Select Stores</label>
                                <select multiple="multiple" id="stores" name="stores[]" data-rule-required="true" class="form-control" style="width: 100%; box-sizing: border-box;">
                                    <option value="all">All Stores</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn" id="notify_general">Notify</button>
                        <button type="button" class="btn btn-secondary" id="notify_and_email_general">Notify and Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


@stop
@section('last_scripts')
    <script type="text/javascript">


        $(document).ready(function () {
            var add_div_count = 0;
            $("#add-more").click(function (event){
                event.preventDefault();
                add_div_count++;
                $(".form-body table").append('' +
                    '<tr id="changes_'+add_div_count+'">\
                            <td width="50"><label class="form-label select-label">Select Events</label>\
                        <select class="form-control webhook_event" name="webhook_events[]" id="webhook_events_id_'+add_div_count+'"  data-id="'+add_div_count+'">\
                            <option value="" selected disabled>Select Event Name</option>\
                            @foreach($webhook_events as $webhook_event)\
                                <option value="{{ $webhook_event->id }}">{{ $webhook_event->event_name }}</option>\
                            @endforeach\
                        </select></td>\
                        <td  width="50"><label class="form-label select-label">Select Topics</label>\
                        <select class="form-control webhook_topic" multiple name="webhook_topics[]" id="webhook_topics_id_'+add_div_count+'">\
                            <option value="" selected disabled>Select Topics</option>\
                        </select></td>\
                    </tr>');

                $('#webhook_events_id_'+add_div_count).change(function (event) {
                    event.preventDefault();
                    onWebhookEventChange(this);
                });
            });

            $("#remove-more").click(function (event){
                event.preventDefault();
                if(add_div_count > 0) {
                    $("#changes_" + add_div_count).remove();
                    add_div_count--;
                }
                else{
                    swal('Failed to remove', 'At least one event is required', 'warning');
                }
            });

            $("#add-more-channel-event").click(function (event){
                // console.log('here')
                event.preventDefault();
                add_div_count++;
                $(".form-body-channel-event table").append('' +
                    '<tr id="changes_ce0'+add_div_count+'">\
                            <td width="50"><label class="form-label select-label">Select Events</label>\
                        <select class="form-control channel_event" name="channel_events[]" id="channel_event_id_'+add_div_count+'"  data-id="'+add_div_count+'">\
                            <option value="" selected disabled>Select Channel Event Name</option>\
                            @foreach($channel_events as $channel_event)\
                                <option value="{{ $channel_event->id }}">{{ $channel_event->event_name }}</option>\
                            @endforeach\
                </select></td>');
                $('#channel_event_id_'+add_div_count).change(function (event) {
                    event.preventDefault();
                });
            });

            $("#remove-more-channel-event").click(function (event){
                event.preventDefault();
                if(add_div_count > 0) {
                    $("#changes_ce0" + add_div_count).remove();
                    add_div_count--;
                }
                else{
                    swal('Failed to remove', 'At least one event is required', 'warning');
                }
            });

            $(".webhook_event").change(function (event) {
                event.preventDefault();
                onWebhookEventChange(this);
            });

            $(".openEditModal").click(function (event) {
                event.preventDefault();
                $('#id').val($(this).data('history-id'));
                $('#title').val($(this).data('history-title'));
                $('#description').val($(this).data('history-description'));
                let payload = $(this).data('history-payload');
                for(let i = 0; i < payload.length; i++){
                    let event = payload[i];
                    $('#webhook_events_id_'+i).val(event.webhook_event_id).trigger('change');
                    event.webhook_topics_id.map(topic => {
                        setTimeout(function(){
                            $('#webhook_topics_id_'+i).val(topic).trigger('change');
                        }, 1000);
                    });
                    if(i + 1 != payload.length) $('#add-more').trigger('click');
                }
                $('#exampleModal').modal('show');
            });

            $('#exampleModal').on('hidden.bs.modal', function () {
                $('#id').val('');
                $('#title').val('');
                $('#description').val('');
                $('#webhook_events_id_0').val('').trigger('change');
                $('#webhook_topics_id_0').val('').trigger('change');
            });

            $(".openEditModalChannelEvent").click(function (event) {
                event.preventDefault();
                $('#id_channel_event').val($(this).data('channel_update-id'));
                $('#title_channel_event').val($(this).data('channel_update-title'));
                $('#description_channel_event').val($(this).data('channel_update-description'));

                let payload = $(this).data('channel_update-payload');
                for(let i = 0; i < payload.length; i++){
                    let event = payload[i];

                    // if(i > 0) {
                    //     $('#add-more-channel-event').trigger('click');
                    // }

                    $('#channel_event_id_'+i).val(event.channel_event_id).trigger('change');
                }
                $('#exampleModal2').modal('show');
            });

            $('#exampleModal2').on('hidden.bs.modal', function () {
                $('#id_channel_event').val('');
                $('#title_channel_event').val('');
                $('#description_channel_event').val('');
                // $('.customRow').not(':first').remove(); // Remove all but the first dynamic row
                $('#channel_event_id_0').val('').trigger('change'); // Clear the first dynamic row's select input
            });

            $(".openEditModalGeneralEvent").click(function (event) {
                event.preventDefault();

                // Set modal fields with new data
                $('#id_general').val($(this).data('general-id'));
                $('#title_general').val($(this).data('general-title'));
                $('#description_general').val($(this).data('general-description'));
                // $('#stores').val('').trigger('change');
                // let payload = $(this).data('general-payload');

                $('#exampleModal3').modal('show');
            });

            $('#exampleModal3').on('hidden.bs.modal', function () {
                $('#id_general').val('');
                $('#title_general').val('');
                $('#description_general').val('');
                // $('#stores').val('').trigger('change'); // Clear the stores select input
            });

            function onWebhookEventChange(ref){
                var id = $(ref).attr('id');
                $.ajax({
                    url: '{{ route('admin.stores.notify.api_version.get.webhook_topics') }}',
                    type: 'GET',
                    data: {
                        _method: 'GET',
                        _token: "