@extends('layouts.layout')

@push('header')
@endpush

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h4>@lang('Goals Bank Settings')</h4>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">@lang('Dashboard')</a>
                        </li>
                        <li class="breadcrumb-item active">@lang('Goals Bank Settings')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <div class="card">
        <div class="card-header">
            <h5><span class="badge badge-info">@lang('Add Goals Bank')</span></h5>
        </div>
        <div class="card-body custom-padding-top-0">
            <section>
                <div class="row">
                    <div class="col-md-12">
                        <form id="scheduler-settings-form" class="form-material form-horizontal" autocomplete="off" action="#" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>@lang('Category') <b class="ambitious-crimson">*</b></label>
                                        <input type="text" name="category" id="category" list="categories_list" class="time-flatpickr form-control @error('start_time') is-invalid @enderror" placeholder="@lang('Category')" value="" required>
                                        <datalist id="categories_list">
                                            @isset($categories)
                                                @foreach ($categories as $category)
                                                    <option>{{ $category }}</option>
                                                @endforeach
                                            @endisset
                                        </datalist>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>@lang('Goal') <b class="ambitious-crimson">*</b></label>
                                        <input type="text" name="goal" id="goal" class="time-flatpickr form-control @error('end_time') is-invalid @enderror" placeholder="@lang('Goal')" value="" required>
                                    </div>
                                </div>
                                <div class="col-md-3" style="align-self: end; margin: 16px;">
                                    <input type="submit" value="{{ __('Add') }}" class="btn btn-info" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5><span class="badge badge-info">@lang('Goals List')</span></h5>
        </div>
        <div class="card-body custom-padding-top-0">
            <section>
                <div class="row">
                    <x-session-note.table :headers="['#', 'Category', 'Goal', 'Action']" :data="'goals-bank-table'" />
                </div>
            </section>
        </div>
    </div>
@endsection

@push('footer')
    {{-- <script src="{{ asset('assets/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js') }}"></script> --}}


    <script>
        dataTableInitialize();

        function dataTableInitialize() {
            let _dataUrl = "{{ route('goal-bank.table') }}";

            $('.dataTable').DataTable({
                dom: 'Bfrtip',
                "processing": true,
                "serverSide": true,
                "bDestroy": true,
                "ordering": true,
                "responsive": true,
                "sScrollX": '100%',
                "sScrollXInner": "100%",
                "autoWidth": true,
                "pagingType": "simple_numbers",
                "paging": true,
                "lengthMenu": [
                    [15, 25, 50],
                    [15, 25, 50]
                ],
                "order": [
                    [0, 'desc']
                ],
                "ajax": {
                    "type": "GET",
                    "contentType": "application/json",
                    "dataType": "json",
                    "url": _dataUrl,
                    "headers": {
                        'X-CSRF-TOKEN': "$('meta[name='csrf-token']').attr('content')",
                    },
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'id'
                    },
                    {
                        data: 'category',
                        searchable: true,
                        render: function(data, type, row) {
                            data = '<div class="badge badge-info text-uppercase">' + data + '</div>';
                            return data;
                        }
                    },
                    {
                        data: 'goal',
                        searchable: true
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                "columnDefs": [{
                    "targets": 1,
                    className: 'text-capitalize'
                }],
            });
        }

        function deleteGoal(goal_id) {
            var _url = "{{ route('goal-bank.delete') }}";
            if (confirm("Are you sure you want to delete?")) {
                $.ajax({
                    url: _url,
                    method: 'delete',
                    data: {
                        goal_id: goal_id
                    },
                    cache: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(goalDelete) {
                        Swal.fire(
                            'Deleted!',
                            'Data Deleted Successfully!',
                            'success');
                        dataTableInitialize();
                    },
                    error: function(xhr, status, error) {
                        Swal.fire(
                            'Failed!',
                            error + ' or ' + xhr?.responseText,
                            'error');
                    }
                });
            }
        }

        $("#scheduler-settings-form").submit(function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            var _url = "{{ route('goal-bank.store') }}";
            $.ajax({
                url: _url,
                method: 'post',
                data: fd,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(goalStore) {
                    Swal.fire(
                        'Updated!',
                        'Data Updated Successfully!',
                        'success'
                    );
                    dataTableInitialize();
                    $('#category').val('');
                    $('#goal').val('');
                }
            });
        });
    </script>
@endpush