@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .float {
            position: fixed !important;
            width: 60px !important;
            height: 60px !important;
            bottom: 40px !important;
            right: 40px !important;
            background-color: #25d366 !important;
            color: #FFF !important;
            border-radius: 50% !important;
            text-align: center !important;
            font-size: 30px !important;
            box-shadow: 2px 2px 3px #999 !important;
            z-index: 99999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
        }

        .my-float {
            margin: 0 !important;
        }

        .float:hover {
            background-color: #20ba5a !important;
            transform: scale(1.1) !important;
        }

        .flatpickr-input {
            background-color: #fff !important;
            cursor: pointer !important;
        }

        .flatpickr-input:focus {
            background-color: #fff !important;
            border-color: #86b7fe !important;
            outline: 0 !important;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            @php
                $saat_ini = \Carbon\Carbon::now()->addHours(7)->format('d-m-Y H:i');
            @endphp
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="mb-0">Data FPR</h3>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group mb-3">
                                    <form action="{{ route('data.index') }}" method="GET" class="d-flex">
                                        <input type="text" name="search" class="form-control" placeholder="Cari data..."
                                            value="{{ request('search') }}">
                                        <button class="btn btn-outline-secondary" type="submit">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-6 text-end">
                                <span class="badge bg-dark fs-5">
                                    <i class="fas fa-clock me-1"></i>
                                    <span id="waktu-saat-ini"></span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger" role="alert">
                                {{ session('error') }}
                            </div>
                        @endif
                        
                        @if ($errors->has('file_pendukung'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('file_pendukung') }}
                            </div>
                        @endif
                        <div class="mb-3">
                            <div class="d-flex justify-content-start gap-2">
                                <div class="badge bg-secondary">
                                    <i class="fas fa-circle me-1"></i>FPR Belum Diatur
                                </div>
                                <div class="badge bg-warning">
                                    <i class="fas fa-circle me-1"></i>FPR Belum Berjalan
                                </div>
                                <div class="badge bg-info">
                                    <i class="fas fa-circle me-1"></i>FPR Berjalan
                                </div>
                                <div class="badge bg-success">
                                    <i class="fas fa-circle me-1"></i>FPR Selesai
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Pemohon</th>
                                        <th>FPR Mulai</th>
                                        <th>FPR Selesai</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($data as $key => $dt)
                                        @php
                                            $fpr_mulai = \Carbon\Carbon::parse($dt->fpr_mulai)->format('d-m-Y H:i');
                                            $fpr_selesai = \Carbon\Carbon::parse($dt->fpr_selesai)->format('d-m-Y H:i');
                                            if ($saat_ini >= $fpr_mulai && $saat_ini <= $fpr_selesai) {
                                                $status = 'FPR Berjalan';
                                            } else {
                                                if ($saat_ini > $fpr_selesai) {
                                                    $status = 'FPR Selesai';
                                                } else {
                                                    $status = 'FPR Belum Berjalan';
                                                }
                                            }
                                            if ($dt->fpr_mulai == null || $dt->fpr_selesai == null) {
                                                $status = 'FPR Belum Diatur';
                                            }
                                        @endphp
                                        <tr
                                            class="{{ $status == 'FPR Belum Diatur' ? 'table-secondary' : ($status == 'FPR Berjalan' ? 'table-info' : ($status == 'FPR Selesai' ? 'table-success' : 'table-warning')) }}">
                                            <td>{{ ($data->currentPage() - 1) * $data->perPage() + $key + 1 }}</td>
                                            <td>{{ $dt->Krk->nama_pemohon }}</td>
                                            <td>{{ $fpr_mulai }}</td>
                                            <td>{{ $fpr_selesai }}</td>
                                            <td>{{ $status }}</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    @if ($dt->file_pendukung != null)
                                                        <a href="{{ route('data.download_dokumen', ['id'=> $dt->id, 'fl_kode'=> 'fpr_pendukung']) }}" class="btn btn-primary btn-sm btn-icon" title="Download File Pendukung">
                                                            <i class="fas fa-download"></i>
                                                        </a>
                                                    @endif

                                                    @if ($dt->sts_selesai == 1)
                                                        <a class="btn btn-primary btn-sm btn-icon" href="{{ route('fpr.show', $dt->id) }}" title="Lihat Daftar Masukkan OPD">
                                                            <i class="fas fa-info-circle"></i>
                                                        </a>
                                                    @endif

                                                    @if ($status == 'FPR Berjalan')
                                                        @can('OpdAgtFpr')
                                                        <a class="btn btn-secondary btn-sm btn-icon" href="{{ route('fpr.edit', $dt->id) }}" title="Masukkan FPR">
                                                                <i class="fas fa-star"></i>
                                                            </a>
                                                        @endcan
                                                    @endif

                                                    @can('VerifKRK')
                                                        @if ($dt->sts_selesai == 0)
                                                            <button class="btn btn-success btn-sm btn-icon" onclick="mulaiFpr('{{ htmlspecialchars($dt->id, ENT_QUOTES, 'UTF-8') }}', '{{ htmlspecialchars($dt->fpr_mulai, ENT_QUOTES, 'UTF-8') }}', '{{ htmlspecialchars($dt->fpr_selesai, ENT_QUOTES, 'UTF-8') }}', '{{ htmlspecialchars($dt->file_pendukung, ENT_QUOTES, 'UTF-8') }}')" title="Mulai FPR">
                                                                <i class="fas fa-play"></i>
                                                            </button>
                                                            @if ($status == 'FPR Berjalan')
                                                                <button class="btn btn-danger btn-sm btn-icon" onclick="konfirmasiHentikanFpr('{{ $dt->id }}')" title="Hentikan FPR">
                                                                    <i class="fas fa-stop"></i>
                                                                </button>
                                                                
                                                                <!-- Modal Konfirmasi Hentikan FPR -->
                                                                <div class="modal fade" id="konfirmasiHentikanFprModal" tabindex="-1" role="dialog" aria-labelledby="konfirmasiHentikanFprModalLabel" aria-hidden="true">
                                                                    <div class="modal-dialog" role="document">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title" id="konfirmasiHentikanFprModalLabel">Konfirmasi Hentikan FPR</h5>
                                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                Apakah anda yakin, FPR akan dihentikan dan Data KRK akan berubah ke Pengajuan Baru?
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                                                                <a id="konfirmasiHentikanFprLink" href="" class="btn btn-danger">Ya, Hentikan FPR</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                
                                                                <script>
                                                                    function konfirmasiHentikanFpr(id) {
                                                                        document.getElementById('konfirmasiHentikanFprLink').href = "{{ route('fpr.stop', '') }}/" + id;
                                                                        var myModal = new bootstrap.Modal(document.getElementById('konfirmasiHentikanFprModal'));
                                                                        myModal.show();
                                                                    }
                                                                </script>
                                                            @endif
                                                        @endif
                                                    @endcan
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Tidak ada data</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-end">
                            {{ $data->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="mulaiFprModal" tabindex="-1" role="dialog" aria-labelledby="mulaiFprModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="mulaiFprModalLabel">Mulai FPR</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('fpr.mulai_fpr') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id_data">
                        <div class="modal-body" id="mulaiFprModalBody">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="tanggal" class="form-label">Tanggal Mulai FPR</label>
                                        <input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="jam" class="form-label">Jam Mulai FPR</label>
                                        <input type="text" class="form-control timepicker" id="jam_mulai" name="jam_mulai" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="tanggal" class="form-label">Tanggal Selesai FPR</label>
                                        <input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="jam" class="form-label">Jam Selesai FPR</label>
                                        <input type="text" class="form-control timepicker" id="jam_selesai" name="jam_selesai" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="file_pendukung" class="form-label">File Pendukung</label>
                                        <div id="file_pendukung_info"></div>
                                        <input type="file" class="form-control" id="file_pendukung" name="file_pendukung" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx" max="3072" data-max-size="3072">
                                        <small class="text-info">Format yang diizinkan: Dokumen Microsoft Office (Word, Excel, PowerPoint)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            flatpickr(".timepicker", {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true,
                minuteIncrement: 30
            });
        });

        setInterval(function() {
            var now = new Date();
            var date = now.getDate().toString().padStart(2,'0') + '-' +
                (now.getMonth() + 1).toString().padStart(2,'0') + '-' +
                now.getFullYear();
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            var seconds = String(now.getSeconds()).padStart(2, '0');
            var timeString = hours + ':' + minutes + ':' + seconds;
            $('#waktu-saat-ini').text(date + ' ' + timeString);
        }, 1000);

        function mulaiFpr(id, fpr_mulai, fpr_selesai, file_pendukung) {
            if (file_pendukung) {
                $('#file_pendukung_info').html(`<p>File saat ini: ${file_pendukung}</p>`);
                $('#file_pendukung').prop('required', false);
            } else {
                $('#file_pendukung_info').html('<span class="text-danger">File pendukung wajib diisi</span>');
                $('#file_pendukung').prop('required', true);
            }
            $('[name="id_data"]').val(id);
            if (fpr_mulai) {
                let tanggalMulai = fpr_mulai.split(' ')[0];
                $('#tanggal_mulai').val(tanggalMulai);
                $('#tanggal_mulai').prop('readonly', true);
                
                let jamMulai = fpr_mulai.split(' ')[1].substring(0, 5);
                flatpickr("#jam_mulai", {
                    enableTime: false,
                    noCalendar: true,
                    dateFormat: "H:i",
                    time_24hr: true,
                    minuteIncrement: 30,
                    defaultDate: jamMulai
                });
                $('#jam_mulai').prop('readonly', true);
                $('#jam_mulai').prop('disabled', true);
            } else {
                $('#tanggal_mulai').prop('readonly', false);
                $('#jam_mulai').prop('readonly', false);
                $('#jam_mulai').prop('disabled', false);
            }

            if (fpr_selesai) {
                let tanggalSelesai = fpr_selesai.split(' ')[0];
                $('#tanggal_selesai').val(tanggalSelesai);
                let jamSelesai = fpr_selesai.split(' ')[1].substring(0, 5);
                flatpickr("#jam_selesai", {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: "H:i",
                    time_24hr: true,
                    minuteIncrement: 30,
                    defaultDate: jamSelesai
                });
            }

            $('#mulaiFprModal').modal('show');
        }
    </script>

    <!-- Tombol WhatsApp Mengambang -->
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
@endpush