@extends('layouts.app')

@section('content')
    <section id="dom">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title-wrap bar-teal">
                            <h4 class="card-title">Team</h4>
                        </div>
                        <p class="card-text">Here you can see the list of existing Teams.</p>
                    </div>
                    <div class="card-body collapse show">
                        <div class="card-block card-dashboard table-responsive">
                            <table class="table table-striped table-bordered" id="dTable">
                                <thead>
                                    <tr>
                                        <th>Serial #</th>
                                        <th>Name</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- Modal --}}
    <div class="modal fade text-left" id="editDept" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Edit Team</h3>
                    <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="row">
                        <input type="hidden" class="form-control" name="id" id="id">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="name">Name: </label>
                                <input type="text" id="name" class="form-control border-primary" name="name">
                            </div>
                        </div>
                        @if (auth()->user()->role == Admin())
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="label-control">Unit</label>
                                    <select name="unit_id" id="unit_id" class="form-control border-primary">
                                    </select>
                                </div>
                            </div>
                        @else
                            <input type="hidden" id="unit_id" name="unit_id" value="{{ auth()->user()->unit_id }}">
                        @endif
                        @if (auth()->user()->role == Admin() || auth()->user()->department->name != Production())
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="label-control">Brand</label>
                                    <select name="brand_id[]" id="brand_id" multiple
                                        class="form-control border-primary"></select>
                                </div>
                            </div>
                        @endif



                        <div class="col-12">
                            <div class="form-group">
                                <label class="label-control">Users</label>
                                <select name="users[]" multiple id="users" class="form-control border-primary">
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-actions center pt-2">
                    <a href="{{ route('home') }}">
                        <button type="button" class="btn btn-danger mr-1">
                            <i class="icon-trash"></i> Cancel
                        </button>
                    </a>
                    <button type="submit" class="btn btn-raised btn-success updatebtn">
                        <i class="icon-note"></i> Update
                    </button>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('afterScript')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function() {
            var table = $('#dTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('team.get-list') }}',
                    type: 'GET',
                    dataType: "JSON",
                    error: function(reason) {
                        return true;
                    }
                },
                columns: [{
                        data: 'serial'
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'actions',
                        render: function(data, type, full, meta) {
                            return `<a class="success p-0 mr-2 viewBtn" title="Edit" data-id="${full.id}" data-type="${full.type}" data-name="${full.name}" data-valueOriginal="${full.valueOriginal}" data-value="${full.value}"  data-toggle="modal" data-keyboard="false" data-target="#editDept">
                                                <i class="ft-edit font-medium-3"></i>
                                            </a>
                                            <a href="#" id="${full.id}"class="danger p-0 mr-2 delete" title="delete" >
                                                <i class="ft-trash-2 font-medium-3"></i>
                                            </a>`;
                        }
                    }
                ],
                order: [0, 'desc'],
                columnDefs: [{
                        width: "10%",
                        "targets": [-1, 0]
                    },
                    {
                        orderable: false,
                        targets: [-1, -2]
                    }
                ],
            });

        });

        $(document).on('click', '.viewBtn', function() {
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'team/' + id + '/edit',
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#id').val(data[0].id);
                    $('#name').val(data[0].name);
                    if ($('#unit_id').attr('type') == 'hidden') {
                        $('#unit_id').val(data[0].unit_id);
                    } else {
                        $('#unit_id').append($(
                            `<option value="${data[0].unit_id}" selected="selected">${data[0].unit.name}</option>`
                        ))
                    }
                    $('#brand_id').html('');

                    if ($('#brand_id').length > 0) {
                        for (var i = 0; i < data[0].brands.length; i++) {
                            var brand = data[0].brands[i];
                            $('#brand_id').append($(
                                `<option value="${brand.b_id}" selected="selected">${brand.b_name}</option>`
                            ))
                        }
                    }
                    $('#users').html('');
                    for (var i = 0; i < data[0].users.length; i++) {
                        var user = data[0].users[i];
                        $('#users').append($(
                            `<option value="${user.id}" selected="selected">${user.name}</option>`
                        ))
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });

        $(document).on('click', '.updatebtn', function(e) {
            e.preventDefault();
            var id = $('#id').val();
            var name = $('#name').val();
            var unit_id = $('#unit_id').val();
            var data = {
                "id": id,
                "name": name,
                "unit_id": unit_id,
                "users[]": $('#users').val(),
            }

            if ($('#brand_id').length > 0) {
                data = {
                    "id": id,
                    "name": name,
                    "unit_id": unit_id,
                    "users[]": $('#users').val(),
                    "brand_id[]": $('#brand_id').val(),
                }
            }
            $.ajax({
                type: 'PUT',
                url: 'team/' + id,
                data,
                success: function(data) {
                    swal("Updated!", "Action has been performed successfully!", "success").catch(swal
                        .noop);
                    $('#dTable').DataTable().ajax.reload();
                    $('#editDept').modal('hide');
                },
                error: function(e) {
                    swal("Error!", e.responseJSON.message, "error");
                }
            });
        });

        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            var id = $(this).attr('id');
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#0CC27E',
                cancelButtonColor: '#FF586B',
                confirmButtonText: 'Yes, Delete it',
                cancelButtonText: "No, Cancel"
            }).then(function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: "/team/" + id,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function() {
                            $('#dTable').DataTable().ajax.reload();
                            swal("Deleted!", "Action has been performed successfully!",
                                "success");
                        }
                    });
                }
            }).catch(swal.noop);
        });

        @if (auth()->user()->role == Admin())
            $('#unit_id').select2({
                placeholder: "Search Unit",
                allowClear: true,
                ajax: {
                    url: "{{ route('unit.get-dropdown-list') }}",
                    type: "GET",
                    dataType: 'json',
                    data: function(params) {
                        return {
                            search: params.term
                        };
                    },
                    processResults: function(response) {
                        return {
                            results: response
                        };
                    },
                    cache: true
                }
            });
        @endif
        $('#users').select2({
            placeholder: "Search User",
            allowClear: true,
            ajax: {
                url: "{{ route('department.users.get-user') }}",
                type: "GET",
                dataType: 'json',
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(response) {
                    return {
                        results: response
                    };
                },
                cache: true
            }
        });

        $('#brand_id').select2({
            placeholder: "Search Brand",
            allowClear: true,
            ajax: {
                url: "{{ route('brand.get-brand') }}",
                type: "GET",
                dataType: 'json',
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(response) {
                    return {
                        results: response
                    };
                },
                cache: true
            }
        });
    </script>
@endsection