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

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

    <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 ?? '' }}">
    <input type="hidden" id="user-jabatan" value="{{ strtoupper(trim($user->lastname ?? '')) }}">

    {{-- Filter Section (tetap dipakai buat Your Ticketing) --}}
    <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">
                                {{-- Date --}}
                                <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>

                                <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>

                                <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)
                                                    <option value="{{ $s->value }}">{{ $s->name }}</option>
                                                @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>

    {{-- Your Ticketing ONLY --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <ul class="nav nav-tabs mb-3" id="your-ticket-tabs" role="tablist"></ul>
                        <p class="text-uppercase text-sm mb-2">Your Ticketing</p>
                        <hr class="horizontal dark mt-0">
                        <div class="table-responsive">
                            <table class="table table-hover" id="your-ticket-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">Estimasi Selesai</th>
                                        <th scope="col">Gambar</th>
                                        <th scope="col">Status</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Your Ticketing - Magang ONLY --}}
    <div class="container-fluid py-4 pt-0">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <ul class="nav nav-tabs mb-3" id="your-ticket-magang-tabs" role="tablist"></ul>
                        <p class="text-uppercase text-sm mb-2">Your Ticketing - Magang</p>
                        <hr class="horizontal dark mt-0">
                        <div class="table-responsive">
                            <table class="table table-hover" id="your-ticket-magang-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">Estimasi Selesai</th>
                                        <th scope="col">Gambar</th>
                                        <th scope="col">Status</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Approve Ticket --}}
    <div class="modal fade" id="modalApprove" 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">Approve Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="approve-modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" onclick="submitApprove()">
                        <i class="fas fa-check me-1"></i> Approve
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Reject Ticket --}}
    <div class="modal fade" id="modalReject" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reject Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="reject-modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="btn-reject-submit">Ya, Reject</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Process Ticket --}}
    <div class="modal fade" id="modalProcess" 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">Process Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="process-modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="submitProcess()">
                        <i class="fas fa-cogs me-1"></i> Start Process
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal Edit Ticket --}}
    <div class="modal fade" id="modalEdit" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="edit-modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" onclick="submitEdit()">
                        <i class="fas fa-save me-1"></i> Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Complete Ticket --}}
    <div class="modal fade" id="modalComplete" 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">Complete Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="complete-modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" id="btn-complete-submit">
                        <i class="fas fa-check me-1"></i> Ya, Complete
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Process - Kategori Hardware -->
    <div class="modal fade bd-example-modal-lg" id="modalProcessKategoriHW" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Kategori Hardware</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table id="tableProcessKategoriHW" class="table table-bordered table-striped">
                        <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 Processs - Code Hardware -->
    <div class="modal fade bd-example-modal-xl" id="modalProcessCodeHW" 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 Hardware - <span id="process-hardware-type-label" class="text-primary"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table id="tableProcessCodeHW" class="table table-bordered table-striped table-sm">
                        <thead style="background-color: #daecff;">
                            <tr>
                                <th width="80">Action</th>
                                <th>Code</th>
                                <th>User/Location</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Skeleton row */
        .skeleton-line {
            display: inline-block;
            height: 12px;
            width: 100%;
            border-radius: 8px;
            background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.2s ease-in-out infinite;
        }

        .skeleton-line.sm {
            width: 40%;
            height: 10px;
        }

        .skeleton-line.md {
            width: 65%;
            height: 10px;
        }

        .skeleton-line.lg {
            width: 85%;
            height: 10px;
        }

        .skeleton-avatar {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.2s ease-in-out infinite;
            margin: 0 auto;
        }

        .skeleton-badge {
            display: inline-block;
            width: 70px;
            height: 22px;
            border-radius: 999px;
            background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.2s ease-in-out infinite;
        }

        .skeleton-action {
            display: inline-block;
            width: 96px;
            height: 34px;
            border-radius: 6px;
            background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.2s ease-in-out infinite;
        }

        @keyframes skeleton-shimmer {
            0% {
                background-position: 100% 0;
            }

            100% {
                background-position: 0 0;
            }
        }

        /* optional: haluskan transisi isi tbody */
        #your-ticket-table tbody {
            transition: opacity .15s ease-in-out;
        }

        .bg-approve {
            background-color: #1100ffff !important;
            color: #fff !important;
        }
    </style>


    {{-- JS khusus Your Ticketing --}}
    @include('js.yutick')
@endsection