@extends('layouts.app')
@section('title',Str::title($page->title))
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">{{ Str::title($page->title) }}</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                            <li class="breadcrumb-item active">{{ Str::title($page->title) }}</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- Info boxes -->
                <div class="row">
                    <div class="col-12 text-right mb-3">
                        <div class="card">
                            <div class="card-body">
                                {!! Form::open(['url' => $page->link, 'method' => 'POST','class'=>'form-horizontal','id'=>'filter-form']) !!}
                                <div class="row">
                                    <label class="col-sm-1 px-0 col-form-label">Filter By: </label>
                                    <div class="col-sm-2">
                                        {!! Form::text('keyword', $request->keyword ?? '', ['class' => 'form-control','placeholder'=>'Keyword']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::text('start_date', $request->start_date ?? '', ['class' => 'form-control date-picker','placeholder'=>'From Date','id'=>'start_date','autocomplete'=>'off']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::text('end_date', $request->end_date ?? '', ['class' => 'form-control date-picker','placeholder'=>'To Date','id'=>'end_date','autocomplete'=>'off']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::select('sort',$page->sorts, $request->sort ?? '', ['class' => 'form-control','placeholder'=>'Sort By']) !!}
                                    </div>
                                    {!! Form::hidden('filter', '', ['id'=>'filter']) !!}

                                    <button class="btn btn-danger" id="filter-button"><i class="fas fa-search"></i>
                                    </button>
                                    <ul class="navbar-nav ml-2">
                                        <li class="nav-item dropdown">
                                            <a class="btn btn-dark" data-toggle="dropdown" href="#"
                                               aria-expanded="true">
                                                <i class="fas fa-cog"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"
                                                 style="left: inherit; right: 0px;">
                                                <span class="dropdown-item dropdown-header">Quick Filter</span>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('all')"
                                                   class="dropdown-item">All</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('today')"
                                                   class="dropdown-item">Today</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('week')"
                                                   class="dropdown-item">This Week (From start this week)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('month')"
                                                   class="dropdown-item">This Month (From start this month)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('year')"
                                                   class="dropdown-item">This Year (From start this year)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('lweek')"
                                                   class="dropdown-item">Week (Last 7 Days)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('lmonth')"
                                                   class="dropdown-item">Month (Last 30 Days)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('lyear')"
                                                   class="dropdown-item">Year (Last 365 Days)</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card card-danger card-outline">
                            <div class="card-header">
                                <h3 class="card-title">Prescriptions Lists</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body p-0 data-table-container">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="table-responsive p-3">
                                            <table class="table table-hover table-striped table-bordered data-tables"
                                                   data-url="{{ $page->link.'/lists' }}" data-form="filter"
                                                   data-length="25">
                                                <thead>
                                                <tr>
                                                    <th data-orderable="false">Patient name</th>
                                                    <th data-orderable="false">Patient address</th>
                                                    <th data-orderable="false">Medicine</th>
                                                    {{-- <th data-orderable="false">Sales</th> --}}
                                                    <th data-orderable="false">Revenue</th>
                                                    <th data-orderable="false">Options</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.table-responsive -->
                            </div>
                        </div>
                    </div>

                    <!-- /.col -->
                </div>
            </div><!--/. container-fluid -->
        </section>
        <!-- /.content -->
    </div>
@endsection
@push('page-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') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}">
@endpush
@push('page-js')
    <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="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>
    <script>
        $('.date-picker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayHighlight: true
        });

        function changeDates(value) {
            $('#filter').val(value);
            $('#filter-form').submit();
        }

    </script>
@endpush