@extends('layouts.app')
@section('title', 'Sms List')
@section('content')
<style>
  .word-wrap {
    word-wrap: break-word;
    word-break: break-all;
  }
</style>

<section class="content">
			<div class="row">			  
				<div class="col-lg-12 col-12">
					    <div class="box"> 
                            <div id="preloader"style="display:none;">
                                <div id="preloader-status">
                                    <img  src="assets/images/loader-30px.gif">
                                </div>  
                            </div>                          
							<div class="box-body">
								<h4 class="box-title text-info mb-0"><i class="fa fa-edit me-15"></i> Delete Sms</h4>

								<hr class="my-15">
                                <div class="row">
                                        <form method="get">
                                            @csrf
                                            <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="form-label">Phone No</label>
                                                            <div class="input-group mb-3">
                                                                <span class="input-group-text"><i class="ti-mobile"></i></span>
                                                                <input type="text" class="form-control" placeholder="Enter Phone Number" type="" name="number" value="{{ request()->input('number') }}" id="number" maxlength="" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="form-label">Cli</label>
                                                            <div class="input-group mb-3">
                                                                <span class="input-group-text"><i class="ti-mobile"></i></span>
                                                                <input type="text" class="form-control" placeholder="Enter Cli"  type="" name="cli" value="{{ request()->input('cli') }}" id="cli" maxlength=""required >
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="form-label">Limit</label>
                                                            <div class="input-group mb-3">
                                                                <span class="input-group-text"><i class="ti-user"></i></span>
                                                                <!-- <input type="text" class="form-control"  type="" name="limit" value="{{ request()->input('limit') }}" id="limit" maxlength="" > -->
                                                                <select name="limit" class="form-select" id="limit">
                                                                    <option value="10" {{ request()->input('limit') == '10' ? 'selected' : '' }}>10</option>
                                                                    <option value="20" {{ request()->input('limit') == '20' ? 'selected' : '' }}>20</option>
                                                                    <option value="30" {{ request()->input('limit') == '30' ? 'selected' : '' }}>30</option>
                                                                    <option value="40" {{ request()->input('limit') == '40' ? 'selected' : '' }}>40</option>
                                                                    <option value="50" {{ request()->input('limit') == '50' ? 'selected' : '' }}>50</option>
                                                                </select>

                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                            
                                </div>                    
                            </div>
                          	<!-- /.box-body -->
							<div class="box-footer text-end"style="margin-right:15px;">
                                <button type="submit" name="submit"   value="Search" class="btn btn btn-primary waves-effect waves-light"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                                </form>    
                                <button type="button"  class="btn btn-danger waves-effect waves-light m-l-10" id="delete-sms"> <i class="fa fa-trash-o"></i> Delete</button>                                     
							</div>  
                        </div>               
						
				</div>
					  <!-- /.box -->			
            </div>  

		
            <div class="row"> 
            <div class="col-lg-12 col-12">
                <div class="box">
                <div class="box-body">           
                    <div class="table-responsive">
                    <table id="tickets" class="table mt-0 table-hover no-wrap did_list_table" data-page-size="10">
                        <thead>
                        <tr>
                                    <th>id</th>
                                    <th>Sms id</th>
                                    <th>Cli</th>
                                    <th>Number</th>
                                    <th>Text </th>                       
                                    <th>Message Type</th>                       
                                    <th>Status</th>                       
                                    <th>Time</th>                       
                                    <th>Action </th>                       

                                </tr>
                        </thead>
                        <tbody>
                        @foreach($cli_list as $k => $list)
                        <tr>
                            <td>{{ $k + 1 }}</td>
                            <td>{{ $list->sms_id }}</td>
                            <td>{{ $list->cli }}</td>
                            <td>{{ $list->number }}</td>
                            <td>{{ $list->text }}</td>
                            <td>{{ $list->messsage_type }}</td>
                            <td>{{ $list->status }}</td>
                            <td>  @php
                    echo \Carbon\Carbon::parse($list->time)->format('d-m-Y H:i');
                @endphp</td>
                            <td><a  type="button" data-bs-toggle="modal"  data-bs-target="#myModal-{{ $k }}"data-id="{{$k}}" class="list-icons-item me-10"><i class="fa fa-eye fa-lg"></i></a>
                            </td>
                            
                            <div id="myModal-{{ $k }}" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    
                    
                    <!-- /.box-header -->
                    <div class="box-body">
                    

                    <!-- form itself -->
                    <form id="test-form" class="mfp-hide white-popup-block">
                    <h4><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> Delete Sms <button style="padding: 5px 11px 5px 11px;" type="button" class="btn btn-danger float-end" data-bs-dismiss="modal">X</button></h4>
                    <hr>
                    <div class="row">
                    <div class="col-md-6">
                    <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputName">Sms id</label>
                        <p class="word-wrap"><span class="badge badge-md badge-primary">{{$list->sms_id}}<span></p>
                        </div>
                
                        <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputEmail">Number</label>
                        @if($list->number)
                        <p><span class="badge badge-md badge-primary">{{$list->number}}<span></p>
                        @else<p>-</p>
                        @endif
                        </div>
                        <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputPhone">Message Type</label>
                        @if($list->messsage_type)
                        <p class="word-wrap"><span class="badge badge-md badge-primary mobile">{{$list->messsage_type}}<span></p>
                        @else<p>-</p>
                        @endif
                        </div>
                        <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputPhone">Text</label>
                        @if($list->text)
                        <p class="word-wrap"><span class="badge badge-md badge-primary">{{$list->text}}<span></p>
                        @else<p>-</p>
                        @endif
                        </div>
                    
                    
                    </div>

                    <div class="col-md-6">
                    <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputName">Cli</label>
                        <p class="word-wrap"><span class="badge badge-md badge-primary">{{$list->cli}}<span></p>
                        </div>
                
                    
                    
                        <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputName">Status</label>
                        @if($list->status)
                        <p class="word-wrap"><span class="badge badge-md badge-primary">{{$list->status}}</span></p>
                        @else<p>-</p>
                        @endif
                        </div>
                        <div class="form-group">
                        <i style="color:black;" class="ti-mobile"></i> <label class="form-label" for="inputName">Time</label>
                    
                        @if($list->time)
                        <p class="word-wrap"><span class="badge badge-md badge-primary">@php
                    echo \Carbon\Carbon::parse($list->time)->format('d-m-Y H:i');
                @endphp</span></p>
                        @else<p>-</p>
                        @endif                              

                                                                
                        </div>
                    
                    
                    </div>
                    </div>

                        
                    </form>
                </div>
                    <!-- /.box-body -->
                    <!-- /.box -->
                    
                </div>
                <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            
                        </tr>
                    @endforeach
                        </tbody>
                                        
                    </table>

                    </div>

                </div>
                </div>
            </div>
            

            </div>
</section>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const phoneInput = document.getElementById('number');

        phoneInput.addEventListener('input', function (e) {
            let value = e.target.value.replace(/\D/g, '');
            let formattedValue = '';

            if (value.length > 10) {
                let frontDigits = value.slice(0, -10);
                let lastTenDigits = value.slice(-10);
                formattedValue = frontDigits + ' ' + formatLastTenDigits(lastTenDigits);
            } else {
                formattedValue = formatLastTenDigits(value);
            }

            e.target.value = formattedValue;
        });

        function formatLastTenDigits(digits) {
            if (digits.length === 0) {
                return '';
            } else if (digits.length <= 3) {
                return `(${digits}`;
            } else if (digits.length <= 6) {
                return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
            } else {
                return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
            }
        }
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const phoneInput = document.getElementById('cli');

        phoneInput.addEventListener('input', function (e) {
            let value = e.target.value.replace(/\D/g, '');
            let formattedValue = '';

            if (value.length > 10) {
                let frontDigits = value.slice(0, -10);
                let lastTenDigits = value.slice(-10);
                formattedValue = frontDigits + ' ' + formatLastTenDigits(lastTenDigits);
            } else {
                formattedValue = formatLastTenDigits(value);
            }

            e.target.value = formattedValue;
        });

        function formatLastTenDigits(digits) {
            if (digits.length === 0) {
                return '';
            } else if (digits.length <= 3) {
                return `(${digits}`;
            } else if (digits.length <= 6) {
                return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
            } else {
                return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
            }
        }
    });
</script>
<script>
   $(document).ready(function() {
    $('#delete-sms').on('click', function() {
        // alert('hlo');
        var number = $("#number").val();
        var cli = $("#cli").val();


        $.ajax({
            url: "{{ url('ai-setting/delete-sms') }}", // Your endpoint
            type: 'GET', // Request method
            data:
                {
                number: number,
                cli: cli,

                },
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val() // Include the CSRF token
            },
            success: function(response) {
                // Handle the success response here
                console.log(response);
                toastr.success('SMS deleted successfully.');  
                window.location.reload();              
            },
            error: function(xhr, status, error) {
                // Handle the error response here
                console.error(xhr.responseText);
                toastr.error('Failed to delete SMS. Please try again.');            }
        });
    });
});

    </script>
@endsection