@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
    <style>
        .select2-container .select2-selection--single {
            height: 48px;
        }

        .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
            line-height: 38px;
        }

        .select2-container--default
        .select2-selection--single
        .select2-selection__arrow {
            height: 38px;
        }
        /* .table th {
            text-align: center;
        }
        .table td {
            text-align: right;
        } */
    </style>
@endsection

@section('content')
<!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-header">
                            </div>
                            <div class="card-body">
                                <form action="">
                                    <div class="row align-items-end g-3">
                                        <!-- CARI DATA -->
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label for="data">Cari Data</label>
                                                <input type="text" class="form-control" id="data" placeholder="Masukkan data">
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label>&nbsp;</label> <!-- biar sejajar -->
                                                <select class="form-control js-example-basic-single">
                                                    <option value="id" selected>No. ID</option>
                                                    <option value="no_pol">No. Pol</option>
                                                    <option value="no_barcode">No. Barcode/Card</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!-- TANGGAL -->
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label for="tanggalCari">Tanggal</label>
                                                <input type="date" class="form-control" id="tanggalCari" name="tanggal_mulai" required>
                                            </div>
                                        </div>
                                        <!-- TOGGLE HARIAN -->
                                        <div class="col-md-2 d-flex align-items-center gap-2">
                                            <p class="mb-0">Harian</p>
                                            <label class="toggle-switch toggle-switch-success mb-0">
                                                <input type="checkbox" id="harianToggle" checked>
                                                <span class="toggle-slider round"></span>
                                            </label>
                                        </div>
                                        <!-- BUTTON EXPORT -->
                                        <div class="col-md-4 text-end">
                                            <div class="btn-list d-inline-flex gap-2">
                                                <button type="button"
                                                        class="btn btn-icon btn-success btn-export-excel">
                                                    <i class="fa fa-file-excel-o"></i>
                                                </button>
                                                <button type="button"
                                                        class="btn btn-icon btn-danger btn-export-pdf">
                                                    <i class="fa fa-file-pdf-o"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/select2.js') }}"></script>
@endsection