@extends('admin.layouts.master')
@section('title', 'All Numbers')
@section('script_css')
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid 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-2">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Numbers</h5>
                <!--end::Page Title-->
            </div>
            <!--end::Toolbar-->
        </div>
    </div>

    @include('admin.layouts.flash_messages')

    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--end::Notice-->
            <!--begin::Card-->
            <div class="card card-custom">
                <div class="card-header">
                    <div class="card-title">
                        <h3 class="card-label">All Numbers</h3>
                    </div>
                    <div class="card-toolbar">
                        <a href="{{ route('admin.number.create') }}" class="btn btn-primary font-weight-bolder mr-2">
                            <span class="svg-icon svg-icon-md">
                                <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" opacity="0.3" cx="12" cy="12" r="10" />
                                        <path d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,13 L13,13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z" fill="#000000" />
                                    </g>
                                </svg>
                            </span>
                            Buy a Number
                        </a>
                        {{--
                        <a href="{{ route('admin.number.twilio.numbers') }}" class="btn btn-primary font-weight-bolder">
                            <span class="svg-icon svg-icon-md">
                                <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" opacity="0.3" cx="12" cy="12" r="10" />
                                        <path d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,13 L13,13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z" fill="#000000" />
                                    </g>
                                </svg>
                            </span>
                            Twilio Numbers
                        </a>
                        --}}
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-responsive table-head-custom table-checkable" id="table">
                        <thead>
                            <tr>
                                <th>Sr #</th>
                                <th style="width:25%;">Phone Number</th>
                                <th style="width:25%;">Friendly Name</th>
                                <th style="width:18%;">Status</th>
                                <th style="width:18%;">Created At</th>
                                <th style="width:18%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $counter = 0 @endphp
                            @foreach($numbers as $number)

                            <tr>
                                <td>{{ ++$counter }}</td>
                                <td>{{ $number->phone_number }}</td>
                                <td>{{ $number->friendly_name }}</td>
                                <td>
                                    @if($number->free)
                                    <span class="badge badge-pill badge-info">&nbsp;&nbsp; Free &nbsp;&nbsp;</span>
                                    @else
                                    <span class="badge badge-pill badge-warning"> In-use </span>
                                    @endif
                                </td>
                                <td>{{ $number->created_at }}</td>
                                <td>
                                    <a href="{{ route('admin.number.edit', $number->id) }}"><i class="la la-pencil text-primary"></i></a>
                                    <a href="#" onclick="return VerifyDelete({{ $number->id }});"><i class="la la-trash text-danger"></i></a>
                                    <form id="delform{{$number->id}}" action="{{ route('admin.number.destroy', $number->id) }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </td>
                            </tr>

                            @endforeach
                        </tbody>
                    </table>
                    <!--end: Datatable-->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
</div>
@endsection
@section('script_js')

<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#table').DataTable();
    });

    function VerifyDelete(id) {
        if (confirm("Are You Sure You want to Delete")) {
            event.preventDefault();
            document.getElementById('delform' + id).submit();
        }
    }
</script>
@endsection