{{------------------------------------------ Template ------------------------------------------}}
@extends('admin.template.template')
{{------------------------------------------- Title --------------------------------------------}}
@section('title')
<title>Admin | {{ config('app.name') }}</title>
@endsection
{{------------------------------------------ page-css ------------------------------------------}}
@section('page-css')
@endsection
{{------------------------------------------- navbar -------------------------------------------}}
@section('navbar')
  @include('admin.template.navbar')
@endsection
{{------------------------------------------ subtitle ------------------------------------------}}
@section('subtitle')
            <h1 class="m-0">Video</h1>
@endsection
{{----------------------------------------- Breadcrumb -----------------------------------------}}
@section('breadcrumb')
            <li class="breadcrumb-item"><a href="{{asset('/admin')}}">Administrator</a></li>
            <li class="breadcrumb-item"><a href="#">Post</a></li>
            <li class="breadcrumb-item active"><a href="{{asset('/video')}}">Video</a></li>
@endsection
{{------------------------------------------ Content ------------------------------------------}}
@section('content')

        <!-- Default box -->
        <div class="card">
          <div class="card-header">
            <a class="btn btn-success btn-sm" href="javascript:void(0)" id="create_btn"><i class="fas fa-plus-square"></i></a>
          </div>
          <div class="card-body">
            <!-- Table -->
            <table class="table table-bordered table-sm data-table" cellspacing="0" width="100%">
                <thead class="bg-secondary text-white">
                    <tr>
                        <th>#</th>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Category</th>
                        <th>Url</th>
                        <th>Readed</th>
                        <th>Create at</th>
                        <th>Update at</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>  
          </div>
          <!-- /.card-body -->
          <div class="card-footer">
            &nbsp;
          </div>
          <!-- /.card-footer-->
        </div>
        <!-- /.card -->

        <!-- ModalCreate -->
        <div class="modal fade" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <form action="{{ route('video.store') }}" method="POST" id="video_form" name="video_form" enctype="multipart/form-data">
                <input type="hidden" name="_method" id="_method" value="POST">
                <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                <div class="modal-header">
                  <h5 class="modal-title" id="title_modal"></h5>
                  <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="mb-3">
                      <label for="productunit" class="form-label">ID</label>
                      <input type="text" class="form-control" id="id" name="id" placeholder="Input Code" Readonly>
                      <span class="text-danger error-text id_err"></span>
                  </div>
                  <div class="mb-3">
                      <label for="title" class="form-label">Title</label>
                      <input type="text" class="form-control" id="title" name="title" placeholder="Input Title">
                      <span class="text-danger error-text title_err"></span>
                  </div>
                  <div class="mb-3">
                        <label for="category" class="form-label mt-2">Category</label>
                        <select class="form-select" id="category" name="category[]" multiple="multiple">
                        <option value="">Please select one option</option> 
                        <option value="Profile">Profile</option> 
                        <option value="Kegiatan">Kegiatan</option> 
                        <option value="Umum">Umum</option> 
                        </select>
                        <span class="text-danger error-text category_err"></span>
                    </div>
                    <div class="mb-3">
                        <label for="url" class="form-label mt-2">Url</label>
                        <textarea class="form-control" rows="2" id="url" name="url" placeholder="Input Url"></textarea>
                        <span class="text-danger error-text url_err"></span>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label mt-2">Description</label>
                        <textarea class="form-control" rows="3" id="description" name="description" placeholder="Input Description"></textarea>
                        <span class="text-danger error-text description_err"></span>
                    </div>
                    <div class="mb-3">
                        <label for="readed" class="form-label mt-2">Readed</label>
                        <input type="text" class="form-control" id="readed" name="readed" placeholder="Input Readed">
                        <span class="text-danger error-text readed_err"></span>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                  <button type="submit" class="btn btn-primary" id="save_btn" value="">Save</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </form>
            </div>
          </div>
        </div>
@stop
{{------------------------------------------ Page js ------------------------------------------}}
@section('page-js')
<script type="text/javascript">
    $(function(){
        //<!----------------------------- Start Page Configuration ----------------------------->
        $.ajaxSetup({headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

        //<!-- Function Validation -->
        function printErrorMsg(msg) {
            $.each( msg, function( key, value ) {
            console.log(key+' | '+value);
            $('.'+key+'_err').text(value);
            $('#'+key).addClass( "is-invalid" );
            });
        }

        //<!-- Clear Form -->
        function ClearForm() {
            $('#video_form')[0].reset();
            $('#category').data('selectize').setValue('');
            $('#_method').val('POST');
        }

        //Clear is Invalid
        function ClearInvalid() {
            $(".form-control").removeClass("is-invalid");
            $('.error-text').text('');
        }

        //<!-- Button Create -->
        $('#create_btn').click(function () {
            ClearForm();
            ClearInvalid();
            $('#video_modal').modal('show');
            $('#title_modal').html("Create");
            $('#video').focus()
            $('#save_btn').val('create');
        });
        
        $('.form-select').selectize();

        //<!----------------------------- End Page Configuration ----------------------------->

        //<!----------------------------- Start Table ----------------------------->
        //<!-- Table -->
        var table = $('.data-table').DataTable({
            responsive: true, 
            processing: true,
            serverSide: true,
            ajax: "{{ route('video.index') }}",
            columns : [
                {data:'DT_RowIndex',name:'DT_RowIndex'},
                {data:'id',name:'id'},
                {data:'title',name:'title'},
                {data:'xcategory',name:'xcategory'},
                {data:'url',name:'url'},
                {data:'readed',name:'readed'},
                {data:'created_at',name:'created_at'},
                {data:'updated_at',name:'updated_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            columnDefs: [
                {
                targets     : 0, // first column
                className   : 'dt-body-center',
                width       : '60px'
                },
                {
                targets     : 1, // first column
                className   : 'dt-body-center',
                width       : '60px'
                },
                {
                targets     : 5, // menu column
                className   : 'dt-body-center',
                width       : '100px'
                },
                {
                targets     : [6,7], // menu column
                className   : 'dt-body-center',
                width       : '120px'
                },
                {
                targets     : 8, // menu column
                className   : 'dt-body-center',
                width       : '100px'
                },
            ],
        });
        //<!----------------------------- End Table ----------------------------->

        //<!----------------------------- Start Submit ----------------------------->
        $('#video_form').submit(function(e) {
            e.preventDefault();
            ClearInvalid();
            //<!----------------------------- Start Upadate ----------------------------->
            if($('#save_btn').val()  =='create'){
                let formData = new FormData(this);
                $.ajax({
                    type:'POST',
                    url: "{{ route('video.store') }}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if ($.isEmptyObject(data.error)) {
                            $('#video_form').trigger("reset");
                            $('#video_modal').modal('hide');
                            table.draw();
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Data created successfully!',
                            showConfirmButton: false,
                            timer: 1500
                            });
                        } else {
                            printErrorMsg(data.error)
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });
            }
            //<!----------------------------- End Upadate ----------------------------->
            //<!----------------------------- Start Upadate ----------------------------->
            else if($('#save_btn').val() =='update'){
                var id = $('#id').val();
                var urlupdate = '{{ route("video.update", ":id") }}';
                urlupdate = urlupdate.replace(':id', id);
                let formData = new FormData(this);
                $.ajax({                    
                    type:'POST',
                    url: urlupdate,
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if ($.isEmptyObject(data.error)) {
                            $('#video_form').trigger("reset");
                            $('#video_modal').modal('hide');
                            table.draw();
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Data updated successfully!',
                            showConfirmButton: false,
                            timer: 1500
                            });
                        }else{
                            printErrorMsg(data.error)
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                }); 
            }
            //<!----------------------------- End Upadate ----------------------------->
        });
        //<!----------------------------- End Submit ----------------------------->

        //<!----------------------------- Start Edit ----------------------------->
        $('body').on('click', '.edit', function () {
            ClearInvalid();
            $('#save_btn').val('update');
            $('#_method').val('PUT');
            var id = $(this).data('id');
            var urledit = '{{ route("video.edit", ":id") }}';
            urledit = urledit.replace(':id', id);
            $.get(urledit, function (data) {
                $('#video_modal').modal('show');
                $('#id').val(data.id);
                $('#title').val(data.title);
                $('#category').data('selectize').setValue(data.category);
                $('#url').val(data.url);
                $('#description').val(data.description);
                $('#readed').val(data.readed);
                $('#title_modal').html("Edit");
                
            })
        });
        //<!----------------------------- End Submit ----------------------------->

        //<!----------------------------- Start Delete ----------------------------->
        $('body').on('click', '.delete', function (){
            var id = $(this).data("id");
            var urldestroy = '{{ route("video.destroy", ":id") }}';
            urldestroy = urldestroy.replace(':id', id);
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "DELETE",
                        url: urldestroy,
                        success: function (data) {
                            table.draw();
                            Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Data deleted successfully!',
                            showConfirmButton: false,
                            timer: 1500
                            });
                        },
                        error: function (data) {
                            console.log('Error:', data);
                        }
                    });
                }
            })
        });
        //<!----------------------------- End Submit ----------------------------->
    });
</script>
@endsection