@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-users text-primary"></i>
            </span>
            <h3 class="card-label">Manage Template</h3>
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="javascript:;" class="menu-link btn btn-primary font-weight-bolder" onclick="openModalAndShow('{{ route('templateprofileschedule.teamschedule.add.modal') }}')">
            <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">
                        <polygon points="0 0 24 0 24 24 0 24"/>
                        <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                        <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                    </g>
                </svg>
                <!--end::Svg Icon-->
            </span>Create Template</a>
            <!--end::Button-->
        </div>
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Template Name</th>
                    <th>Team Name</th>
                    <th>Created</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">Manage Template</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="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        var ajax_datatable_list = null;
        $(document).ready(function(){
           initializeDatatable(); 
           $('body').tooltip({selector: '[data-toggle="tooltip"]'});
           $('body').on('click','.disable-profile', disableProfileHandler);

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif
            $('[data-toggle="tooltip"]').tooltip()

        })

        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('templateprofileschedule.ajax.list')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            return full.name;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.team_name;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.created_at;
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            
                            html += `
                            <a href="${getWebUrl('template-profile-schedule/team/'+full.team_id)}" class="btn btn-md btn-light-warning btn-icon btn-circle" data-toggle="tooltip" title="Edit Schedule Template"><i class="flaticon-edit-1"></i></a>
                            `;
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

        $(document).on('submit', '#template-team-form', function(e){
            e.preventDefault();
            var teamId = $('#team_selection_form_team_id').val();
            var template_name = $('#template_name').val();
            var button=$(this).find('[type="submit"]');
            var buttonHtml=$(button).html();
            if(teamId!='' && template_name!=''){
               //TODO AJAX
                $.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 = '/template-profile-schedule/team/'+teamId;
                            }, 3000);
                        }
                
                    },
                    error: function(response) {
                        $(button).prop('disabled', false).html(buttonHtml);
                        if (response.message) {
                        toastr.error(response.message);
                        }
                    }
                });
               //window.location = $(this).attr('action');
            }else{
                if(template_name==''){
                    $('#template_name').closest('.form-group').find('.invalid-feedback').html('Please select Name!');
                    $('#template_name').addClass('is-invalid');
                }else{
                    $('#template_name').removeClass('is-invalid');
                }
                
                if(teamId==''){
                    $('#team_selection_form_team_id').closest('.form-group').find('.invalid-feedback').html('Please select Team!');
                    $('#team_selection_form_team_id').addClass('is-invalid');
                }else{
                    $('#team_selection_form_team_id').removeClass('is-invalid');
                }
                
            }
        });
        
    </script>
@endsection