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

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

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

</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">position List</li>
        </ol>
    </nav>
</div>
<!-- breadcrumb -->

<!-- row opened -->
<div class="row row-sm">
    <div class="col-xl-12">
        <div class="card shadow-none">
            <div class="card-header pb-0">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title mg-b-0">Position TABLE</h4>
                    <div class="text-right">
                        @can('running position add')
                            <a href="" role="button" data-bs-target="#addpositionmodal" data-bs-toggle="modal"
                            class="btn btn-md modalb"><i class="mdi mdi-plus"></i> Add Position</a>
                        @endcan
                    </div>
                </div>
            </div>
            <div class="card-body">
                        <div id="loader" class="text-center pt-5" style="display:block;height:300px;">
                            <span>
                                <i class="fas fa-spinner fa-spin"></i> Positions are being loading.. It might take few seconds.
                            </span>
                        </div>
                <div class="table-responsive">
                    <table class="table text-md-nowrap" id="datatable">
                        <thead>
                            <tr>
                                <th class="wd-5p border-bottom-0"># </th>
                                <th class="wd-15p border-bottom-0">position Name</th>
                                <th class="wd-15p border-bottom-0">position Level</th>

                                <th class="wd-15p border-bottom-0">Min Amount </th>
                                <th class="wd-15p border-bottom-0">Max Amount </th>
                                <th class="wd-15p border-bottom-0">status </th>

                                @canany(['running position edit', 'running position delete'])
                                <th class="wd-15p border-bottom-0">Action</th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody id="table-row">

                        </tbody>
                    </table>
                </div>
            </div><!-- bd -->
        </div>
    </div>
</div>
<!-- /row -->

<!-- Add position Modal -->
<div class="modal" id="addpositionmodal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Create new position</h5>
                <p class="mg-b-20">Please enter following details to create position.</p>
                <form action="" id='addposition' class='mt-3'>
                    <div class="form-group">
                        <input type="text" class="form-control" name='position_name'
                            placeholder="Position name  i.e Mayor.." required>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <select name="position_level" id="" required class="form-control">
                            <option value="" selected disabled>--select position level</option>
                             @foreach($position_levels as $level)
                            <option value="{{$level->id}}">{{$level->level}}</option>
                            @endforeach

                        </select>
                    </div>
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-text">
                                <span class="input-group-text" id="basic-addon1">$</span>
                            </div>
                            <input type="number" class="form-control" name='min_amount'
                                placeholder="Min donation amount" required>
                        </div><!-- input-group -->
                    </div>
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-text">
                                <span class="input-group-text" id="basic-addon1">$</span>
                            </div>
                            <input type="number" class="form-control" name='max_amount'
                                placeholder="Max donation amount" required>
                        </div><!-- input-group -->
                    </div><!-- form-group -->

                    <div class="form-group">
                        <select name="status" id="" required class="form-control">
                            <option value="" selected disabled>--select status--</option>
                            <option value="2">Active</option>
                            <option value="1">Inactive</option>
                            <option value="0">Pending</option>
                        </select>
                    </div>
                    <button class="btn modalb btn-block" id="btnSubmit"> <i class="fa fa-spinner fa-spin"
                            style="display:none;"></i> Create position</button>
                </form>
            </div><!-- modal-body -->
        </div>
    </div>
</div><!-- modal -->

<!-- Edit position Modal -->
<div class="modal" id="editpositionmodal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Edit Position</h5>
                <p class="mg-b-20">Edit position information.</p>
                <form id='editposition' class='mt-3'>
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <input type="text" class="form-control position_name" name='position name'
                            placeholder="position Name  i.e Mayor.." required>
                    </div>
                    <div class="form-group">
                        <select name="position_level" id="" required class="form-control position_level">
                            <option value="" selected disabled>--select position level--</option>
                            @foreach($position_levels as $level)
                            <option value="{{$level->id}}">{{$level->level}}</option>
                            @endforeach

                        </select>
                    </div>
                    <!-- form-group -->
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-text">
                                <span class="input-group-text" id="basic-addon1">$</span>
                            </div>
                            <input type="number" class="form-control max_amount" name='max_amount'
                                placeholder="Max donation amount" required>
                        </div><!-- input-group -->
                    </div><!-- form-group -->
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-text">
                                <span class="input-group-text" id="basic-addon1">$</span>
                            </div>
                            <input type="number" class="form-control min_amount" name='min_amount'
                                placeholder="Min donation amount" required>
                        </div><!-- input-group -->
                    </div><!-- form-group -->
                    <div class="form-group">
                        <select name="status" id="" required class="form-control status">
                            <option value="" selected disabled>--select status--</option>
                            <option value="2">Active</option>
                            <option value="1">Inactive</option>
                            <option value="0">Pending</option>
                        </select>
                    </div>
                    <button class="btn modalb btn-block" id="btnSubmit"> <i class="fa fa-spinner fa-spin"
                            style="display:none;"></i> Update position</button>
                </form>
            </div>
        </div>
    </div><!-- modal -->


    <script type="text/javascript">


 $(document).ready(function(e){

        var table = $('#datatable').DataTable();
        datatable('')
        // var pageInfo=table.page.info()
        function datatable(rows) {
                $("#datatable tbody").empty();
                $("#datatable").DataTable().clear();
                $("#datatable").DataTable().destroy();
                $("#table-row").append(rows)
                table = $('#datatable').DataTable();
                // table.page(pageInfo.page).draw(false)
            }

        positions();
        function positions(){
            datatable('');
            $("#loader").css('display','block')
            $("#tbody").css('display','none')


            $.ajax({
                url: '/position/list',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                type: "get",
                dataType: "JSON",
                cache: false,
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (response) {
                   ;
                    if (response["status"] == "fail") {
                        $("#loader").css('display','none')
                        $("#tbody").css('display','block')
                        toastr.info('Not Found',response["msg"])
                    } else if (response["status"] == "success") {

                        $("#loader").css('display','none')
                        $("#tbody").css('display','block')


                        datatable(response["rows"]);


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

        }


                $(document).on('click', '.editBtn', function (e) {
                var id = $(this).attr('id');

            $.ajax({
                url: '/api/position/edit/'+id,
                type: "GET",
                dataType: "JSON",
                success: function (response) {
                   ;
                    if (response["status"] == "fail") {
                        Swal.fire("Failed!", "Failed to Get User.", "error");
                    } else if (response["status"] == "success") {
                        $("#id").val(response["data"]["id"])

                        $(".position_name").val(response["data"]["position_name"])
                        $(".position_level").val(response["data"]["position_level"])
                        $(".max_amount").val(response["data"]["max_amount"])
                        $(".min_amount").val(response["data"]["min_amount"])

                        $(".status").val(response["data"]["status"])




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


                 $("#addposition").on('submit', (function (e) {
            // alert('asd');
            e.preventDefault();
            $.ajax({
                url: "api/position/store",
                type: "post",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {

                    if (response["status"] == "fail") {
                        toastr.error(response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $('#addpositionmodal').modal('hide');



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

                 $("#editposition").on('submit', (function (e) {
            // alert('asd');
            e.preventDefault();
            $.ajax({
                url: "api/position/update",
                type: "post",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {

                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $('#editpositionmodal').modal('hide');



                             positions()
                    }
                },
                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 Position!",

                type: "warning",

                buttons: true,

                confirmButtonColor: "#ff5e5e",

                confirmButtonText: "Yes, delete it!",

                closeOnConfirm: false,

                dangerMode: true,

                showCancelButton: true

            })

                .then((deleteThis) => {

                    if (deleteThis.isConfirmed) {

                        $.ajax({

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

                            type: "GET",

                            dataType: "JSON",



                            success: function (response) {



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

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

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

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

                                        "success");



                                      positions()


                                }

                            },

                            error: function (error) {

                                console.log(error);

                            },

                            async: false

                        });

                    } else {

                        Swal.close();

                    }

                });

        });


            });



    </script>


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>



    @endsection