@extends('layouts.backapp')

@section('content')
    <div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
        <div class="kt-portlet__head kt-portlet__head--lg">
            <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <i class="kt-font-brand flaticon2-list-1"></i>
                </span>
                <h3 class="kt-portlet__head-title">
                    Tabel Opname
                </h3>
            </div>
            @can('create', $menus['opnames.index'])
            <div class="kt-portlet__head-toolbar">
                <div class="kt-portlet__head-wrapper">
                    <div class="kt-portlet__head-actions">
                        <a href="{{ route('opnames.create') }}" class="btn btn-bold btn-label-brand btn--sm">Tambah</a>
                    </div>
                </div>
            </div>
            @endcan
        </div>

        <div class="kt-portlet__body">
            <!-- Filter Section -->
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label">Tanggal Awal</label>
                        <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label">Tanggal Akhir</label>
                        <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label">Filter Dealer</label>
                        <select class="form-control select2" id="dealer_filter" name="dealer_filter">
                            <option value="">Semua Dealer</option>
                            @foreach($dealers as $dealer)
                                <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12 filter-buttons">
                    <button type="button" class="btn btn-primary btn-sm" id="kt_search">
                        Filter
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm" id="kt_reset">
                        Reset
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <!--begin: Datatable -->
                <table class="table table-striped table-bordered table-hover" id="opnames-table" data-url="{{ route('opnames.index') }}">
                <thead>
                    <tr>
                        <th>Waktu Dibuat</th>
                        <th>Tanggal Opname</th>
                        <th>Dealer</th>
                        <th>Pengguna</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                </table>
                <!--end: Datatable -->
            </div>
        </div>
    </div>
@endsection

@section('styles')
<style>
    .filter-buttons {
        display: flex;
        gap: 10px;
    }
    .filter-buttons .btn {
        white-space: nowrap;
    }
    
    /* Datepicker styling */
    .datepicker {
        width: 100% !important;
        max-width: 100%;
    }
    .datepicker-dropdown {
        width: auto !important;
        min-width: 250px;
        max-width: 300px;
    }
    /* Ensure input field follows parent width */
    input.datepicker {
        width: 100% !important;
        box-sizing: border-box;
    }

    .form-label {
        font-weight: 600;
        color: #595d6e;
        margin-bottom: 8px;
        font-size: 13px;
        text-transform: none;
        letter-spacing: normal;
        display: block;
    }

    /* Select2 styling - same as stock audit (minimal) */
    .select2-container {
        width: 100% !important;
    }
</style>
@endsection

@section('javascripts')
<script src="{{ mix('js/warehouse_management/opnames/index.js') }}"></script>
@endsection