@extends('partials.main')
<!-- page title -->
@section('title')
Services
@endsection

@section('content')
<style>
.modalb {
    background: #29aae3;
    color: white;
}

.modalb:hover {
    background: #0293d4;
    color: white;
}

.custom-search1 {
    border-radius: 20px;
    background: #ecf0fa;
    border: 1px solid #ecf0fa;
}

.custom-search .bt {
    margin-left: -35px;
    margin-top: 12px;
}

.page-item.next a {
    width: 64px;
}

.page-item.prev a {
    width: 64px;
}
</style>

<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">Services</li>
        </ol>

    </nav>

</div>
<!-- breadcrumb -->

@canany(['services filter name', 'services filter custom'])
<div class="card">
    <div class="card-body">
        <div class="container">
            <div class="row ">
                <input type="hidden" name="filterLength" id="filterLength" value="6">

                @can('services filter name')
                <div class="col-4 col-lg-4  mt-3 mt-lg-0 "><input name="filterName" id="filterName" type="search"
                    class="custom-search form-control " placeholder="Search by name...">
                </div>
                @endcan
                @can('services filter custom')
                <div class="col-4 col-lg-4  mt-3 mt-lg-0">
                    <select name="filterService" id="filterService" required class="custom-search form-control">
                        <option value="all">Show All Services</option>
                        <option value="candidate_biography">Candidate Bio </option>
                        <option value="politiacl_viewpoints">Political Platform </option>
                        <option value="community_overview">Community Overview </option>
                        <option value="elevator_pitch">Elevator Pitch </option>
                        <option value="political_slogan">Political slogan </option>
                    </select>
                </div>
                @endcan

                <div class="col-4 col-lg-2  mt-3 mt-lg-0 ">
                    <button id="btnFilter" class="btn btn-outline-danger btn-block "><i class="fe fe-search"></i>
                        Filter</button>
                </div>
                <div class="col-4 col-lg-2   mt-3 mt-lg-0">
                    <button id="btnReset" class="btn btn-danger btn-block">
                        Reset</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endcanany

<!-- row opened -->
<div class="row" id="divData">


</div>
<div class="row row-sm text-center pt-5" id="divLoader" style="display:block;height:300px;">
    <span>
        <i class="fas fa-spinner fa-spin"></i> services are being loading..
    </span>
</div>
<!-- row closed -->

<!-- row opened cards-->
<div class="row row-sm text-center pt-5 text-danger" id="divDefault" style="display:block;height:300px;">
    <span>
        <i class="fas fa-exclamation"></i> No services are found!
    </span>
</div>

<!-- /row -->

<div class="row">
    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2"></div>
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2"></div>
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2" id="divPagination">
            <ul class="pagination mb-3 flex-wrap" id="content-pagination" style="display:none; float:right">

            </ul>
        </div>

</div>



<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

<script type="text/javascript">
//$(document).ready(function(e){
var filterLength = 1;
var filterName = 'all';
var filterService = 'all'
var contentPagination = $("#content-pagination")

$("#btnFilter").on('click', function(e) {
    qrCount()
})

$("#btnReset").on('click', function(e) {
    // filterLength=1;
    filterName = 'all';
    filterService = 'all';

    $("#filterName").val('')
    $("#filterPosition").val('all')
    $("#filterState").val('all')
    $("#filterService").val('all')

    qrCount()
})

function setFilters() {
    filterLength = $("#filterLength").val()
    filterName = $("#filterName").val() == '' ? 'all' : $("#filterName").val()
    filterPosition = $("#filterPosition").val()
    filterState = $("#filterState").val()
    filterService = $("#filterService").val()
}

qrCount()

function initPagination(totalPages) {
    if (totalPages > 0) {
        contentPagination.show();
        contentPagination.twbsPagination({
            totalPages: totalPages,
            visiblePages: 4,
            onPageClick: function(event, page) {
                requests((page === 1 ? page - 1 : ((page - 1) * filterLength)), filterLength);
            },
            // prev:'<i class="fa fa-arrow-left"></i>',
            // next:'<i class="fa fa-arrow-right"></i>',
        });
    } else {
        contentPagination.hide();
        $("#divData").css('display', 'none');
        $("#divLoader").css('display', 'none');
        $("#divDefault").css('display', 'block');

    }
}


function qrCount() {
    setFilters()
    contentPagination.twbsPagination('destroy');
    $("#divData").css('display', 'none');
    $("#divLoader").css('display', 'block');
    $("#divDefault").css('display', 'none');
    // filterStatus = $("#filterStatus").val()
    // filterForm = $("#filterForm").val()
    $.ajax({
        url: '/api/service/count/',
        type: "get",
        data: {
            filterLength: filterLength,
            filterName: filterName,
            filterService: filterService
        },
        dataType: "JSON",
        cache: false,
        beforeSend: function() {},
        complete: function() {},
        success: function(response) {
           console.log(response)
            if (response["status"] == "success") {
                total = response["data"];
                initPagination(Math.ceil(total / filterLength));
            } else if (response["status"] == "fail") {
                // $("#divNotFound").css('display','block')
                // $("#divLoader").css('display','none')
                // $("#divData").css('display','none')
            }
        },
        error: function(error) {
            console.log(error);
        }
    });
}

function requests(offset, limit) {
    // datatable('');
    $("#divLoader").css('display', 'block');
    $("#divData").html('')

    $.ajax({
        url: '/api/service/get',
        headers: {
            "X-CSRF-TOKEN": "{{ csrf_token() }}",
            "Content-Type": "application/json"
        },
        type: "get",
        dataType: "JSON",
        data: {
            offset: offset,
            limit: limit,
            filterName: filterName,
            filterService: filterService
        },
        beforeSend: function() {

        },
        complete: function() {
            $("#divLoader").css('display', 'none')
        },
        success: function(response) {

            if (response["status"] == "fail") {
                $("#divDefault").css('display', 'block');
            } else if (response["status"] == "success") {

                $("#divLoader").css('display', 'none');
                $("#divData").css('display', 'flex');
                $("#divData").html(response["html"]);

            }
        },
        error: function(error) {
            console.log(error);
        }
    });
}
//})

$(document).on('click', '.btnDelete', function(e) {

    var id = $(this).attr('id');

    Swal.fire({

            title: "Are you sure?",

            text: "You will not be able to recover this Service!",

            type: "warning",

            buttons: true,

            confirmButtonColor: "#ff5e5e",

            confirmButtonText: "Yes, delete it!",

            closeOnConfirm: false,

            dangerMode: true,

            showCancelButton: true

        })

        .then((deleteThis) => {

            if (deleteThis.isConfirmed) {

                $.ajax({

                    url: '/api/services/delete/' + id,

                    type: "GET",

                    dataType: "JSON",



                    success: function(response) {

                        if (response["status"] == "fail") {

                            Swal.fire("Failed!", "Failed to delete Order.", "error");

                        } else if (response["status"] == "success") {

                            Swal.fire("Deleted!", "Service has been deleted.",

                                "success");
                            qrCount()
                        }
                    },

                    error: function(error) {

                        console.log(error);

                    },

                    async: false

                });

            } else {

                Swal.close();

            }

        });

});
</script>

@endsection