@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-10">
                            @include('elements.admin-breadcrumb')
                        </div>
                        @can('admin.crm-contact.create')
                        <div class="col-2 text-end">
                            <a wire:navigate class="btn btn-primary" href="{{ route('admin.crm-contact.create') }}">
                                <i class="fa fa-plus"></i> {{ __('Add New') }}
                            </a>
                        </div>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    @include('elements.alert')

                    <ul class="nav nav-tabs mb-3" id="crmContactTabs" role="tablist">
                        <li class="nav-item"><a class="nav-link active filter-type" data-type="" href="#">All</a></li>
                        <li class="nav-item"><a class="nav-link filter-type" data-type="Student" href="#">Students</a></li>
                        <li class="nav-item"><a class="nav-link filter-type" data-type="Instructor" href="#">Instructors</a></li>
                        <li class="nav-item"><a class="nav-link filter-type" data-type="Prospect" href="#">Prospects</a></li>
                        <li class="nav-item"><a class="nav-link filter-type" data-type="Lead" href="#">Leads</a></li>
                    </ul>

                    <form class="mb-15" id="kt_crm_contact_delete" action="{{ route('admin.crm-contact.delete') }}" method="POST">
                        @csrf
                        <table class="table w-100 nowrap no-footer mb-3">
                            <tbody>
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-dark" id="kt_reset">Reset</button>
                                        <button class="btn btn-danger" id="kt_delete" style="display: none" type="submit">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table id="common_datatable" class="table table-striped w-100"
                            data-column="id,name,mobile,email,type,source,createdByName,created_at"
                            data-column-name="id,name,mobile,email,type,source,createdByName,created_at,actions"
                            data-extra-param="filter_type"
                            data-extra-param-name="type"
                            data-control="{{ route('admin.crm-contact.list') }}"
                            data-sorting="7" data-sorting-type="DESC"
                            data-serial-number="1" data-except-sorting-columns="8"
                            role="grid">
                            <thead>
                                <tr>
                                    <th><input class="form-check-input" type="checkbox" name="checkAll" id="checkAll"></th>
                                    <th>Name</th>
                                    <th>Mobile</th>
                                    <th>Email</th>
                                    <th>Type</th>
                                    <th>Source</th>
                                    <th>Created By</th>
                                    <th>Created On</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                        <input type="hidden" id="filter_type" value="">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).on('click', '.filter-type', function (e) {
        e.preventDefault();
        $('.filter-type').removeClass('active');
        $(this).addClass('active');
        $('#filter_type').val($(this).data('type'));
        if ($.fn.DataTable.isDataTable('#common_datatable')) {
            $('#common_datatable').DataTable().ajax.reload();
        }
    });
</script>
@endsection