@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">Bootcamp Category</li>
                            </ul>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-lg-4 text-right">
                    <a href="{{ url('bootcampcategory/create') }}" class="btn cur-p btn-sm btn-success">Add Bootcamp
                        Category</a>
                </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="15%">Sr. No.</th>
                                            <th>Bootcamp Category</th>
                                            <th>Bootcamp Name</th>
                                            <th>Status</th>
                                            <th width="15%">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-body">
                            <form class=" " method="POST" action="{{ route('bootcampcategory.store') }}"
                                id="needs-validation">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-12 col-md-6">
                                        <div class="form-group">
                                            <label for="">Bootcamp <span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="bootcamp_mst_id" id="bootcamp_mst" class="form-control" required>
                                                <option value="">--Select--</option>
                                                @foreach ($bootcamp_list as $value)
                                                    <option value="{{ $value->id }}">
                                                        {{ $value->bootcamp_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12">
                                        <div class="form-group">
                                            <label for="">Category <span class="required"
                                                    style="color: red;">*</span></label>
                                            <input type="text" class="form-control section-name-input onlyalpha-num-braces"
                                                name="bootcamp" id="wordsLimit" value="" placeholder=""
                                                autocomplete="off" required>
                                            <div class="invalid-feedback">
                                                Emojis are not allowed in this field.
                                            </div>
                                        </div>
                                    </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('bootcampcategory') }}"><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 -->
    <div class="modal modal-warning fade" id="modal_edit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title">Update</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="">Bootcamp <span class="required" style="color: red;">*</span></label>
                        <select name="bootcamp_mst_id_edit" id="bootcamp_mst_edit" class="form-control" required>
                            <option value="">--Select--</option>
                            @foreach ($bootcamp_list as $value)
                                <option value="{{ $value->id }}">
                                    {{ $value->bootcamp_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="bootcamp_name_category">Category </label>
                        <input name="bootcamp_name_category" id="bootcamp_name_category" type="text" value=""
                            class="form-control onlyalpha-num-braces" placeholder="Bootcamp">
                    </div>

                </div>
                <div class="modal-footer">
                    <button id="edit_action" type="button" class="btn btn-outline btn-success">Save Changes</button>
                    <button type="button" class="btn btn-outline pull-left btn-danger" data-dismiss="modal">Cancel</button>

                </div>
            </div>
        </div>
    </div>
    <!-- Modal For edit boorcamp name ends here -->
    <input type="hidden" id="bootcamp_mst_category_id" value="0" />
    <!-- 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>

    <!-- JavaScript code -->
    <script>
        var table

        function edit_action(this_el, item_id) {
            $('#bootcamp_mst_category_id').val(item_id);
            var tr_el = this_el.closest('tr');
            var row = table.row(tr_el);
            var row_data = row.data();
            $('#bootcamp_name_category').val(row_data[1]);
        }
        $(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('bootcampcategory.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 bootcamp name 
        $('#edit_action').on('click', function(e) {
            e.preventDefault();

            var bootcamp_cat_id = $('#bootcamp_mst_category_id').val();
            var bootcamp_cat_name = $('#bootcamp_name_category').val();
            var bootcamp_id_mst = $('#bootcamp_mst_edit').val();
            if (bootcamp_name_category == '') {
                alert('Please enter Bootcamp category name');
                return false;
            }
            if (bootcamp_id_mst == '') {
                alert('Please enter Bootcamp name');
                return false;
            }

            $.ajax({
                url: "{{ route('updatecategory') }}",
                data: {
                    'bootcamp_cat_id': bootcamp_cat_id,
                    'bootcamp_cat_name': bootcamp_cat_name,
                    'bootcamp_id_mst': bootcamp_id_mst,
                    '_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 delete this?",
                callback: function(result) {
                    if (result) {

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

                            }
                        })
                    }
                }
            });
        }

        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('activechild') }}",
                            data: {
                                'id': id,
                                '_token': "{{ csrf_token() }}"
                            },
                            type: "POST",
                            success: function(response) {
                                table.ajax.reload(null, false);

                            }
                        })
                    }
                }
            });
        }
        // $('#modal_edit').on('hidden.bs.modal', function() {
        //     $('#bootcamp_mst_category_id').val(0);
        //     $('#bootcamp_name_category').val("");
        // });
    </script>
@endsection