@extends('layouts.master')

@section('styles')
    <link href="{{asset ('vendor/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="vendor/pickadate/themes/default.css">
    <link rel="stylesheet" href="vendor/pickadate/themes/default.date.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .th {
            text-align: center;
        }
        #example td {
            text-align: center;
        }
    </style>
@endsection

@section('content')
    <div class="content-body">
        <div class="container-fluid">
			<div class="row page-titles">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="javascript:void(0)">Table</a></li>
					<li class="breadcrumb-item active"><a href="javascript:void(0)">Datatable</a></li>
				</ol>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <button type="button" class="btn btn-primary btn-xs btn-right" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Tambah</button>
                            </div>
                                <table class="table-bordered" id="example" class="display" style="width:100%" >
                                    <thead>
                                        <tr>
                                            <th class="p-2" style="text-align: center;" width="3%">No.</th>
                                            <th style="text-align: center;">Jenis Produk</th>
                                            <th style="text-align: center;">Jumlah Hari</th>
                                            <th style="text-align: center;">Pola Member</th>
                                            <th style="text-align: center;">Jenis Kendaraan</th>
                                            <th style="text-align: center;">Jenis Langganan</th>
                                            <th style="text-align: center;">Tarif</th>
                                            <th style="text-align: center;">Periode</th>
                                            <th width="250" style="text-align: center;">Action</th>
                                        </tr>
                                    </thead>
                                    {{ json_encode($products) }}
                                    <tbody>
                                        @foreach ($products as $member)
                                            <tr>
                                                <td class="p-3">{{ $loop->index+1 }}</td>
                                                <td class="p-3">{{ $member->name }}</td>
                                                <td class="p-3">{{ $member->value }}</td>
                                                <td class="p-3">{{ $member->ismonth === true ? 'Kalender' : 'Relative' }}</td>
                                                <td class="p-3">{{ $member->nama }}</td>
                                                <td class="p-3">{{ $member->jenis_langganan }}</td>
                                                <td class="p-3">{{ $member->last_member }}</td>
                                                <td class="p-3">{{ $member->tgl_akhir }}</td>
                                                <td class="p-3"></td>
                                            </tr>
                                        @endforeach
                                        </tobdy>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
        </div>
    </div>
@endsection

@section('javascript')
    <!--********* Scripts *********-->
    <!-- Datatable -->
    <!--********* Scripts *********-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
    <script src="{{asset ('vendor/moment/moment.min.js') }}"></script>
    <script src="vendor/bootstrap-daterangepicker/daterangepicker.js"></script>
    {{-- <script src="{{asset ('vendor/datatables/js/jquery.dataTables.min.js') }}"></script> --}}
    {{-- <script src="{{asset ('vendor/datatables/responsive/responsive.js') }}"></script> --}}
	<script src="{{asset ('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
    {{-- <script src="{{asset ('vendor/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script> --}}
    {{-- <script src="{{asset ('vendor/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js') }}"></script> --}}
    <script src="{{asset ('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/3.0.7/metisMenu.min.js"></script>

    <script src="{{asset ('js/custom.min.js') }}"></script>
	<script src="{{asset ('js/dlabnav-init.js') }}"></script>
    <script src="{{asset ('js/member/index.js') }}"></script>
@endsection