@extends('layouts.app')

@section('title', __('crm::lang.phone_list'))

@section('content')
@include('crm::layouts.nav')
<section class="content no-print crm-page crm-legacy-page">
    <div class="crm-page-header">
        <div>
            <h1><i class="fas fa-list-ol" style="color:#4f46e5;margin-left:8px;"></i> @lang('crm::lang.phone_list')</h1>
            <p class="crm-subtitle">@lang('crm::lang.phone_list_subtitle')</p>
        </div>
    </div>

    @component('components.filters', ['title' => __('report.filters')])
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('status_filter', __('sale.status') . ':') !!}
                    {!! Form::select('status_filter', $statuses, null, ['class' => 'form-control select2', 'id' => 'status_filter', 'placeholder' => __('messages.all')]); !!}
                </div>
            </div>
            @can('crm.access_all_leads')
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('assigned_to_filter', __('crm::lang.assgined') . ':') !!}
                    {!! Form::select('assigned_to_filter', $users, null, ['class' => 'form-control select2', 'id' => 'assigned_to_filter', 'placeholder' => __('messages.all')]); !!}
                </div>
            </div>
            @endcan
        </div>
    @endcomponent

    @component('components.widget', ['class' => 'box-primary', 'title' => __('crm::lang.phone_list')])
        @slot('tool')
            <div class="box-tools">
                <a href="{{ action([\Modules\Crm\Http\Controllers\PhoneListController::class, 'import']) }}" class="btn btn-sm btn-success pull-right m-5">
                    <i class="fa fa-file-import"></i> @lang('crm::lang.import_phone_list')
                </a>
                <button type="button" class="btn btn-sm btn-primary pull-right m-5 btn-modal"
                    data-href="{{ action([\Modules\Crm\Http\Controllers\PhoneListController::class, 'create']) }}"
                    data-container=".phone_list_modal">
                    <i class="fa fa-plus"></i> @lang('messages.add')
                </button>
            </div>
        @endslot
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="phone_list_table" style="width:100%;">
                <thead>
                    <tr>
                        <th>@lang('messages.action')</th>
                        <th>@lang('lang_v1.contact_no')</th>
                        <th>@lang('contact.name')</th>
                        <th>@lang('sale.status')</th>
                        <th>@lang('crm::lang.follow_up_count')</th>
                        <th>@lang('crm::lang.last_follow_up')</th>
                        <th>@lang('crm::lang.assgined')</th>
                        <th>@lang('crm::lang.lead')</th>
                        @if(config('constants.enable_crm_call_log'))
                        <th>@lang('crm::lang.call_log')</th>
                        @endif
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent

    <div class="modal fade phone_list_modal" tabindex="-1" role="dialog"></div>
    <div class="modal fade phone_list_view_modal" tabindex="-1" role="dialog"></div>
</section>
@endsection

@section('javascript')
@php
    $non_orderable_cols = config('constants.enable_crm_call_log') ? [0, 7, 8] : [0, 7];
@endphp
<script type="text/javascript">
$(document).ready(function() {
    phone_list_table = $("#phone_list_table").DataTable({
        processing: true,
        serverSide: true,
        scrollY: "75vh",
        scrollX: true,
        scrollCollapse: true,
        ajax: {
            url: "{{ action([\Modules\Crm\Http\Controllers\PhoneListController::class, 'index']) }}",
            data: function(d) {
                d.status = $('#status_filter').val();
                d.assigned_to = $('#assigned_to_filter').val();
            }
        },
        columnDefs: [{ targets: {!! json_encode($non_orderable_cols) !!}, orderable: false, searchable: false }],
        aaSorting: [[5, 'desc']],
        columns: [
            { data: 'action', name: 'action' },
            { data: 'mobile_number', name: 'mobile_number' },
            { data: 'contact_name', name: 'contact_name' },
            { data: 'status', name: 'status' },
            { data: 'follow_up_count', name: 'follow_up_count' },
            { data: 'last_follow_up_at', name: 'last_follow_up_at' },
            { data: 'assigned_user_name', name: 'assigned_user_name' },
            { data: 'lead_id', name: 'lead_id' },
            @if(config('constants.enable_crm_call_log'))
            { data: 'call_logs', name: 'call_logs', searchable: false, orderable: false },
            @endif
        ]
    });

    $(document).on('shown.bs.modal', '.phone_list_modal', function() {
        $(this).find('.select2').select2({ dropdownParent: $(this) });
    });

    $(document).on('change', '#status_filter, #assigned_to_filter', function() {
        phone_list_table.ajax.reload();
    });

    $(document).on('click', '.phone_list_view', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        $.ajax({ method: 'GET', url: url, dataType: 'html', success: function(result) {
            $('.phone_list_view_modal').html(result).modal('show');
        }});
    });

    $(document).on('click', '.phone_list_edit', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        $.ajax({ method: 'GET', url: url, dataType: 'html', success: function(result) {
            $('.phone_list_modal').html(result).modal('show');
        }});
    });

    $(document).on('click', '.phone_list_follow_up', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        $.ajax({ method: 'GET', url: url, dataType: 'html', success: function(result) {
            $('.phone_list_modal').html(result).modal('show');
        }});
    });

    $(document).on('click', '.phone_list_convert_lead', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        $.ajax({ method: 'GET', url: url, dataType: 'html', success: function(result) {
            $('.phone_list_modal').html(result).modal('show');
        }});
    });

    $(document).on('submit', 'form#phone_list_form, form#phone_list_edit_form, form#phone_follow_up_form, form#convert_phone_to_lead_form', function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        var method = form.find('input[name="_method"]').val() || 'POST';
        var data = form.serialize();
        var $submit = form.find('button[type="submit"]');
        $submit.attr('disabled', true);

        $.ajax({
            method: method,
            url: url,
            dataType: 'json',
            data: data,
            success: function(result) {
                if (result.success) {
                    toastr.success(result.msg);
                    $('.phone_list_modal').modal('hide');
                    phone_list_table.ajax.reload();
                    if (result.lead_url) {
                        setTimeout(function() { window.location.href = result.lead_url; }, 1000);
                    }
                } else {
                    toastr.error(result.msg);
                }
                $submit.attr('disabled', false);
            },
            error: function() {
                toastr.error(LANG.something_went_wrong);
                $submit.attr('disabled', false);
            }
        });
    });

    $(document).on('click', '.phone_list_delete', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        swal({ title: LANG.sure, icon: 'warning', buttons: true, dangerMode: true }).then(function(willDelete) {
            if (willDelete) {
                $.ajax({
                    method: 'DELETE',
                    url: url,
                    dataType: 'json',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function(result) {
                        if (result.success) {
                            toastr.success(result.msg);
                            phone_list_table.ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    }
                });
            }
        });
    });
});
</script>
@endsection