@extends('layouts.master')

@section('page-title'){{ __('Campaign Categories') }}@endsection

@section('menu'){{ __('Bonuses') }}@endsection

@section('sub-menu'){{ __('Campaign Categories') }}@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <a href="javascript:;" class="js-create-campaign-category btn btn-primary mb-5"
                data-url="{{ route('campaign-categories.create') }}">
                {{ __('Add New Category') }}
            </a>

        </div>

        <div class="col-12 mb-4">
            <form js-callbacks="initializeDataTables" js-container="#container-campaign-categories-table-wrapper"
                class="ajax-form form-affiliate-report" action="{{ route('campaign.categories.table.render') }}"
                method="POST">

                @csrf
                <div class="row">
                    <div class="col-3">
                        <label for="category_name">{{ __('Category Name') }}</label>
                        <input type="text" name="category_name" class="form-control">
                    </div>
                    <div class="col-3">
                        <label for="category_type">{{ __('Category Type') }}</label>
                        <select name="category_type" class="form-control" id="">
                            <option value="-1">All</option>
                            <option value="1">Main Category</option>
                            <option value="2">Secondary category</option>
                        </select>
                    </div>

                    <div class="col-3 mt-4">
                        <button type="submit" class="js-submit btn btn-primary waves-effect waves-light">{{ __('Search') }}</button>
                    </div>
                </div>


            </form>
        </div>

        <div class="col-12 mt-4">
            <div id="container-campaign-categories-table-wrapper">
                @include('partial.tables.campaigns.campaign-categories-table')
            </div>
            
        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script type="text/javascript" src="/assets/js/reports.js"></script>

    <script>
        $.each($('.js-data-table'), function() {

            if ($(this).find('tr').length > 2) {
                $(this).DataTable({
                    "autoWidth": true,
                    "pagingType": "full_numbers",
                    "responsive": true,
                    "scrollX": true,
                    // "pageLength": parseInt(response.perPage),
                    "lengthMenu": [10, 20, 50, 100]
                });
            }
        })
    </script>

    <script>
        $(document).on('click', '.js-update-campaign-category', function() {
            let id = $(this).attr('data-id')
            let url = $(this).attr('data-url')

            $.ajax({
                url: url,
                type: 'GET',
                beforeSend: function() {
                    $("#loading").show()
                },
                success: function(data) {
                    $('#campaignCategoryModal').html(data.content)
                    $('#campaignCategoryModal').modal({
                        show: true
                    });
                    $("#loading").hide()
                },
                error: function(xhr) {
                    $("#loading").hide()
                },
                complete: function() {
                    $("#loading").hide()
                },
            });
        });

        $(document).on('click', '.js-delete-campaign-category', function() {
            let url = $(this).attr('data-url');
            var trElem = $(this).closest('tr');
            Swal.fire({
                title: "Are you sure?",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "Yes, delete it!"
            }).then(function(result) {
                if (result.value) {

                    $.ajax({
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        type: 'DELETE',
                        url: url,

                        success: function(response) {
                            if (response.success) {
                                Swal.fire("Deleted!", "Category is successfully deleted.",
                                    "success");

                                trElem.remove();

                            } else {
                                Swal.fire("Error!", "Error occured.", "error");
                            }
                        }
                    });
                }
            });
        });

        $(document).on('click', '.js-create-campaign-category', function() {
            let url = $(this).attr('data-url')

            $.ajax({
                url: url,
                type: 'GET',
                beforeSend: function() {
                    $("#loading").show()
                },
                success: function(data) {
                    $('#campaignCategoryModal').html(data.content)
                    $('#campaignCategoryModal').modal({
                        show: true
                    });
                    $("#loading").hide()
                },
                error: function(xhr) {
                    $("#loading").hide()
                },
                complete: function() {
                    $("#loading").hide()
                },
            });
        });
    </script>
@endsection