@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    
    {{-- Header Tombol Execute --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-bolt me-1"></i>
                                <span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            {{-- Panel Filter --}}
            <div class="col-lg-4">
                <div class="card h-100">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">

                                {{-- Filter Minimum Cost --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Minimum Cost</label>
                                        <input class="form-control" type="number" name="min_cost"
                                            value="{{ old('min_cost') }}" min="0" placeholder="0">
                                        <p class="text-danger text-xs pt-1 px-1">*) Leave blank for no minimum limit</p>
                                        @error('min_cost')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Filter Maximum Cost --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Maximum Cost</label>
                                        <input class="form-control" type="number" name="max_cost"
                                            value="{{ old('max_cost') }}" min="0" placeholder="∞">
                                        <p class="text-danger text-xs pt-1 px-1">*) Leave blank for no maximum limit</p>
                                        @error('max_cost')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Filter Training Name (Search Modal) --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Training Name</label>
                                        <div class="input-group">
                                            <input type="text" name="training_name"
                                                class="form-control"
                                                value="{{ old('training_name') }}"
                                                placeholder="Type or select...">
                                            <span class="input-group-text bg-primary text-light"
                                                data-bs-toggle="modal"
                                                data-bs-target="#searchModalTrainingName"
                                                style="cursor:pointer;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>
                                        <p class="text-danger text-xs pt-1 px-1">*) Leave blank for all trainings</p>
                                        @error('training_name')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Modal Training Name --}}
                                <div class="modal fade" id="searchModalTrainingName" tabindex="-1">
                                    <div class="modal-dialog modal-dialog-centered modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Select Training Name</h5>
                                                <button type="button" class="btn-close"
                                                    data-bs-dismiss="modal"></button>
                                            </div>
                                            @php
                                                $modal_training = DB::table('trs_trn')
                                                    ->where('isactive', '1')
                                                    ->orderBy('nama_trn')
                                                    ->select('nama_trn')
                                                    ->distinct()
                                                    ->get();
                                            @endphp
                                            <div class="modal-body table-responsive">
                                                <table class="table display" id="modal_{{ $dmenu }}_training_name">
                                                    @if ($modal_training->isNotEmpty())
                                                        <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                            <tr>
                                                                <th width="80px">Select</th>
                                                                <th>Training Name</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($modal_training as $row)
                                                                <tr>
                                                                    <td>
                                                                        <button type="button"
                                                                            class="btn badge bg-primary badge-lg"
                                                                            onclick="selectModalTrainingName('{{ $row->nama_trn }}')">
                                                                            <i class="bi bi-check-circle me-1"></i>
                                                                            Select
                                                                        </button>
                                                                    </td>
                                                                    <td class="text-sm">{{ $row->nama_trn }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    @endif
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    $(document).ready(function() {
                                        $('#modal_{{ $dmenu }}_training_name').DataTable({
                                            language: {
                                                search: "Search:",
                                                zeroRecords: "No data found"
                                            }
                                        });
                                    });
                                    function selectModalTrainingName(val) {
                                        $('input[name="training_name"]').val(val);
                                        $('#searchModalTrainingName').modal('hide');
                                    }
                                </script>

                                {{-- Filter Trainer Name (Search Modal) --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Trainer Name</label>
                                        <div class="input-group">
                                            <input type="text" name="trainer_name"
                                                class="form-control"
                                                value="{{ old('trainer_name') }}"
                                                placeholder="Type or select...">
                                            <span class="input-group-text bg-primary text-light"
                                                data-bs-toggle="modal"
                                                data-bs-target="#searchModalTrainerName"
                                                style="cursor:pointer;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>
                                        <p class="text-danger text-xs pt-1 px-1">*) Leave blank for all trainers</p>
                                        @error('trainer_name')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Modal Trainer Name --}}
                                <div class="modal fade" id="searchModalTrainerName" tabindex="-1">
                                    <div class="modal-dialog modal-dialog-centered modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Select Trainer Name</h5>
                                                <button type="button" class="btn-close"
                                                    data-bs-dismiss="modal"></button>
                                            </div>
                                            @php
                                                $modal_trainer = DB::table('tna_detail')
                                                    ->orderBy('trainer_name')
                                                    ->select('trainer_name')
                                                    ->distinct()
                                                    ->get();
                                            @endphp
                                            <div class="modal-body table-responsive">
                                                <table class="table display" id="modal_{{ $dmenu }}_trainer_name">
                                                    @if ($modal_trainer->isNotEmpty())
                                                        <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                            <tr>
                                                                <th width="80px">Select</th>
                                                                <th>Trainer Name</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($modal_trainer as $row)
                                                                <tr>
                                                                    <td>
                                                                        <button type="button"
                                                                            class="btn badge bg-primary badge-lg"
                                                                            onclick="selectModalTrainerName('{{ $row->trainer_name }}')">
                                                                            <i class="bi bi-check-circle me-1"></i>
                                                                            Select
                                                                        </button>
                                                                    </td>
                                                                    <td class="text-sm">{{ $row->trainer_name }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    @endif
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    $(document).ready(function() {
                                        $('#modal_{{ $dmenu }}_trainer_name').DataTable({
                                            language: {
                                                search: "Search:",
                                                zeroRecords: "No data found"
                                            }
                                        });
                                    });
                                    function selectModalTrainerName(val) {
                                        $('input[name="trainer_name"]').val(val);
                                        $('#searchModalTrainerName').modal('hide');
                                    }
                                </script>

                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer pt-0 pb-2"></div>
                    </form>
                </div>
            </div>

            {{-- Panel Info --}}
            <div class="col-lg-8">
                <div class="card h-100">
                    <div class="card-body text-center d-flex flex-column justify-content-center align-items-center py-5">
                        <i class="fas fa-dollar-sign text-success mb-3" style="font-size:4rem;opacity:.3;"></i>
                        <h5 class="text-secondary">Training Cost Report</h5>
                        <p class="text-muted text-sm mt-2 mb-0">
                            This report displays training cost data and analyzes costs by trainer.<br>
                            Use the filter on the left then click <strong>Execute</strong> to view the results.
                        </p>
                        <div class="mt-4 d-flex gap-3 flex-wrap justify-content-center">
                            <div class="badge bg-light text-dark border px-3 py-2 text-sm">
                                <i class="fas fa-filter me-1 text-primary"></i> Cost Range Filter
                            </div>
                            <div class="badge bg-light text-dark border px-3 py-2 text-sm">
                                <i class="fas fa-chart-bar me-1 text-success"></i> Cost Analytics
                            </div>
                            <div class="badge bg-light text-dark border px-3 py-2 text-sm">
                                <i class="fas fa-user-tie me-1 text-info"></i> Trainer Summary
                            </div>
                            <div class="badge bg-light text-dark border px-3 py-2 text-sm">
                                <i class="fas fa-file-export me-1 text-warning"></i> Export Reports
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {});
    </script>
@endpush