@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Features Settings</x-page.header>
        <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;">Uniqe Num</th>
                                        <th style="text-align: center;">Time before</th>
                                        <th style="text-align: center;">Time after</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">
                                            @forelse ($feature->featureDetails as $key=>$item)
                                                @if ($key == 0)
                                                    <a href="{{$item->id ? route('admin.features.details',$feature->id):'#'}}" target="_blank">
                                                        <span class=" badge badge-success">{{$feature->name}}</span>
                                                    </a>
                                                    @else
                                                @endif
                                            @empty
                                            <span class=" badge badge-success">{{$feature->name}}</span>
                                            @endforelse
                                        </td>
                                         <td class="text-center">{{$feature->unique_id}}</td>
                                         @if ($feature->time_before || $feature->time_after)
                                            <td>
                                                <div class="row gutters-sm">
                                                    <div class="col">
                                                        <input type="number"  value="{{$feature->time_before}}" class="form-control time-edit" data-id={{$feature->unique_id}} data-name="time_before">
                                                    </div>
                                                    <span class="col-auto align-self-center ">
                                                        <span data-id={{$feature->unique_id}} data-val="{{$feature->time_before}}" data-name="time_before" class="form-help time-edit-button" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="edit">
                                                            <i class="fa fa-edit fs-16 "></i>
                                                        </span>
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="row gutters-sm">
                                                    <div class="col">
                                                        <input type="number" value="{{$feature->time_after}}" class="form-control  time-edit" data-id={{$feature->unique_id}} data-name="time_after">
                                                    </div>
                                                    <span class="col-auto align-self-center">
                                                        <span data-id={{$feature->unique_id}} data-name="time_after" data-val="{{$feature->time_before}}" class="form-help time-edit-button" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="edit">
                                                            <i class="fa fa-edit fs-16 "></i>
                                                        </span>
                                                    </span>
                                                </div>
                                            </td>
                                            @else
                                            <td>---------</td>
                                            <td>---------</td>
                                         @endif
                                         <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>
                                        </tr>
                                         @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- change layout according to different events --}}
        {{-- @if (auth()->user()->email == 'admin@eshra7ly.net')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Layout events</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group ">
                            <label class="form-label">Select an Event</label>
                            <div class="selectgroup selectgroup-pills">
                                <label class="selectgroup-item">
                                    <input type="radio" name="event" value="plain" class="selectgroup-input event-type">
                                    <span class="selectgroup-button">Plain</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="event" value="ramadan" class="selectgroup-input event-type">
                                    <span class="selectgroup-button">Ramadan</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="event" value="eid-fiter" class="selectgroup-input event-type">
                                    <span class="selectgroup-button">Eid fiter</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="event" value="eid-adha" class="selectgroup-input event-type">
                                    <span class="selectgroup-button">Eid adha</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="event" value="new-year" class="selectgroup-input event-type">
                                    <span class="selectgroup-button">New year</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif --}}

    </div>
</div>
@endsection

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

              "drawCallback": function( settings ) {
                    const _token   = $('meta[name="csrf-token"]').attr('content');
                    // ajax call function
                    function ajaxSetup(url,time,id,name,_token){
                        $.ajax({
                            url: url,
                            type: "PUT",
                            data: {
                                time: time,
                                id:id,
                                name:name,
                                _token: _token
                            },
                            success: function(response) {

                                // Success Message
                                notif({
                                    type: "success",
                                    msg: "Time Updated Successfully",
                                    position: "center",
                                    multiline:true,
                                    opacity: 0.8
                                });
                            },
                            error: function(response) {
                                // error Message
                                notif({
                                    type: "error",
                                    msg: "Something went wrong",
                                    position: "center",
                                    multiline:true,
                                    opacity: 0.8
                                });
                            }
                        });
                    }
                    // 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.updateFeatureStatus', ":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);
                            }
                        });
                    });

                    // on key press event
                    $('.time-edit').on('keypress',function(e){
                        var key = e.which;
                        // if the entered key is the enter key in the keyboard (13) then submit the edit form
                        if(key == 13){
                            var id = $(this).attr('data-id');
                            var time = $(this).val();
                            var name = $(this).attr('data-name');

                            var url = "{{ route('admin.system-settings.updateJoinMeetingTime',":id") }}";
                            url= url.replace(':id', id)
                            ajaxSetup(url,time,id,name,_token)
                        }
                    });

                    // on click edit button
                    $('.time-edit').on('change',function(e){
                        var time = $(this).val();
                        $('.time-edit-button').on('click',function(e){
                            var id = $(this).attr('data-id');
                            var name = $(this).attr('data-name');
                            var url = "{{ route('admin.system-settings.updateJoinMeetingTime',":id") }}";
                            url= url.replace(':id', id)
                            ajaxSetup(url,time,id,name,_token)
                        })
                    });
                }
            })
        })
    </script>

    <script>
        // set checked input according to the local storage value
        $('.event-type').each(function(){
            if($(this).val() == localStorage.event)
            $(this).attr('checked',true)
        });

        // on change event
        $('.event-type').on('change', function () {
            let event=$(this).val()
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });

            var url = "{{ route('admin.system-settings.updateEventLayout') }}";
            var formData = new FormData();
            formData.append('event', event);

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

@endsection