@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right">

            <span id="filter-result" class="p-t-15 m-r-5"></span> &nbsp;
            @if(hasAccessOf('leads')['is_write'])
            <a href="{{ route('leads.create') }}" class="btn btn-outline btn-success btn-sm">@lang('modules.lead.addNewLead') <i
                    class="fa fa-plus" aria-hidden="true"></i></a>
            @endif

            @if(hasAccessOf('leads')['is_read'])
            <a href="javascript:;" id="toggle-filter" class="btn btn-sm btn-inverse btn-outline toggle-filter"><i
                    class="fa fa-sliders"></i> @lang('app.filterResults')</a>
            @endif

            @if(hasAccessOf('leads')['is_write'])
            <a href="javascript:;" id="create-status" class="btn btn-success btn-outline btn-sm"><i class="fa fa-plus"></i>
                @lang('modules.tasks.addBoardColumn')</a>
            @endif
            <!--   <a href="{{ route('leads.index') }}" class="btn btn-outline btn-primary btn-sm">@lang('modules.leaves.tableView') </a> -->
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">@lang('app.menu.home')</a></li>
                <li class="active">@lang($pageTitle)</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/lobipanel/dist/css/lobipanel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/jquery-asColorPicker-master/css/asColorPicker.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
@endpush

@section('content')

    <div class="dash_panel">
        <div style="display: none;" id="ticket-filters">
            <form action="" id="filter-form" class="customCard m-b-15">
                <div class="row">
                    <div class="col-md-3">
                        <h5 class="m-t-0">@lang('app.selectDateRange')</h5>
                        <div class="input-daterange input-group m-t-5" id="date-range">
                            <input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')"
                                value="{{ \Carbon\Carbon::now()->timezone($global->timezone)->subDays(2)->format($global->date_format) }}" />
                            <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                            <input type="text" class="form-control" id="end-date" placeholder="@lang('app.endDate')"
                                value="{{ \Carbon\Carbon::now()->timezone($global->timezone)->format($global->date_format) }}" />
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h5 class="m-t-0">@lang('modules.tickets.chooseAgents')</h5>

                        <div class="form-group">
                            <select class="select2 form-control" id="assignedTo">
                                <option value="all">@lang('app.all')</option>
                                @foreach ($leadAgents as $emp)
                                    <option value="{{ $emp->id }}">{{ ucwords($emp->user->name) }} @if ($emp->user->id == $user->id)
                                            (YOU)
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="">Client Name</label>
                            <input type="text" name="name" id="name" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3 ">
                        <div class="form-group">
                            <label class="">Job Title</label>
                            <input type="text" name="jobtitle" id="jobtitle" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3 ">
                        <div class="form-group" style="margin-top: 7px;">
                            <label>@lang('modules.lead.leadCategory')

                            </label>
                            <select class="select2 form-control" name="category_id" id="category_id"
                                data-style="form-control">
                                <option value="">@lang('messages.pleaseSelectCategory')</option>
                                @forelse($categories as $category)
                                    <option value="{{ $category->id }}">{{ ucwords($category->category_name) }}
                                    </option>
                                @empty
                                    <option value="">@lang('messages.noCategoryAdded')</option>
                                @endforelse

                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="">Profile Id</label>
                            @if (isset($fields))
                                @foreach ($fields as $field)
                                    @if ($field->type == 'select' && $field->id == '1')
                                        <select name="custom_fields_data[{{ $field->name }}_{{ $field->id }}]"
                                            class="form-control gender" id="profile_id" placeholder="Select">
                                            <option value="">Select</option>
                                            @foreach ($field->values as $key => $value)
                                                <option value="{{ $key }}"
                                                    {{ isset($editUser) && $editUser->custom_fields_data['field_' . $field->id] == $key ? 'selected' : '' }}>
                                                    {{ $value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                @endforeach
                            @endif

                        </div>
                    </div>

                    <div class="col-xs-12">
                        <div class="form-group d-flex justify-content-end align-items-center gap-2">
                            <button type="button" id="apply-filters" class="themeBtn">@lang('app.apply')</button>
                            <button type="button" id="reset-filters" class="themeBtnOutline">@lang('app.reset')</button>
                            <button type="button" class="themeBtnSoft toggle-filter">@lang('app.close')</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <form id="addColumn" class="ajax-form" method="POST">
            @csrf

            <div class="row" id="add-column-form" style="display: none;">
                <div class="col-md-12">
                    <hr>
                    <div class="form-group">
                        <label class="control-label required">@lang('modules.tasks.columnName')</label>
                        <input type="text" name="column_name" class="form-control">
                    </div>
                </div>
                <!--/span-->

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="required">@lang('modules.tasks.labelColor')</label><br>
                        <input type="text" class="colorpicker form-control" name="label_color" value="#ff0000" />
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group">
                        <button class="btn btn-success" id="save-form" type="submit"><i class="fa fa-check"></i>
                            @lang('app.save')</button>
                    </div>
                </div>
                <!--/span-->

            </div>
        </form>


        <form id="updateColumn" class="ajax-form" method="POST">
            @csrf
            <div class="row" id="edit-column-form" style="display: none;">



            </div>
            <!--/row-->
        </form>
  


    <div class="container-scroll">
        <div class="customCard m-b-15">
            <div class="text-right">
                <button id="toggle_fullscreen" class="btn btn-outline-secondary"><i
                    class="icon-size-fullscreen"></i></button>
            </div>
            <div class="row container-row">
            </div>
        </div>
    </div>
  </div>

    {{-- Ajax Modal --}}
    <div class="modal fade bs-modal-md in" id="leadStatusModal" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn blue">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{-- Ajax Modal Ends --}}

@endsection

@push('footer-script')
    <script src="{{ asset('plugins/bower_components/lobipanel/dist/js/lobipanel.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asColor.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asGradient.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/jquery-asColorPicker-master/dist/jquery-asColorPicker.min.js') }}">
    </script>
    <script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

    <script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>

    <!--slimscroll JavaScript -->
    <script src="{{ asset('js/jquery.slimscroll.js') }}"></script>

    <script>
        $('#add-column').click(function() {
            $('#add-column-form').toggle();
        })
        $(".select2").select2({
            formatNoMatches: function() {
                return "{{ __('messages.noRecordFound') }}";
            }
        });

        loadData();
        jQuery('#date-range').datepicker({
            toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true
        });
        // Colorpicker

        $(".colorpicker").asColorPicker();


        $('#apply-filters').click(function() {
            loadData();
        });
        $('#reset-filters').click(function() {
            $('.select2').val('all');
            $('.select2').trigger('change');

            $('#start-date').val('{{ $startDate }}');
            $('#end-date').val('{{ $endDate }}');
            $('#jobtitle').val('');
            $('#profile_id').val('');
            $('#category_id').val('');
            $('#name').val('');

            loadData();
        })

        $('.toggle-filter').click(function() {
            $('#ticket-filters').slideToggle();
        })

        function loadData() {
            var startDate = $('#start-date').val();

            if (startDate == '') {
                startDate = null;
            }

            var endDate = $('#end-date').val();

            if (endDate == '') {
                endDate = null;
            }

            var assignedTo = $('#assignedTo').val();
            var name = $('#name').val();
            var jobtitle = $('#jobtitle').val();
            var profile_id = $('#profile_id').val();
            var category_id = $('#category_id').val();

            var url = '{{ route('leads.kanbanboard') }}?startDate=' + encodeURIComponent(startDate) + '&endDate=' +
                encodeURIComponent(endDate) + '&assignedTo=' + assignedTo + '&name=' + name + '&jobtitle=' + jobtitle +
                '&profile_id=' + profile_id + '&category_id=' + category_id;

            $.easyAjax({
                url: url,
                container: '.container-row',
                type: "GET",
                success: function(response) {
                    console.log(response);
                    $('.container-row').html(response.view);
                    $("body").tooltip({
                        selector: '[data-toggle="tooltip"]'
                    });
                }
            })
        }

        $('body').on('click', '.edit-type', function() {
            var typeId = $(this).data('type-id');
            var url = '{{ route('lead-status-settings.edit', ':id') }}';
            url = url.replace(':id', typeId);

            $('#modelHeading').html("{{ __('app.edit') . ' ' . __('modules.lead.leadStatus') }}");
            $.ajaxModal('#leadStatusModal', url);
        })


        $('#create-status').click(function() {
            var url = '{{ route('leadSetting.createModal') }}';

            $('#modelHeading').html("{{ __('app.add') . ' ' . __('modules.lead.leadStatus') }}");
            $.ajaxModal('#leadStatusModal', url);
        })



        function toggleFilter() {
            $('#assignedTo').select2().trigger('change');
            $('#name').select2().trigger('change');
            $('#jobtitle').select2().trigger('change');
            $('#show-all-tasks').toggle();
            $('#my-tasks').toggle();
            loadData()
        }
    </script>

    <script>
        $('#toggle_fullscreen').on('click', function() {
            // if already full screen; exit
            // else go fullscreen
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement
            ) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                element = $('.container-scroll').get(0);
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }
        });
    </script>
@endpush