@extends('layouts.master')

@section('css')
    <!-- Table css -->
    <link href="{{ URL::asset('plugins/RWD-Table-Patterns/dist/css/rwd-table.min.css') }}" rel="stylesheet" type="text/css" media="screen">
    <style>
        .swal2-image-custom {
            max-width: 400px;
            max-height: 400px;
            width: auto;
            height: auto;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-top: none !important;
        }
        .badge {
            padding: 8px 12px;
            font-size: 12px;
            border-radius: 4px;
        }
        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
        }
        .table td {
            vertical-align: middle;
        }
        .filter-section {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .table-title {
            margin-bottom: 20px;
            color: #333;
            font-weight: 600;
        }
        .form-inline .form-group {
            margin-right: 15px;
        }
        .action-buttons .btn {
            margin: 0 2px;
        }
        /* Fix double border issue */
        .table-bordered {
            border-collapse: collapse;
        }
        .table-bordered thead th {
            border-bottom-width: 1px !important;
        }
        .table-bordered thead tr:first-child th {
            border-top: none;
        }
        .dataTables_wrapper .dataTables_scrollHead {
            border-bottom: none !important;
        }
        .table-responsive {
            border-top: none;
        }
        .card-body {
            padding-top: 1.5rem;
        }
    </style>
@endsection

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

@section('content')
@include('includes.flash')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- Filter Section -->
                    <div class="filter-section">
                        <form action="{{ route('admin.izin') }}" method="GET" class="form-inline" id="filterForm">
                            <div class="form-group">
                                <label for="date" class="mr-2">Tanggal:</label>
                                <input type="date" class="form-control" id="date" name="date" 
                                    value="{{ request('date', date('Y-m-d')) }}">
                            </div>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th data-priority="1">Nama</th>
                                    <th data-priority="2">Status</th>
                                    <th data-priority="3">Keterangan</th>
                                    <th data-priority="4">File PDF</th>
                                    <th data-priority="5">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($izins as $izin)
                                    <tr>
                                        <td>{{ $izin->user->name }}</td>
                                        <td>
                                            @if ($izin->status == 'Izin')
                                                <span class="badge badge-info">{{ $izin->status }}</span>
                                            @elseif ($izin->status == 'Sakit')
                                                <span class="badge badge-warning">{{ $izin->status }}</span>
                                            @elseif ($izin->status == 'Disetujui')
                                                <span class="badge badge-success">{{ $izin->status }}</span>
                                            @elseif ($izin->status == 'Ditolak')
                                                <span class="badge badge-danger">{{ $izin->status }}</span>
                                            @endif
                                        </td>
                                        <td>{{ $izin->keterangan }}</td>
                                        <td>
                                            @if ($izin->file_pdf)
                                                <a href="{{ asset('presensi/' . $izin->file_pdf) }}" class="btn btn-primary btn-sm" target="_blank">
                                                    <i class="fas fa-file-pdf"></i> Lihat PDF
                                                </a>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td class="action-buttons">
                                            @if($izin->status != 'Disetujui' && $izin->status != 'Ditolak')
                                                <form action="{{ route('izin.approve', $izin->id) }}" method="POST" style="display: inline-block;" id="approve-form-{{ $izin->id }}">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="button" class="btn btn-success btn-sm" onclick="confirmApprove({{ $izin->id }})">
                                                        <i class="fas fa-check"></i> Setujui
                                                    </button>
                                                </form>
                                                <form action="{{ route('izin.reject', $izin->id) }}" method="POST" style="display: inline-block;" id="reject-form-{{ $izin->id }}">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="button" class="btn btn-warning btn-sm" onclick="confirmReject({{ $izin->id }})">
                                                        <i class="fas fa-times"></i> Tolak
                                                    </button>
                                                </form>
                                            @else
                                                <span class="text-muted">
                                                    @if($izin->status == 'Disetujui')
                                                        <i class="fas fa-check-circle text-success"></i> Telah disetujui
                                                    @else
                                                        <i class="fas fa-times-circle text-danger"></i> Telah ditolak
                                                    @endif
                                                </span>
                                            @endif
                                            <form action="{{ route('izin.destroy', $izin->id) }}" method="POST" style="display: inline-block;" id="delete-form-{{ $izin->id }}">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $izin->id }})">
                                                    <i class="fas fa-trash"></i> Hapus
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <!-- Responsive-table-->
    <script src="{{ URL::asset('plugins/RWD-Table-Patterns/dist/js/rwd-table.min.js') }}"></script>
    <!-- Sweet-Alert  -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        $(function() {
            // Hide the controls for responsive table
            $('.table-responsive').responsiveTable({
                addDisplayAllBtn: false,
                displayAll: false,
                displayPriorityCols: false
            });
            
            // Remove extra buttons (PDF, Excel, Column visibility)
            setTimeout(function() {
                $('.dt-buttons').remove();
                $('.dataTables_length').remove();
                $('.dataTables_filter').remove();
                $('.focus-btn').hide();
                $('.display-btn').hide();
            }, 100);

            // Auto submit form when date changes
            $('#date').on('change', function() {
                $('#filterForm').submit();
            });
        });
        
        function confirmDelete(id) {
            Swal.fire({
                title: 'Apakah anda yakin?',
                text: "Data izin yang dihapus tidak dapat dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }

        // Fungsi untuk konfirmasi approve
        function confirmApprove(id) {
            Swal.fire({
                title: 'Konfirmasi Persetujuan',
                text: "Apakah anda yakin ingin menyetujui izin ini?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Setujui',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('approve-form-' + id).submit();
                }
            });
        }

        // Fungsi untuk konfirmasi reject
        function confirmReject(id) {
            Swal.fire({
                title: 'Konfirmasi Penolakan',
                text: "Apakah anda yakin ingin menolak izin ini?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Tolak',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('reject-form-' + id).submit();
                }
            });
        }
    </script>
@endsection