@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 ?? '' }}">

    {{-- 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">
                                {{-- 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>
                                                {{-- untuk TFTICK seharusnya hanya A dan T, tapi kalau list status global gapapa --}}
                                                @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">
                        <p class="text-uppercase text-sm mb-2">Transfer 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">Transfer From</th>
                                        <th scope="col">Transfer To</th>
                                        <th scope="col">Gambar</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Status IT</th> 
                                    </tr>
                                    </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                        {{-- optional: info kecil --}}
                        <div class="nav-wrapper" id="noted">
                            <code>
                                Note : 
                                <i class="fas fa-circle" style="color: #ffc107;"></i> Throwback
                                <i class="fas fa-circle" style="color: red;"></i> Reject
                            </code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Transfer Ticket --}}
    <div class="modal fade" id="modalTransfer" 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">Transfer Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="transfer-ticket-id">

                    <div id="transfer-ticket-info" class="mb-3">
                    </div>

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

                    <div class="mb-2">
                        <label class="form-label">Transfer ke IT <span class="text-danger">*</span></label>
                        <select class="form-select" id="transfer-to-nik" required>
                            <option value="">-- Pilih IT --</option>
                            @foreach(($it_list ?? []) as $it)
                                <option value="{{ $it->nik }}">{{ $it->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Note <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="transfer-note" rows="3" placeholder="Masukkan note transfer..." required></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" id="btn-transfer-submit" type="button" onclick="window.submitTransfer()">
                        <i class="fas fa-share me-1"></i> Transfer
                    </button>
                </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 IT 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 IT 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>
    <style>
        .bg-approve {
                background-color: #1100ffff !important;
                color: #fff !important;
            }
    </style>
    <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; }

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

        #your-ticket-table tbody {
            transition: opacity .15s ease-in-out;
        }
    </style>

    <style>
    .row-reject-it { background: #ffe5e5 !important; }
    </style>
    <style>
        .row-reject {
            background-color: rgba(255, 0, 0, 0.4) !important;
        }
        .row-throwback {
            background-color: rgba(255, 193, 7, 0.4) !important;
        }
    </style>

    @include('js.tftick')
@endsection