@extends('layouts.main')

@section('page_css')
    <style>
        .time_off_option + .select2-container {
            display: block;
        }        
    </style>
@endsection

@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-supermarket text-primary"></i>
            </span>
            <h3 class="card-label">Teams</h3>
        </div>
        @if ($common->getLoggedInUserDetails()['guard'] == 'user' && $common->getLoggedInUserDetails()['role'] == 2)
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="javascript:;" onclick="openModalAndShow('{{ route('team.add.modal') }}')" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon svg-icon-md">
                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24" />
                        <circle fill="#000000" cx="9" cy="15" r="6" />
                        <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3" />
                    </g>
                </svg>
                <!--end::Svg Icon-->
            </span>Add Team</a>
            <!--end::Button-->
        </div>
        @endif
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Last Modified</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Teams</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection
@section('page_js')
    <script>
        var ajax_datatable_list = null;
        $(document).ready(function(){
            initializeDatatable();

            $(document).on('submit', '#team_form', function(e){
                e.preventDefault();
                var _that=$(this);
                var button=$(this).find('[type="submit"]');
                var loadingHtml=`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Processing`;
                var buttonHtml=$(button).html();
                $(button).prop('disabled', true).html(loadingHtml)

                $(".invalid-feedback").html('');
                $(".is-invalid").removeClass('is-invalid')
                $.ajax({
                    url : $(this).attr('action'),
                    type : 'post',
                    dataType : "json",
                    data : $(this).serialize(),
                    success: function(response) {
                        $(button).html(buttonHtml);
                        if(response.status){
                        if (response.message) {
                            toastr.success(response.message);
                        }
                        setTimeout(function() {
                            window.location.reload(true);
                        }, 3000);
                        
                        } else {
                        $(button).prop('disabled', false)
                        if (response.message) {
                            toastr.error(response.message);
                        }
                        if(response.errors){
                            Object.keys(response.errors).forEach(element_name => {
                                        var errors = response.errors[element_name];
                                        var inp=$(_that).find('[name="'+element_name+'"]')
                                        if(inp.length>0){
                                            $(inp).addClass('is-invalid')
                                            $(inp).closest('.form-group').find('.invalid-feedback').html(errors[0])
                                        }else{
                                            var name_ar= element_name.split('.')
                                            var newElName=`${name_ar[0]}[${name_ar[1]}][${name_ar[2]}]`;
                                            var inp=$(_that).find('[name="'+newElName+'"]')
                                            if(inp.length>0){
                                                $(inp).addClass('is-invalid')
                                                $(inp).closest('.col-md-5').find('.invalid-feedback').html(errors[0])
                                            }
                                        }
                                        
                            });
                        }
                        }
                
                    },
                    error: function(response) {
                        $(button).prop('disabled', false).html(buttonHtml);
                        if (response.message) {
                        toastr.error(response.message);
                        }
                    }
                });
            })
        })
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = $('#datatable').DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('teams.ajax')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.team_name
                        }
                    },
                   
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return moment(full.last_modified).tz('America/Chicago').format(moment_datetime_format);
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            html += `
                            <button class="btn btn-warning btn-sm"  onclick="openModalAndShow('${getWebUrl('teams-edit-modal/'+full.id)}')">Edit</button>
                            `;
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }
    </script>
@endsection