@extends('layouts.master')
@section('title') @lang('translation.Data_Tables') @endsection
@section('css')
<!-- DataTables -->
<link href="{{ URL::asset('/assets/admin/vendors/general/datatable/jquery.dataTables.min.css') }}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css"/>
@endsection
@section('content')
@include('components.breadcum')
<div class="row">
    <div class="col-12">
        {!! success_error_view_generator() !!}
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive ">
                <table id="listResults" class="table dt-responsive mb-4  nowrap w-100 mb-">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Unique id</th>
                            <th>Username</th>
                            <th>Date</th>
                            <th>From time</th>
                            <th>To time</th>
                            <th>Order Status</th>
                            <th>Trainer</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Assign Trainer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="" name="main_form" id="main_form" method="post" action="{{route('admin.session.newstatus')}}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="session_id" id="session_id" value="">
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-3 col-form-label"><span class="text-danger">*</span>Trainer</label>
                        <div class="col-md-9">
                            <select class="form-control" id="assign_trainer" name="assign_trainer">
                                <option value="">--Select Trainer--</option>
                                @foreach($trainer as $all_trainer)
                                <option value="{{$all_trainer->id}}">{{$all_trainer->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-3 col-form-label"><span class="text-danger">*</span>Meeting Link</label>
                        <div class="col-md-9">
                            <input type="url" name="meeting_link" id="meeting_link" class="form-control">
                        </div>
                    </div>
                    <div class="kt-portlet__foot">
                        <div class=" ">
                            <div class="row">
                                <div class="wd-sl-modalbtn">
                                    <button  type="submit" class="btn btn-primary waves-effect waves-light" id="save_changes">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<!-- Required datatable js -->
<script src="{{asset('/assets/admin/vendors/general/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('/assets/admin/vendors/general/datatable/jquery.dataTables.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        oTable = $('#listResults').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [
                [0, "DESC"]
            ],
            "ajax": "{{route('admin.session.listing')}}",
            "columns": [
                {"data": "id",searchable: false,sortable: false},
                {"data": "unique_id",sortable: false},
                {"data": "user_name",sortable: false},
                {"data": "date",sortable: false},
                {"data": "from_time",sortable: false},
                {"data": "to_time",sortable: false},
                {"data": "order_status",sortable: false},
                {"data": "trainer",sortable: false},
                {"data": "action",searchable: false,sortable: false}
            ]
        });
    });
</script>
<script type="text/javascript">

    $(function () {
        $("#main_form").validate({
            ignore: [],
            rules: {
                session_id: {required: true},
                assign_trainer: {required: true},
                meeting_link: {required: true},
            },
            messages: {
                session_id: {required: "Please enter session id"},
                assign_trainer: {required: "Please select trainer"},
                meeting_link: {required: "Please enter meeting link"},
            },
            submitHandler: function (form) {
                addOverlay();
                form.submit();
            }
        });
    });
    
    $(document).on('click', '.action_btn_new', function() {
        var user_id = $(this).data('id');
        $('#session_id').val(user_id);
        $("#exampleModal").modal('show');
    });

    function close_modal(){
        $("#exampleModal").modal('hide');   
    }
</script>
@endsection