@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Features Details</x-page.header>
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Features List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class=" table table-striped table-bordered table-vcenter text-nowrap" id="features-table">
                                <thead>
                                    <tr>

                                        <th style="text-align: center;">Id</th>
                                        <th style="text-align: center;">name</th>
                                        <th style="text-align: center;">Code</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @php
                                        $count=0
                                    @endphp
                                        @foreach ($features as $feature)
                                        <tr>
                                         <td style="text-align: center;">{{++$count}}</td>
                                         <td class="text-center">{{$feature->feature_name}}</td>
                                         <td class="text-center">{{$feature->code}}</td>
                                         <td style="text-align: center;">
                                            <div class="">
                                                <label class="form-swich">
                                                <input type="checkbox" value="{{$feature->is_active ? '1' : '0'}}" {{ $feature->is_active ? 'checked' : ''}}  data-feature={{ $feature->id }} id="is_active_{{$feature->id}}" name="is_active" class="form-switch-input status-checkbox">
                                                <span class="form-switch-indicator"></span>
                                                <span class="form-switch-description" id="status_{{ $feature->id }}">{{ $feature->is_active ? 'active' : 'inactive' }}</span>
                                                </label>
                                            </div>
                                        </td>
                                         @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
    <script>
        $(document).ready(function(){
            $('#features-table').dataTable( {

              "drawCallback": function( settings ) {
                    // update course offering status
                    $('.status-checkbox').on('change', function () {
                        $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                        }
                        });
                        const feature_id = $(this).attr('data-feature');
                        var url = "{{ route('admin.system-settings.updateFeatureDetailsStatus', ":feature_id") }}";
                        url = url.replace(':feature_id', feature_id);
                        var formData = new FormData();
                        var checkbox_value=jQuery('#is_active_'+feature_id).val()
                        var status=jQuery('#status_'+feature_id);

                        if(checkbox_value == 1){
                            checkbox_value = 0
                            status.text('inactive')
                        }else{
                            checkbox_value = 1
                            status.text('active')
                        }

                        formData.append('is_active', checkbox_value);

                        $.ajax({
                            url: url,
                            type: 'POST',
                            processData: false,
                            contentType: false,
                            cache: false,
                            data: formData,
                            enctype: 'multipart/form-data',
                            success: function (data) {
                                notif({
                                    type: "success",
                                    msg: "The Status Updated Successfully",
                                    position: "center",
                                    opacity: 0.8,
                                    autohide: true
                                    });
                                    setTimeout(location.reload.bind(location), 1000);
                            }
                        });
                    });
                }
            })
        })

    </script>
@endsection