@extends('layout.main', [
'secondarySidebar' => false
])

@section('page_styles')

@stop

@section('content')
<div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
    <!--begin::Content-->
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="subheader py-3 py-lg-8 subheader-transparent" id="kt_subheader">
            <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                <div class="d-flex align-items-center mr-1">
                    <div class="d-flex align-items-baseline flex-wrap mr-5">
                        <h2 class="d-flex align-items-center text-dark font-weight-bold my-1 mr-3">Business</h2>
                    </div>
                </div>
                <div class="d-flex align-items-center flex-wrap">
                    {{--toolbar buttons--}}
                </div>
            </div>
        </div>
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <div class="container-fluid">
                <div class="card card-custom gutter-b">
                    <div class="card-header flex-wrap py-3">
                        <div class="card-title">
                            <h3 class="card-label">
                                Business List
                                <span class="d-block text-muted pt-2 font-size-sm">
                                    Centralized management for your businesses
                                </span>
                            </h3>
                        </div>
                        <div class="card-toolbar">
                            <!--begin::Dropdown-->
                            <div class="dropdown dropdown-inline mr-2">
                                <button type="button" class="btn btn-light-primary font-weight-bolder dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="svg-icon svg-icon-md">
                                        <!--begin::Svg Icon | path:assets/media/svg/icons/Design/PenAndRuller.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" />
                                                <path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3" />
                                                <path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000" />
                                            </g>
                                        </svg>
                                        <!--end::Svg Icon-->
                                    </span>Export</button>
                                <!--begin::Dropdown Menu-->
                                <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                                    <!--begin::Navigation-->
                                    <ul class="navi flex-column navi-hover py-2">
                                        <li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">Choose an option:</li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link">
                                                <span class="navi-icon">
                                                    <i class="la la-print"></i>
                                                </span>
                                                <span class="navi-text">Print</span>
                                            </a>
                                        </li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link">
                                                <span class="navi-icon">
                                                    <i class="la la-copy"></i>
                                                </span>
                                                <span class="navi-text">Copy</span>
                                            </a>
                                        </li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link">
                                                <span class="navi-icon">
                                                    <i class="la la-file-excel-o"></i>
                                                </span>
                                                <span class="navi-text">Excel</span>
                                            </a>
                                        </li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link">
                                                <span class="navi-icon">
                                                    <i class="la la-file-text-o"></i>
                                                </span>
                                                <span class="navi-text">CSV</span>
                                            </a>
                                        </li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link">
                                                <span class="navi-icon">
                                                    <i class="la la-file-pdf-o"></i>
                                                </span>
                                                <span class="navi-text">PDF</span>
                                            </a>
                                        </li>
                                    </ul>
                                    <!--end::Navigation-->
                                </div>
                                <!--end::Dropdown Menu-->
                            </div>
                            <!--end::Dropdown-->
                            <!--begin::Button-->
                            <!-- Button trigger modal -->

                            <button type="button" class="btn btn-primary" id="home-tab-1" data-toggle="modal" data-target="#phoneModal">
                                <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>
                                </span>New number
                            </button>


                            <!-- Modal -->


                        </div>
                    </div>
                    <div class="card-body">
                        <!--begin: Datatable-->
                        <table class="table table-bordered table-striped table-checkable" id="kt_datatable">
                            <thead>
                                <tr>
                                    <th>Business ID</th>
                                    <th>Created On</th>
                                    <th>Primary Contact</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>


                            </tbody>
                        </table>
                        <!--end: Datatable-->
                    </div>
                </div>

            </div>
        </div>
    </div>
    @include('layout.footer')
</div>
@stop


@section('page_modals')
<div class="modal fade" id="phoneModal" tabindex="-1" role="dialog" aria-labelledby="phoneModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="{{route('callanalytics.buynumber')}}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="phoneModalLabel">New Number</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @csrf

                    <div class="form-group">
                        <label for="phone">Search for a phone number</label>
                        <input type="text" class="form-control" id="phone" placeholder="+1234567890">
                    </div>
                    <div class="form-group">
                        <label for="available">Available Numbers</label>
                        <select id="optionsSelect" class="form-control" name="available">
                            @foreach($numbers as $number)
                            <option value="{{$number->phoneNumber}}">{{$number->phoneNumber}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="forward">Forward to:</label>
                        <input type="text" class="form-control" id="forward" name="forward" placeholder="+1234567890 (your number)">
                    </div>
                    <div class="form-group">
                        <label for="phone">Label the number:</label>
                        <input type="text" class="form-control" id="label" name="label" placeholder="X company, Y agent">
                    </div>
                    <div class="form-group">
                        <label for="type">Type</label>
                        <select id="typeSelect" class="form-control" id="typeSelect" name="type">
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- <button type="button" class="btn btn-danger mr-auto">Disable</button> -->
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="Add">
                </div>
            </div>
        </form>
    </div>
</div>
{{--Page modals--}}

@stop
@section('page_scripts')
<!--CUSTOM SCRIPTS-->
<script>
    $(function() {
        $('#kt_datatable').DataTable();
    });
    const phoneInput = document.getElementById('phone');
    const optionsSelect = document.getElementById('optionsSelect');

    let typingTimer;
    const doneTypingInterval = 500;

    phoneInput.addEventListener('input', async function() {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(await fetchNumbers, doneTypingInterval);
    });
    async function fetchNumbers() {
        const phoneNumber = phoneInput.value;
        const data = {
            search_text: phoneInput.value,
            _token: '{{@csrf_token()}}'
        };
        if (phoneInput != '' && phoneInput != null) {
            await fetch('/callanalytics/free-numbers', {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    optionsSelect.innerHTML = '';
                    data.forEach(number => {

                        const option = document.createElement('option');
                        option.value = number;
                        option.textContent = number;
                        optionsSelect.appendChild(option);
                    });
                })
                .catch(error => {
                    console.log('Error fetching data:', error);
                });
        }
    }
    const optionsData = [
    {
        name: 'Google Ads',
        value: 'Google'
    },
    {
        name: 'Facebook Ads',
        value: 'Facebook'
    },
    {
        name: 'Instagram Ads',
        value: 'Instagram'
    },
    {
        name: 'LinkedIn Ads',
        value: 'LinkedIn'
    },
    {
        name: 'Twitter Ads',
        value: 'Twitter'
    },
    {
        name: 'YouTube Ads',
        value: 'YouTube'
    },
    {
        name: 'Organic Search',
        value: 'Organic Search'
    },
    {
        name: 'Direct Traffic',
        value: 'Direct Traffic'
    },
    {
        name: 'Referral Websites',
        'value': 'Referral Websites'
    },
    {
        name: 'Email Campaigns',
        value: 'Email Campaigns'
    },
    {
        name: 'Print Ads',
        value: 'Print'
    },
    {
        name: 'Radio Ads',
        value: 'Radio Ads'
    },
    {
        name: 'TV Ads',
        value: 'TV Ads'
    },
    {
        name: 'Billboard Ads',
        value: 'Billboard Ads'
    },
    {
        name: 'Social Media (non-advertising)',
        value: 'Social Media (non-advertising)'
    },
    {
        name: 'Partner Websites',
        value: 'Partner Websites'
    },
    {
        name: 'Affiliate Marketing',
        value: 'Affiliate Marketing'
    },
    {
        name: 'SMS Campaigns',
        value: 'SMS Campaigns'
    },
    {
        name: 'QR Codes',
        value: 'QR Codes'
    },
    {
        name: 'Mobile Apps',
        value: 'Mobile Apps'
    }
];


    const typeSelect = document.getElementById('typeSelect');

    optionsData.forEach(optionValue => {
        const option = document.createElement('option');
        option.value = optionValue.value;
        option.textContent = optionValue.name;
        typeSelect.appendChild(option);
    });
</script>
@stop