Viewing file:  overview.blade.php (14.23 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title','Overview | SmsBox')
@section('extra-css')
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<script>
let orderDataTable = '';
</script>
<style>
.custom-dp-for-ov{
left: -22px!important;
}
</style>
@endsection
@section('content')
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-5">
<h2 class="card-title">@lang('customer.messages')</h2>
</div>
<div class="col-lg-7">
<a href="{{route('customer.smsbox.compose')}}" class="btn btn-info float-right ml-2 d-none" type="button">New</a>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle drop-btn float-right" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-filter"></i> Filter
</button>
<div class="dropdown-menu custom-dp-for-ov pull-left" aria-labelledby="dropdownMenuButton">
<form method="get" id="filtering-form">
<div class="row m-3">
<div class="col-lg-6">
<div class="form-group">
<label for="confirm_message">@lang('customer.from_time')</label>
<input type="date" value="{{request()->get('from_date')}}" name="from_date" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="confirm_message">@lang('customer.to_time')</label>
<input type="date" value="{{request()->get('to_date')}}" name="to_date" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="type">@lang('customer.type')</label>
<select class="form-control" name="type" id="compose_type">
<option selected value="" >@lang('customer.select_type')</option>
<option {{request()->get('type') == 'inbox'?'selected':''}} value="inbox">Inbox</option>
<option {{request()->get('type') == 'sent'?'selected':''}} value="sent">Sent</option>
<option {{request()->get('type') == 'trash'?'selected':''}} value="trash">Trash</option>
<option {{request()->get('type') == 'draft'?'selected':''}} value="draft">Draft</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group {{request()->get('type') != 'sent'?'d-none':''}}" id="sent_status">
<label for="status">@lang('customer.status')</label>
<select class="form-control" name="status">
<option {{request()->get('status') == 'pending'?'selected':''}} value="pending">Pending</option>
<option {{request()->get('status') == 'succeed'?'selected':''}} value="succeed">Succeed</option>
<option {{request()->get('status') == 'failed'?'selected':''}} value="failed">Failed</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="select_device">@lang('customer.select_any_device')</label>
<select class="form-control" name="select_device" id="select_device">
@if($devices->isNotEmpty())
<option selected value="">@lang('customer.select_any_device')</option>
@foreach($devices as $device)
<option data-sim="{{$device->sim_info}}" value="{{$device->id}}">{{$device->name}}</option>
@endforeach
@else
<option selected disabled>@lang('customer.no_data_available')</option>
@endif
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group d-none" id="sim">
<label for="sim">@lang('customer.sim')</label>
<select class="form-control sim-info" name="sim_name">
</select>
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-primary float-right">Submit</button>
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn drop-btn btn-danger float-right mr-2" data-toggle="modal" data-target="#bulkDeleteModal"><i class="fa fa-times mr-2"></i>Delete</button>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-body filter-table">
<table id="overview_list" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>@lang('customer.time')</th>
<th>@lang('customer.message')</th>
<th>@lang('customer.from')</th>
<th>@lang('customer.to')</th>
<th>@lang('customer.type')</th>
<th>@lang('customer.status')</th>
<th>@lang('customer.action')</th>
</tr>
</thead>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="bulkDeleteModal" tabindex="-1" role="dialog" aria-labelledby="bulkDeleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bulkDeleteModalLabel">{{trans('customer.bulk_delete')}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{route('customer.smsbox.bulk.delete')}}" method="post">
@csrf
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="inbox" value="yes" id="flexCheckInbox">
<label class="form-check-label" for="flexCheckInbox">
Inbox
</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sent" value="yes" id="flexCheckSent">
<label class="form-check-label" for="flexCheckSent">
Sent
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger">{{trans('customer.delete')}}</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@section('extra-scripts')
<script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script !src="">
"use strict";
const queryString=window.location.search;
orderDataTable = $('#overview_list').DataTable({
processing: true,
serverSide: true,
responsive:true,
ajax: {
"url": '{{route('customer.smsbox.overview.get.data')}}'+queryString,
"dataSrc": "data",
"type": "GET",
"data": function(d){
d.form = $("#filtering-form").serializeArray();
}
},
columns: [
{ "data": "updated_at" },
{ "data": "body"},
{ "data": "from" },
{ "data": "to" },
{ "data": "type" },
{ "data": "status" },
{ "data": "action" },
],
fnInitComplete: function(oSettings, json) {
$(".show-more").css('overflow', 'hidden').readmore({collapsedHeight: 20,moreLink: '<a href="#">More</a>',lessLink: '<a href="#">Less</a>'});
}
});
</script>
<script>
$('#compose_type').change(function(e) {
const type = $('#compose_type').val();
if(type == 'sent'){
$('#sent_status').removeClass('d-none');
}else {
$('#sent_status').addClass('d-none');
}
});
$(".show-more").css('overflow', 'hidden').readmore({collapsedHeight: 20});
$(".show-more-message").css('overflow', 'hidden').readmore({collapsedHeight: 20});
</script>
<script>
$('#select_device').change(function(e) {
const device = $('#select_device').val();
if(device){
$('#sim').removeClass('d-none');
}else {
$('#sim').addClass('d-none');
}
});
$(".show-more").css('overflow', 'hidden').readmore({collapsedHeight: 20});
$(".show-more-message").css('overflow', 'hidden').readmore({collapsedHeight: 20});
</script>
<script>
$('#select_device').on('change', function (e) {
e.preventDefault();
let sim_info = $('option:selected', this).attr('data-sim');
if (sim_info) {
sim_info = JSON.parse(sim_info);
if (sim_info && typeof sim_info == 'object') {
let options = '';
for (let sim of sim_info) {
let singleSimInfo = sim.split(':');
options += `<option value="${sim}">${singleSimInfo[2]} (SIM ${parseInt(singleSimInfo[0])+1})</option>`
}
$('.sim-info').html(options);
}
}
})
</script>
@endsection
|