@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-breadcrumb-wrp">
                        <div class="page-header-breadcrumb">
                            <ul class="breadcrumb-title">
                                <li class="breadcrumb-item">
                                    <a href="{{ url('') }}"> <i class="feather icon-home"></i> </a>
                                </li>
                                <li class="breadcrumb-item">Score Category</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
                <div class="col-sm-7">
                    <!-- Zero config.table start -->
                    <div class="card">
                        <div class="card-block">
                            <div class="dt-responsive table-responsive">
                                @include('common.error')
                                @php
                                    $i = 0;
                                    // print_r($roles); die;
                                @endphp

                                <!-- Initialize DataTable -->
                                <table id="simpletable" class="table table-striped table-bordered nowrap">
                                    <thead>
                                        <tr>
                                            <th width="5%">Sr. No.</th>
                                            <th width="10%">Category</th>
                                            <th width="20%">Sub Category</th>
                                            <th width="10%">Value</th>
                                            <th width="10%">Multiply</th>
                                            <th width="10%">Status</th>
                                            <th width="10%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-sm-5">
                    <!-- Zero config.table start -->
                    <div class="card  mb-3">
                        <div class="card-header pb-0"><b>Add Socre Category</b>
                            <hr />
                        </div>
                        <div class="card-body">
                            <form class=" " method="POST" action="{{ route('scorecategorys.store') }}"
                                id="needs-validation">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-12 col-md-12">
                                        <div class="form-group">
                                            <label for="sub_category">Category <span class="required"
                                                    style="color: red;">*</span></label>
                                            <select class="form-control" name="score_cat_id" id="score_cat_id" required>
                                                <option value="">-- Select --</option>
                                                @foreach ($mst_score_category as $value)
                                                    <option value="{{ $value->id }}">{{ $value->category_name }}
                                                    </option>
                                                @endforeach
                                                <!-- Add more options as needed -->
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                        <label for="">Sub Category <span class="required" style="color: red;">
                                                *</span></label>
                                        <select type="text" class="form-control" name="sub_category" id="sub_category"
                                            required>
                                            <option value="">-- Select --</option>
                                            @for ($i = 1; $i <= 8; $i++)
                                                <option value="Score: {{ $i }}">Score: {{ $i }}
                                                </option>
                                            @endfor
                                        </select>
                                    </div>

                                    <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                        <label for="">Value<span class="required" style="color: red;">
                                                *</span></label>
                                        <input type="number" class="form-control onlyalpha-num-braces rem-onlyspace"
                                            name="value" id="value" min="1" required>
                                    </div>

                                    <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                        <label for="">Multiply by<span class="required" style="color: red;">
                                                *</span></label>
                                        <input type="number" class="form-control onlyalpha-num-braces rem-onlyspace"
                                            name="multiply" id="value" min="1" required>
                                    </div>


                                </div>
                                <div class="row justify-content-between">
                                    <div class="col-md-12  text-right">
                                        <input type="submit" value="Save" class="btn btn-success me-2">
                                        {{-- <a href="{{ url('scorecategorys') }}"><button type="button"
                                        class="btn  btn-danger ">Cancel</button></a> --}}
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>
    <!-- Modal For edit boorcamp name -->
    {{-- Bootcamp Details Update --}}
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Socre Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>


                <form class=" " method="POST" action="{{ route('score.categorys.update') }}" id="needs-validation">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label for="sub_category">Category <span class="required"
                                            style="color: red;">*</span></label>
                                    <select class="form-control" name="score_cat_id" id="edit_score_cat_id" required>
                                        <option value="">-- Select --</option>
                                        @foreach ($mst_score_category as $value)
                                            <option value="{{ $value->id }}">{{ $value->category_name }}
                                            </option>
                                        @endforeach
                                        <!-- Add more options as needed -->
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                <label for="">Sub Category <span class="required" style="color: red;">
                                        *</span></label>
                                <input type="text" class="form-control onlyalpha-num-braces rem-onlyspace"
                                    name="sub_category" id="edit_sub_category" maxlength="150" minlength="2" required>
                            </div>

                            <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                <label for="">Value<span class="required" style="color: red;">
                                        *</span></label>
                                <input type="number" class="form-control onlyalpha-num-braces rem-onlyspace"
                                    name="value" id="edit_value" minlength="1" required>
                            </div>

                            <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                <label for="">Multiply<span class="required" style="color: red;">
                                        *</span></label>
                                <input type="number" class="form-control onlyalpha-num-braces rem-onlyspace"
                                    name="multiply" id="edit_multiply" minlength="1" required>
                            </div>
                        </div>

                    </div>
                    <input type="hidden" id="update_id" name="id">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" name="submit" class="btn btn-primary">Save
                            Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Include DataTables JavaScript libraries -->
    <script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.min.js') }}"></script>

    <script>
        $(function() {
            $("body").on('click', ".boot-update", function() {
                var id = $(this).attr('data-lead_id');
                var score_cat = $(this).attr('data-edit_score_cat_id');
                var sub_category = $(this).attr('data-edit_sub_category');
                var value = $(this).attr('data-value');
                var multiply = $(this).attr('data-multiply');

                $("#edit_score_cat_id").val(score_cat);
                $("#edit_sub_category").val(sub_category);

                $("#edit_value").val(value);
                $("#edit_multiply").val(multiply);


                $("#update_id").val(id);
                $("#exampleModal2").modal("toggle");
            });
        });
    </script>
    <!-- JavaScript code -->
    <script>
        var table
        $(function() {
            table = $('#simpletable').DataTable({
                "processing": true,
                "serverSide": true, //Feature control DataTables' servermside processing mode.
                "bFilter": true,
                "bLengthChange": false,
                "ordering": false,
                "iDisplayLength": 10,
                "responsive": true,
                "ajax": {
                    "url": "{{ route('scorecategorys.index') }}",
                    "type": "GET",
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        return jsonData.data;
                    }
                },
                //Set column definition initialisation properties.
                "columnDefs": [{
                    "targets": [0], //first column / numbering column
                    "orderable": false, //set not orderable
                }, ],
            });
            // dataTable();
        });
        //update scorecategory name 

        $('#edit_action').on('click', function(e) {
            var scorecategory_id = $('#scorecategory_mst_id').val();
            var sub_category = $('#edit_score_cat_id').val();


            e.preventDefault();
            $.ajax({
                url: "{{ route('update') }}",
                data: {
                    'scorecategory_id': scorecategory_id,
                    'sub_category': sub_category,
                    '_token': "{{ csrf_token() }}"
                },
                type: "POST",
                success: function(response) {

                    if (response.success == false) {
                        alert(response.message);
                    } else {
                        $('#modal_edit').modal('hide');
                        table.ajax.reload(null, false);
                    }
                }
            })
        });

        function fn_delete(id) {
            bootbox.confirm({
                title: "",
                // message: "Are you sure, you want to delete this Question?",
                message: "Do you really want to inactive this?",
                callback: function(result) {
                    if (result) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        var url = "{{ route('scorecategorys.destroy', ':id') }}";
                        url = url.replace(':id', id);

                        $.ajax({

                                type: "POST",
                                data: {
                                    _method: "DELETE"
                                },
                                url: url,
                                //url: '{{-- {{ route('role.destroy', $user_id) }} --}}',
                                dataType: 'JSON'

                            })
                            .done(function(response) {
                                bootbox.alert({
                                    title: "",
                                    message: response.message
                                });
                                location.reload();
                            })
                            .fail(function(response) {
                                bootbox.alert({
                                    title: "",
                                    message: 'Something Went Wrong..'
                                });
                            })
                    }
                }
            });
        }

        function fn_active(id) {
            bootbox.confirm({
                title: "",
                // message: "Are you sure, you want to delete this Question?",
                message: "Do you really want to active this?",
                callback: function(result) {
                    if (result) {

                        $.ajax({
                            url: "{{ route('scorecategorys.active') }}",
                            data: {
                                'id': id,
                                '_token': "{{ csrf_token() }}"
                            },
                            type: "POST",
                            success: function(response) {
                                table.ajax.reload(null, false);

                            }
                        })
                    }
                }
            });
        }
    </script>
@endsection