@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Filter Report Document'])
    
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <button class="btn btn-primary mb-0"
                onclick="event.preventDefault(); document.getElementById('report-document-form').submit();">
                <i class="fas fa-bolt me-1"></i>
                <span class="font-weight-bold">Execute</span>
            </button>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="report-document-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            
                            {{-- Filter Nama Material dengan Modal --}}
                            <div class="form-group">
                                <label for="nama_material" class="form-control-label">Nama Material</label>
                                <div class="input-group">
                                    <input type="text" name="nama_material" class="form-control" placeholder="Pilih material..."
                                           value="{{ request('nama_material') }}" id="input_nama_material">
                                    <span class="input-group-text bg-primary text-light" style="cursor: pointer;"
                                          data-bs-toggle="modal" data-bs-target="#materialModal">
                                          <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>

                            {{-- Filter Nama Supplier dengan Modal --}}
                            <div class="form-group">
                                <label for="nama_vendor" class="form-control-label">Nama Supplier</label>
                                <div class="input-group">
                                    <input type="text" name="nama_vendor" class="form-control" placeholder="Pilih supplier..."
                                           value="{{ request('nama_vendor') }}" id="input_nama_vendor">
                                    <span class="input-group-text bg-primary text-light" style="cursor: pointer;"
                                          data-bs-toggle="modal" data-bs-target="#supplierModal">
                                          <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>
                            
                            {{-- Filter Nama Produsen dengan Modal --}}
                            <div class="form-group">
                                <label for="produsen" class="form-control-label">Nama Produsen</label>
                                <div class="input-group">
                                    <input type="text" name="produsen" class="form-control" placeholder="Pilih produsen..."
                                           value="{{ request('produsen') }}" id="input_produsen">
                                    <span class="input-group-text bg-primary text-light" style="cursor: pointer;"
                                          data-bs-toggle="modal" data-bs-target="#produsenModal">
                                          <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>
                            
                            {{-- Filter Status Dokumen --}}
                            <div class="form-group">
                                <label for="status_filter" class="form-control-label">Status Dokumen</label>
                                <select class="form-select" name="status_filter" id="status_filter">
                                    <option value="ALL" @selected(request('status_filter', 'ALL') == 'ALL')>-- Semua Status --</option>
                                    <option value="Approved" @selected(request('status_filter') == 'Approved')>Approved</option>
                                    <option value="Pending" @selected(request('status_filter') == 'Pending')>Pending</option>
                                    <option value="Rejected" @selected(request('status_filter') == 'Rejected')>Rejected</option>
                                    <option value="Revisi" @selected(request('status_filter') == 'Revisi')>Revisi</option>
                                </select>
                            </div>
                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL UNTUK MATERIAL --}}
    <div class="modal fade" id="materialModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Pilih Material</h5></div>
                <div class="modal-body table-responsive">
                    <table class="table display" id="table-material">
                        <thead><tr><th>Action</th><th>Nama Material</th></tr></thead>
                        <tbody>
                            @foreach ($materials as $item)
                            <tr>
                                <td><button type="button" class="btn btn-primary btn-sm" onclick="selectValue('input_nama_material', '{{ $item->nama_material }}', '#materialModal')">Select</button></td>
                                <td>{{ $item->nama_material }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    {{-- MODAL UNTUK SUPPLIER --}}
    <div class="modal fade" id="supplierModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Pilih Supplier</h5></div>
                <div class="modal-body table-responsive">
                    <table class="table display" id="table-supplier">
                        <thead><tr><th>Action</th><th>Nama Supplier</th></tr></thead>
                        <tbody>
                            @foreach ($suppliers as $item)
                            <tr>
                                <td><button type="button" class="btn btn-primary btn-sm" onclick="selectValue('input_nama_vendor', '{{ $item->nama_vendor }}', '#supplierModal')">Select</button></td>
                                <td>{{ $item->nama_vendor }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL UNTUK PRODUSEN --}}
    <div class="modal fade" id="produsenModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Pilih Produsen</h5></div>
                <div class="modal-body table-responsive">
                    <table class="table display" id="table-produsen">
                        <thead><tr><th>Action</th><th>Nama Produsen</th></tr></thead>
                        <tbody>
                            @foreach ($producents as $item)
                            <tr>
                                <td><button type="button" class="btn btn-primary btn-sm" onclick="selectValue('input_produsen', '{{ $item->produsen }}', '#produsenModal')">Select</button></td>
                                <td>{{ $item->produsen }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $('#table-material').DataTable();
        $('#table-supplier').DataTable();
        $('#table-produsen').DataTable();
    });

    function selectValue(inputId, value, modalId) {
        $('#' + inputId).val(value);
        $(modalId).modal('hide');
    }
</script>
@endpush