@extends('layout.master')

@section('css')
<style>
    .btn.dropdown-toggle.btn-light.bs-placeholder,.bootstrap-select .dropdown-toggle .filter-option {
        text-transform: capitalize;
    }
</style>
@stop

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-header card-header-warning">
                            <a href="" class="btn btn-info round float-right export-to-excel" onclick="exportexcel()">Export To Excel</a>
                            <h4 class="card-title text-white">{{ 'Patients ' }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-3">
                                    <div class="form-group bmd-form-group">
                                        <select id="plan_type_filter" class="form-control selectpicker"
                                            data-actions-box="true" title="Filter List" data-size="5">
                                            <option value="" selected>All</option>
                                            <option value="planning_ivf">Planning (IVF)</option>
                                            <option value="planning_normal">Planning (Normal)</option>
                                            <option value="pregnant">Pregnant</option>
                                            <option value="delivered">Delivered</option>
                                            <option value="miscarriage">Miscarriage</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group bmd-form-group">
                                        <select id="three_day_activation_filter" class="form-control selectpicker"  data-actions-box="true" title="Filter List" data-size="5">
                                            <option value="" selected>All</option>
                                            <option value="1">Free Trail (Active)</option>
                                            <option value="3">Free Expired (Today)</option>
                                            <option value="0">Free Trail (Expired)</option>
                                            <option value="2">Paid Code</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table" id="dataTablePatientList" width="100%">
                                    <thead class="text-info">
                                        <tr>
                                            <th style="width:15%">Name</th>
                                            <th style="width:18%">Email</th>
                                            <th style="width:18%">Mobile Number</th>
                                            <th style="width:10%">Plan Type</th>
                                            <th style="width:10%">Account Type</th>
                                            <th style="width:10%">Status</th>
                                            <th style="width:30%">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation START -->
    <div class="modal fade" id="deletePatientAlertModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure want to delete this patient? If you remove this patient, then all patient details and
                    appointment details, associate doctor and trainer details, activity history will be removed. It's not
                    revertable
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">cancel</button>
                    <a href="#" id="deleteLink" class="btn btn-info">Delete</a>
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
    <style>
        .table-responsive {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        .bmd-form-group .form-control,
        .bmd-form-group label,
        .bmd-form-group input::placeholder {
            line-height: 3.5;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="url"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="tel"],
        input[type="number"],
        textarea.materialize-textarea {
            margin: 0 auto;
            padding: 0;
        }

        .activity_section .form-control[type="url"] {
            border-bottom: 1px solid #9e9e9e;
        }

        input.file-path::placeholder {
            line-height: 2;
        }

        textarea.form-control {
            border-bottom: 1px solid #9e9e9e;
        }

        .bootstrap-select {
            background-image: none !important;
            padding: 0 !important;
        }

    </style>
    <script>
        var patient_url = "{{ route('patients') }}";
        var update_pin_url = '{{ route("patients.update_pin") }}';
        var status_update_url = "{{ route('doctors.update_status') }}";

        function exportexcel(){
            var plantype=$('#plan_type_filter').val();
            var threedays=$('#three_day_activation_filter').val();
            var url = '{{ route("patients.export_patient_excel", ["three_day_filter"=>":three_day", "status_filter"=>":status" ]) }}';            
            url = url.replace(':status',(plantype !='' ? plantype : null)); 
            url = url.replace(':three_day',(threedays!='' ? threedays : null)); 
            $('.export-to-excel').attr("href",url);
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
    <script src="{{ asset('js/patient/index.js') }}" type="text/javascript"></script>
@stop