@extends('crm.layouts.master')
@section('title','Caller ID')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>Caller ID</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row pt-4">
        <div class="card table-overflow">
            <div class="card-body">
                <div class=" my-3 d-flex flex-wrap justify-content-between">
                    <h3>Change ANI Country Table</h3>
                    <button type="button" id="addRowModalButton" class="btn btn-primary rounded-3" data-toggle="modal"
                            data-target="#addRowModal">Add New Row
                    </button>
                </div>

                <table class="table" id="example">
                    <thead class="thead-primary">
                    <tr>
                        <th>Country Code</th>
                        <th>Name</th>
                        <th>Country Length</th>
                        <th>Default ANI Country</th>
                        <th>Default Length</th>
                    </tr>
                    </thead>
                    <tbody id="aniTableBody">
                    @foreach($caller_ids as $call)
                        <tr>
                            <td>{{$call->country_code}}</td>
                            <td>{{$call->name}}</td>
                            <td>{{$call->country_length}}</td>
                            <td>{{$call->default_ani_country}}</td>
                            <td>{{$call->default_length}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addRowModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRowModalLabel">Add New Row</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="addRowForm">

                    <div class="modal-body">

                        <div class="form-group">
                            <label for="addCountryCodeInput" class="my-2">Country Code:</label>
                            <input type="number" class="form-control" id="addCountryCodeInput" name="country_code"
                                   pattern="[0-9]*" title="Please enter only numbers" required>
                        </div>
                        <div class="form-group">
                            <label for="addNameInput" class="my-2">Name:</label>
                            <input type="text" class="form-control" id="addNameInput" maxlength="2" name="name">
                        </div>
                        <div class="form-group">
                            <label for="addCountryLengthInput" class="my-2">Country Length:</label>
                            <input type="number" class="form-control" id="addCountryLengthInput"
                                   name="country_length" pattern="[0-9]*" title="Please enter only numbers" required>
                        </div>
                        <div class="form-group">
                            <label for="addDefaultAniCountryInput" class="my-2">Default ANI Country:</label>
                            <input type="number" class="form-control" id="addDefaultAniCountryInput"
                                   name="default_ani_country" pattern="[0-9]*" title="Please enter only numbers"
                                   required>
                        </div>
                        <div class="form-group">
                            <label for="addDefaultLengthInput" class="my-2">Default Length:</label>
                            <input type="number" class="form-control" id="addDefaultLengthInput"
                                   name="default_length" pattern="[0-9]*" title="Please enter only numbers" required>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary px-4 rounded-5" data-dismiss="modal">Close
                        </button>
                        <button type="submit" id="saveRowButton" class="btn btn-primary px-4 rounded-5">Save Row</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="updateRowModal" tabindex="-1" role="dialog" aria-labelledby="updateRowModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateRowModalLabel">Update Row</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="updateRowForm">
                    <input type="hidden" id="old_country_code">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="updateCountryCodeInput" class="my-2">Country Code:</label>
                            <input type="text" class="form-control" id="updateCountryCodeInput"
                                   name="country_code" pattern="[0-9]*" title="Please enter only numbers">
                        </div>
                        <div class="form-group">
                            <label for="updateNameInput" class="my-2">Name:</label>
                            <input type="text" class="form-control" id="updateNameInput" maxlength="2" name="name">
                        </div>
                        <div class="form-group">
                            <label for="updateCountryLengthInput" class="my-2">Country Length:</label>
                            <input type="number" class="form-control" id="updateCountryLengthInput"
                                   name="country_length" pattern="[0-9]*" title="Please enter only numbers">
                        </div>
                        <div class="form-group">
                            <label for="updateDefaultAniCountryInput" class="my-2">Default ANI Country:</label>
                            <input type="number" class="form-control" id="updateDefaultAniCountryInput"
                                   name="default_ani_country" pattern="[0-9]*" title="Please enter only numbers"
                                   required>
                        </div>
                        <div class="form-group">
                            <label for="updateDefaultLengthInput" class="my-2">Default Length:</label>
                            <input type="number" class="form-control" id="updateDefaultLengthInput"
                                   name="default_length" pattern="[0-9]*" title="Please enter only numbers" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary px-4 rounded-5" data-dismiss="modal">Close
                        </button>
                        <button type="submit" id="updateButton" class="btn btn-primary px-4 rounded-5">Update Row</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('page-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            // $("#caller-idli").addClass("nav-active");
            $('#example').DataTable({
                "responsive": true, "lengthChange": true, "autoWidth": false,
                // "order": [[0, "desc"]]
                // dom: 'lBfrtip',
                // buttons: [
                //     'csv'
                // ]
            });
            $('#aniTableBody').on('click', 'tr', function () {
                var countryCode = $(this).find('td:nth-child(1)').text();
                var name = $(this).find('td:nth-child(2)').text();
                var countryLength = $(this).find('td:nth-child(3)').text();
                var defaultAniCountry = $(this).find('td:nth-child(4)').text();
                var defaultLength = $(this).find('td:nth-child(5)').text();

                $('#old_country_code').val(countryCode);
                $('#updateCountryCodeInput').val(countryCode);
                $('#updateNameInput').val(name);
                $('#updateCountryLengthInput').val(countryLength);
                $('#updateDefaultAniCountryInput').val(defaultAniCountry);
                $('#updateDefaultLengthInput').val(defaultLength);
                $('#updateRowModal').modal('show');
            });
        });
    </script>

@endsection