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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="section-first">
        <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">
                            {{-- Button ADD untuk GUESTS dan MIS.IT --}}
                            @if ($authorize->add == '1')
                                <button class="btn btn-primary mb-0" id="btn-add"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold">ADD</span>
                                </button>
                            @endif

                            {{-- Button DRAFT hanya untuk MIS.IT --}}
                            <button class="btn btn-warning mb-0" id="btn-draft" style="display: none;"
                                onclick="openDraftModal(false)">
                                <i class="fas fa-link me-1"></i>
                                <span class="font-weight-bold">DRAFT</span>
                            </button>
                            <button class="btn btn-info mb-0" id="btn-draft-magang" style="display: none;"
                                onclick="openDraftModal(true)">
                                <i class="fas fa-user-graduate me-1"></i>
                                <span class="font-weight-bold">DRAFT MAGANG</span>
                            </button>
                            <button class="btn btn-primary mb-0" id="btn-generate-direct-link" style="display: none;"
                                onclick="generateDirectDraftLink()">
                                <i class="fas fa-paperclip me-1"></i>
                                <span class="font-weight-bold">GENERATE LINK</span>
                            </button>
                            <input type="hidden" id="auth-add" name="auth-add" value="{{ $authorize->add }}">
                            <input type="hidden" id="auth-edit" name="auth-edit" value="{{ $authorize->edit }}">
                            <input type="hidden" id="auth-delete" name="auth-delete" value="{{ $authorize->delete }}">
                            <input type="hidden" id="auth-approval" name="auth-approval"
                                value="{{ $authorize->approval }}">
                            <input type="hidden" id="user-role" name="user-role" value="{{ $user_idroles ?? '' }}">
                            <input type="hidden" id="user-id" name="user-id" value="{{ $user_id ?? '' }}">
                            <input type="hidden" id="current-it-nik" value="{{ $user_nik ?? '' }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <!-- Filter Section -->
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <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 align-items-center">
                                <!-- Tanggal -->
                                <div class="col-lg-4">
                                    <div class="row mb-3 align-items-center">
                                        <div class="col-lg-3">
                                            <label class="form-label mb-0">Date</label>
                                        </div>
                                        <div class="col-lg-4">
                                            <input type="date" class="form-control" id="start-date" name="start-date"
                                                max="2026-10-04">
                                        </div>
                                        <div class="col-lg-4">
                                            <input type="date" class="form-control" id="end-date" name="end-date"
                                                max="2026-10-04">
                                        </div>
                                    </div>
                                </div>

                                <!-- Divider -->
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 40px;"></div>
                                </div>

                                <!-- Ticket ID -->
                                <div class="col-lg-4">
                                    <div class="row mb-3 align-items-center">
                                        <div class="col-lg-5">
                                            <label for="ticket-id" class="form-label mb-0 text-nowrap">
                                                Ticket ID
                                            </label>
                                        </div>
                                        <div class="col-lg-7">
                                            <input type="text" id="ticket-id" name="ticket-id" class="form-control">
                                        </div>
                                    </div>
                                </div>

                                <!-- Divider -->
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 40px;"></div>
                                </div>

                                <!-- Status -->
                                <div class="col-lg-2">
                                    <div class="row mb-3 align-items-center">
                                        <div class="col-lg-4">
                                            <label for="statusSelect" class="form-label mb-0 text-nowrap">
                                                Status
                                            </label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select id="statusSelect" name="status" class="form-select">
                                                <option value="ALL">ALL</option>
                                                @foreach ($status as $s)
                                                    @if ($s->value !== 'D')
                                                        <option value="{{ $s->value }}">
                                                            {{ $s->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary mt-3" id="search-form">
                                <i class="fa fa-magnifying-glass"></i> Search
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- GUESTS VIEW - List Ticketing -->
    <div id="guest-view" style="display: none;">
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card overflow-auto">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">List Ticketing</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="ticketing-table">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col">Action</th>
                                                <th scope="col">Ticket Number</th>
                                                <th scope="col">Ticket Date</th>
                                                <th scope="col">Reported By</th>
                                                <th scope="col">Jenis</th>
                                                <th scope="col">Kategori</th>
                                                <th scope="col">PIC</th>
                                                <th scope="col">Gambar</th>
                                                <th scope="col">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MIS.IT VIEW - dengan Tabs: Ticketing & Draft -->
    <div id="misit-view" style="display: none;">
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card overflow-auto">
                        <div class="card-body">
                            <!-- NAV TABS -->
                            <ul class="nav nav-tabs" id="misit-tabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="tab-ticketing" data-bs-toggle="tab"
                                        data-bs-target="#pane-ticketing" type="button" role="tab">
                                        <i class="fas fa-ticket-alt me-1"></i> Ticketing
                                        <span id="ticketing-badge" class="badge bg-primary ms-1">0</span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-draft-magang" data-bs-toggle="tab"
                                        data-bs-target="#pane-draft-magang" type="button" role="tab"
                                        onclick="loadDraftMagangList()">
                                        <i class="fas fa-user-graduate me-1"></i> Draft Magang
                                        <span id="draft-magang-badge" class="badge bg-info ms-1">0</span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-draft" data-bs-toggle="tab"
                                        data-bs-target="#pane-draft" type="button" role="tab"
                                        onclick="loadDraftList()">
                                        <i class="fas fa-file-alt me-1"></i> Draft
                                        <span id="draft-badge" class="badge bg-warning ms-1">0</span>
                                    </button>
                                </li>
                            </ul>

                            <!-- TAB PANES -->
                            <div class="tab-content pt-3" id="misit-tab-content">

                                <!-- PANE: Ticketing -->
                                <div class="tab-pane fade show active" id="pane-ticketing" role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="ticketing-table-misit">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Ticket Number</th>
                                                    <th scope="col">Ticket Date</th>
                                                    <th scope="col">Reported By</th>
                                                    <th scope="col">Jenis</th>
                                                    <th scope="col">Kategori</th>
                                                    <th scope="col">PIC</th>
                                                    <th scope="col">Gambar</th>
                                                    <th scope="col">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- PANE: Draft -->
                                <div class="tab-pane fade" id="pane-draft" role="tabpanel">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <p class="text-uppercase text-sm mb-0">
                                            <i class="fas fa-file-alt me-1 text-warning"></i>
                                            Draft Ticket (menunggu konfirmasi user)
                                        </p>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="draft-table">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Ticket Number</th>
                                                    <th scope="col">Ticket Date</th>
                                                    <th scope="col">Reported By</th>
                                                    <th scope="col">Jenis</th>
                                                    <th scope="col">Kategori</th>
                                                    <th scope="col">Source</th>
                                                    <th scope="col">Link Draft</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="pane-draft-magang" role="tabpanel">
                                    <p class="text-uppercase text-sm mb-2">
                                        <i class="fas fa-user-graduate me-1 text-info"></i>
                                        Draft Ticket Magang (tanpa daily activity)
                                    </p>
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="draft-magang-table">
                                            <thead style="background-color: #00b7bd4f;"><tr></tr></thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Draft Ticket -->
    <div class="modal fade" id="modalDraft" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="draft-modal-title">Draft Ticketing</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="draft-form">
                        @csrf
                        <input type="hidden" id="draft_is_magang" name="is_magang" value="0">

                        <!-- Ticket Source -->
                        <div class="mb-3">
                            <label class="form-label">Ticket Source <span class="text-danger">*</span></label>
                            <select class="form-select" id="draft_ticket_source" name="ticket_source" required>
                                <option value="">-- Pilih --</option>
                                <option value="Lisan">Lisan</option>
                                <option value="Chat">Chat</option>
                            </select>
                        </div>

                        <!-- Jenis -->
                        <div class="mb-3">
                            <label class="form-label">Jenis <span class="text-danger">*</span></label>
                            <select class="form-select" id="draft_jenis" name="jenis" required>
                                <option value="">-- Pilih --</option>
                                <option value="S">Software</option>
                                <option value="H">Hardware</option>
                            </select>
                        </div>

                        <!-- Urgency -->
                        <div class="mb-3">
                            <label class="form-label">Urgency <span class="text-danger">*</span></label>
                            <select class="form-select" id="draft_urgency" name="urgency" required>
                                <option value="">-- Pilih --</option>
                                @foreach ($urgency_list ?? [] as $u)
                                    <option value="{{ $u->value }}">{{ $u->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Nama Software -->
                        <div class="mb-3" id="draft_kategori_software_section" style="display: none;">
                            <label class="form-label">Nama Software <span class="text-danger">*</span></label>

                            <input type="hidden" id="draft_software_kategori" name="software_kategori">
                            <input type="hidden" id="draft_software_detkat" name="software_detkat">

                            <select class="form-select" id="draft_software_name"
                                aria-label="Cari dan pilih software">
                                <option value="">-- Cari atau pilih Software --</option>
                            </select>
                        </div>

                        <!-- Kategori Software -->
                        <div class="mb-3" id="draft_kategori_code_section" style="display: none;">
                            <label class="form-label">Kategori Software</label>
                            <input type="text" class="form-control" id="draft_software_display" readonly
                                placeholder="contoh: WEB0036">
                        </div>

                        <!-- Modul -->
                        <div class="mb-3" id="draft_modul_section" style="display:none;">
                            <label class="form-label">Modul</label>
                            <div class="draft-module-picker d-flex align-items-start gap-2">
                                <select class="form-select form-select-sm" id="draft_modul" name="modul"
                                    style="width:100%">
                                    <option value="">-- Pilih atau ketik Modul --</option>
                                </select>
                                <button type="button" class="btn btn-outline-success flex-shrink-0 d-none"
                                    id="btn-add-draft-modul" onclick="addDraftModulToMaster()"
                                    title="Tambahkan ke master modul"
                                    style="width:24px;height:24px;padding:0;font-size:10px;">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <input type="hidden" id="draft_sub_detkat_id" name="sub_detkat_id">
                            <style>
                                #modalDraft .draft-module-picker .select2-container {
                                    flex: 1 1 auto;
                                    min-width: 0;
                                }

                                #modalDraft .select2-selection--single {
                                    height: 38px;
                                    border-color: #d2d6da;
                                    border-radius: .375rem;
                                }

                                #modalDraft .select2-selection__rendered {
                                    line-height: 36px;
                                }

                                #modalDraft .select2-selection__arrow {
                                    height: 36px;
                                }

                                #modalDraft .select2-results__options {
                                    overscroll-behavior: contain;
                                }

                                #modalDraft .select2-container--open.draft-select2-opening .select2-results__option {
                                    pointer-events: none;
                                }
                            </style>
                        </div>

                        <!-- Reported By -->
                        <div class="mb-3">
                            <label class="form-label">Reported By <span class="text-danger">*</span></label>
                            <input type="hidden" id="draft_reported_by" name="reported_by">
                            <input type="hidden" id="draft_department" name="department">
                            <select class="form-select" id="draft_reported_by_display" required
                                aria-label="Cari dan pilih user">
                                <option value="">-- Cari atau pilih User --</option>
                            </select>
                        </div>

                        <!-- Detail Permasalahan -->
                        <div class="mb-3">
                            <label class="form-label">Detail Permasalahan <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="draft_detail_problem" name="detail_problem" rows="4" required></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Estimasi Selesai</label>
                            <input type="datetime-local" class="form-control" id="draft_estimasi_selesai"
                                name="estimasi_selesai">
                        </div>

                        <!-- Hidden IT (otomatis sesuai user login) -->
                        <input type="hidden" id="draft_it_assign" name="it_assign">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-warning" id="btn-generate-draft"
                        onclick="generateDraftLink()" title="Shortcut: Ctrl+Enter">
                        <i class="fas fa-link me-1"></i> Generate Link
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Search Kategori Software untuk Draft -->
    <div class="modal fade bd-example-modal-xl" id="modalDraftKategoriSoftware" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Software</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table id="tableDraftSoftware" class="table table-bordered table-striped table-sm">
                        <thead style="background-color: #daecff;">
                            <tr>
                                <th width="80">Action</th>
                                <th>ID</th>
                                <th>Kategori</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Search Reported By -->
    <div class="modal fade" id="modalSearchReportedBy" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table id="tableReportedBy" class="table table-bordered table-striped">
                        <thead style="background-color: #daecff;">
                            <tr>
                                <th>Action</th>
                                <th>Nama</th>
                                <th>Departemen</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Draft: Pilih Modul & PIC -->
    <div class="modal fade" id="modalDraftSubDetkat" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Modul & PIC</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table id="tableDraftSubDetkat" class="table table-bordered table-striped table-sm">
                        <thead style="background-color:#daecff;">
                            <tr>
                                <th width="80">Action</th>
                                <th>Sub ID</th>
                                <th>Modul</th>
                                <th>NIK PIC</th>
                                <th>Nama PIC</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Draft: Pilih PIC (Dept 7) -->
    <div class="modal fade" id="modalDraftPickPic" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih PIC (Departemen)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table id="tableDraftPickPic" class="table table-bordered table-striped table-sm">
                        <thead style="background-color:#daecff;">
                            <tr>
                                <th width="80">Action</th>
                                <th>NIK</th>
                                <th>Nama</th>
                                <th>Departemen</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <style>
        .bg-approve {
            background-color: #1100ffff !important;
            color: #fff !important;
        }
    </style>

    {{-- Include JavaScript File --}}
    @include('js.trtick')
@endsection