@extends('layouts.master')

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .filter-section {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            margin-bottom: 20px;
        }
        .filter-section .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        .filter-section label {
            font-weight: 500;
            margin-bottom: 8px;
        }
        .filter-section .btn {
            height: 38px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .search-box {
            position: relative;
            margin-left: auto;
            width: 250px;
        }
        .search-box input {
            width: 100%;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
       
        .dt-button {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            display: inline-flex;
            gap: 1px;
        }
       
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title text-left">Rekap Data Presensi</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
            <li class="breadcrumb-item active">Rekap Data</li>
        </ol>
    </div>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- Filter Section -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="filter-section">
                        <div class="form-group">
                            <label for="month">Bulan</label>
                            <input type="month" class="form-control" id="month" value="{{ date('Y-m') }}">
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select class="form-control" id="status">
                                <option value="">Semua Status</option>
                                <option value="Hadir">Hadir</option>
                                <option value="Sakit">Sakit</option>
                                <option value="Izin">Izin</option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-primary" id="filter-btn">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                    </div>
                    {{--  --}}
                </div>

                <!-- Summary Cards -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h5 class="card-title">Hadir Hari Ini</h5>
                                <h3 class="card-text" id="total-hadir">0</h3>
                                <small>{{ Carbon\Carbon::now()->format('d M Y') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white">
                            <div class="card-body">
                                <h5 class="card-title">Sakit Hari Ini</h5>
                                <h3 class="card-text" id="total-sakit">0</h3>
                                <small>{{ Carbon\Carbon::now()->format('d M Y') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <h5 class="card-title">Izin Hari Ini</h5>
                                <h3 class="card-text" id="total-izin">0</h3>
                                <small>{{ Carbon\Carbon::now()->format('d M Y') }}</small>
                            </div>
                        </div>
                    </div>
                    

                <!-- Data Table -->
                <div class="table-responsive">
                    <table id="rekap-table" class="table table-bordered table-striped dt-responsive nowrap">
                        <thead class="thead-light">
                            <tr>
                                <th>No</th>
                                <th>Tanggal</th>
                                <th>Nama</th>
                                <th>Status</th>
                                <th>Clock In</th>
                                <th>Clock Out</th>
                                <th>Keterangan</th>
                                <th>Lokasi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <!-- Required datatable js -->
    <script src="{{ URL::asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/buttons.print.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            let table = $('#rekap-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("admin.reports.data") }}',
                    data: function(d) {
                        d.month = $('#month').val();
                        d.status = $('#status').val();
                    },
                    error: function (xhr, error, thrown) {
                        console.error('DataTables error:', error);
                        console.error('Server response:', xhr.responseText);
                        alert('Error loading data. Please check console for details.');
                    }
                },
                columns: [
                    { 
                        data: 'DT_RowIndex', 
                        name: 'DT_RowIndex', 
                        orderable: false, 
                        searchable: false 
                    },
                    { 
                        data: 'tanggal', 
                        name: 'tanggal',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'nama', 
                        name: 'nama',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'status', 
                        name: 'status',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'jam_masuk', 
                        name: 'jam_masuk',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'jam_keluar', 
                        name: 'jam_keluar',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'keterangan', 
                        name: 'keterangan',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'lokasi', 
                        name: 'lokasi',
                        orderable: false,
                        searchable: false
                    }
                ],
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'excel',
                        text: '<i class="fas fa-file-excel"></i> Excel',
                        className: 'dt-button buttons-excel',
                        title: 'Rekap Data Presensi - ' + $('#month').val(),
                        exportOptions: {
                            columns: [0,1,2,3,4,5,6]
                        }
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        className: 'dt-button buttons-pdf',
                        title: 'Rekap Data Presensi - ' + $('#month').val(),
                        exportOptions: {
                            columns: [0,1,2,3,4,5,6]
                        },
                        orientation: 'landscape'
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print"></i> Print',
                        className: 'dt-button buttons-print',
                        title: 'Rekap Data Presensi - ' + $('#month').val(),
                        exportOptions: {
                            columns: [0,1,2,3,4,5,6]
                        }
                    }
                ],
                order: [[1, 'desc']],
                pageLength: 10,
                language: {
                    processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data per halaman",
                    zeroRecords: "Data tidak ditemukan",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }
                },
                drawCallback: function(settings) {
                    console.log('Data received:', settings.json);
                }
            });

            // Pencarian Manual
            $('#searchInput').on('keyup', function() {
                table.search(this.value).draw();
            });

            // Filter button click handler
            $('#filter-btn').click(function() {
                table.ajax.reload();
                updateSummary();
            });

            // Initial summary update
            updateSummary();

            // Tambahkan fungsi untuk menampilkan lokasi
            window.showLocation = function(lat, lng) {
                // Implementasi untuk menampilkan peta
                // Misalnya menggunakan modal dengan Google Maps
                Swal.fire({
                    title: 'Lokasi Presensi',
                    html: `
                        <div id="map" style="height: 400px;"></div>
                    `,
                    width: '600px',
                    didRender: () => {
                        // Inisialisasi Google Maps
                        const map = new google.maps.Map(document.getElementById('map'), {
                            center: { lat: parseFloat(lat), lng: parseFloat(lng) },
                            zoom: 15
                        });
                        
                        new google.maps.Marker({
                            position: { lat: parseFloat(lat), lng: parseFloat(lng) },
                            map: map
                        });
                    }
                });
            };
        });

        function updateSummary() {
            $.ajax({
                url: '{{ route("admin.reports.summary") }}',
                data: {
                    month: $('#month').val(),
                    status: $('#status').val()
                },
                success: function(response) {
                    $('#total-hadir').text(response.hadir);
                    $('#total-sakit').text(response.sakit);
                    $('#total-izin').text(response.izin);
                    $('#total-absen').text(response.absen);
                }
            });
        }
    </script>

    <!-- Tambahkan Google Maps API di bagian head atau sebelum closing body -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"></script>
@endsection