Skip to content

Instantly share code, notes, and snippets.

@bedus-creation

bedus-creation/index.blade.php

Created July 2, 2019 05:19
Download ZIP

Revisions

  1. bedus-creation created this gist Jul 2, 2019.
    144 changes: 144 additions & 0 deletions index.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,144 @@
    @extends('theme.limitless4.app')

    @section('head')

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    <style>
    td:not(:first-child) {
    text-align: center;
    }
    td:nth-child(6) {
    text-align: right;
    }
    div.dataTables_wrapper div.dataTables_length select {
    width: 100% !important;
    }
    .dataTables_processing {
    background: #2a3140 !important;
    color: #fff !important;
    }
    </style>
    @endsection


    @section('sidebar')
    @include('backend.'.auth()->user()->path().'.sidebar')
    @endsection


    @section('content')
    <div class="content-wrapper">
    <div class="content">
    @yield('success-error')
    <div class="page-header page-header-light mb-4" style="border: 1px solid #ddd;">
    <div class="page-header-content header-elements-inline">
    <div class="page-title">
    <h5>
    <i class="icon-list-unordered mr-2"></i>
    <span class="font-weight-bold">Payment Collection</span>
    </h5>
    </div>
    </div>
    </div>
    <div class="card card-body">
    <div class="row py-2">
    <div class="col-3">
    <input type="text" id="search" name="search" class="form-control" placeholder="Search">
    </div>
    <div class="offset-6 col-3">
    <div class="dropdown float-right">
    <a href="#" class="dropdown-toggle" data-target="#filter" data-toggle="collapse" aria-expanded="false">
    <i class="icon-filter4 icon-2x"></i>
    </a>
    <div id="filter" class="dropdown-menu dropdown-menu-right" style="width:340px">
    <div class="card-body">
    <div class="form-group row">
    <div class="col-12">
    <label>Date Filter</label>
    </div>
    <div class="col-6">
    <input type="date" id="start_date" class="form-control" value="{{now()->format('Y-m-01')}}">
    <small>Start Date</small>
    </div>
    <div class="col-6">
    <input type="date" id="end_date" class="form-control" value="{{now()->format('Y-m-d')}}">
    <small>End Date</small>
    </div>
    </div>
    <div class="form-group mb-0">
    <div class="my-2 d-flex justify-content-end align-items-center">
    <a href="#" class="text-danger font-weight-bold mx-2" data-target="#filter" data-toggle="collapse" aria-expanded="false">close</a>
    <button id="btn-apply-filter" class="btn btn-sm btn-primary">Apply Filter</button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="table-responsive">
    <table class="table datatable-basic table-sm table-custom-sm table-striped table-hover"
    style="width:100%">
    <thead>
    <tr>
    <th class="font-weight-bold text-right">Updated At</th>
    </tr>
    </thead>
    </table>
    </div>
    </div>
    </div>
    </div>
    {{-- @include('categories.job.modal.delete')
    @include('categories.job.modal.edit') --}}
    @endsection


    @section('scripts')
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script>
    var table = $('.datatable-basic').DataTable({
    searching: false,
    paging: false,
    "drawCallback": function (settings) {
    $('.dataTables_processing').css({
    'display': 'none !important'
    });
    },
    "processing": true,
    "order": [
    [0, "desc"]
    ],
    serverSide: true,
    ajax: {
    'url': "{{ url('api/payment-collection') }}",
    'data': function (data) {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    var search = $('#search').val();
    data.search = search;
    data.start_date = start_date;
    data.end_date = end_date;
    }
    },
    columns: [
    {
    data: 'updated_at'
    }
    ]
    });
    $('#search').keyup(function () {
    table.draw();
    });
    $('#btn-apply-filter').click(function () {
    table.draw();
    $('#filter').collapse('hide');
    });
    </script>

    @endsection