@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Manajemen Pengajuan Surat</h5>
                        <div>
                            <a href="{{ route('pengajuan.create') }}" class="btn btn-warning">Tambah Pengajuan</a>
                        </div>
                    </div>
                    <div class="card-body">
                        {{-- Form Filter --}}
                        @if (Auth::user()->hasRole('admin'))
                            <div class="card mb-4">
                                <div class="card-header">Filter Data</div>
                                <div class="card-body">
                                    <form id="filter-form">
                                        <div class="row g-3 align-items-end">
                                            <div class="col-md-4">
                                                <label for="nama_user" class="form-label">Nama Pengguna</label>
                                                <input type="text" class="form-control" id="nama_user" name="nama_user"
                                                    placeholder="Cari nama pengguna...">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="perangkat_daerah_id" class="form-label">Perangkat Daerah</label>
                                                <select class="form-select" id="perangkat_daerah_id"
                                                    name="perangkat_daerah_id">
                                                    <option value="">-- Semua Perangkat Daerah --</option>
                                                    @foreach ($perangkatDaerahs as $pd)
                                                        <option value="{{ $pd->id }}">{{ $pd->nama_pd }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="status_id" class="form-label">Status Pengajuan</label>
                                                <select class="form-select" id="status_id" name="status_id">
                                                    <option value="">-- Semua Status --</option>
                                                    @foreach ($statuses as $status)
                                                        <option value="{{ $status->id }}">{{ $status->nama_status }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-12 text-end">
                                                <button type="button" id="filter-btn" class="btn btn-primary">Terapkan
                                                    Filter</button>
                                                <button type="button" id="reset-btn"
                                                    class="btn btn-secondary">Reset</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        @if ($message = Session::get('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <table class="table table-bordered datatable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nomor Pengajuan</th>
                                    <th>Nama Pengguna</th>
                                    {{-- <th>Perangkat Daerah</th> --}}
                                    <th>Perangkat Daerah Asal</th>
                                    <th>Perangkat Daerah Tujuan</th>
                                    <th>Status</th>
                                    <th width="150px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('modal')
    <div class="modal fade" id="uploadSuratModal" tabindex="-1" aria-labelledby="uploadSuratModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadSuratModalLabel">Unggah Surat Selesai</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="upload-surat-form" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="pengajuan-id-upload" name="pengajuan_id">
                        <div class="mb-3">
                            <label for="file_surat_selesai" class="form-label">File Surat (.pdf)</label>
                            <input type="file" class="form-control" id="file_surat_selesai" name="file_surat_selesai"
                                required accept=".pdf">
                        </div>
                        <div id="loading-indicator" class="text-center" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p>Mengunggah file, mohon tunggu...</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" id="submit-upload-btn">Unggah</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="statusModalLabel">Ubah Status Pengajuan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="update-status-form">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="pengajuan-id" name="pengajuan_id">
                        <div class="mb-3">
                            <label for="new-status" class="form-label">Status Baru</label>
                            <select class="form-select" id="new-status" name="status_id" required>
                                @foreach ($statuses as $status)
                                    <option value="{{ $status->id }}">{{ $status->nama_status }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3" id="keterangan-field" style="display: none;">
                            <label for="keterangan" class="form-label">Keterangan</label>
                            <textarea class="form-control" id="keterangan" name="keterangan" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                responsive: {
                    details: {
                        type: 'column',
                        target: 0,
                        renderer: function(api, rowIdx, columns) {
                            var data = $.map(columns, function(col) {
                                return col.hidden ?
                                    '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' +
                                    col.columnIndex + '">' +
                                    '<td><strong>' + col.title + ':</strong></td> ' +
                                    '<td>' + col.data + '</td>' +
                                    '</tr>' :
                                    '';
                            }).join('');
                            return data ? $('<table/>').append(data) : false;
                        }
                    }
                },
                columnDefs: [{
                    className: 'control',
                    orderable: false,
                    targets: 0,
                    render: function(data, type, row, meta) {
                        // Icon plus/minus + nomor row
                        return '<i class="fas fa-plus-circle text-primary me-1"></i>' + (meta
                            .row + 1);
                    }
                }],
                ajax: {
                    url: "{{ route('pengajuan.index') }}",
                    data: function(d) {
                        d.nama_user = $('#nama_user').val();
                        d.perangkat_daerah_id = $('#perangkat_daerah_id').val();
                        d.status_id = $('#status_id').val();
                    }
                },
                columns: [{
                        data: null,
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'no_pengajuan',
                        name: 'no_pengajuan'
                    },
                    {
                        data: 'user.name',
                        name: 'user.name'
                    },
                    {
                        data: 'perangkat_daerah_asal',
                        name: 'perangkatDaerahAsal.nama_pd',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'perangkat_daerah_tujuan',
                        name: 'perangkatDaerahTujuan.nama_pd',
                        orderable: false,
                        searchable: false
                    },
                    // {
                    //     data: 'user.perangkat_daerah.nama_pd',
                    //     name: 'user.perangkat_daerah.nama_pd',
                    //     orderable: false,
                    //     searchable: false
                    // },
                    {
                        data: 'status_pengajuan',
                        name: 'status_pengajuan',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('.datatable').on('click', 'td.control', function() {
                var icon = $(this).find('i');
                if (icon.hasClass('fa-plus-circle')) {
                    icon.removeClass('fa-plus-circle text-primary').addClass('fa-minus-circle text-danger');
                } else {
                    icon.removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
                }
            });

            table.on('draw', function() {
                $('.datatable td.control i')
                    .removeClass('fa-minus-circle text-danger')
                    .addClass('fa-plus-circle text-primary');
            });

            $('#filter-btn').click(function() {
                table.draw();
            });

            $('#reset-btn').click(function() {
                $('#filter-form').trigger("reset");
                table.draw();
            });

            // Handle klik tombol "Ubah Status"
            $('body').on('click', '.update-status-btn', function() {
                var pengajuanId = $(this).data('id');
                var currentStatusId = $(this).data('status-id');
                var currentStatusKeterangan = $(this).data('status-keterangan');
                $('#pengajuan-id').val(pengajuanId);
                $('#new-status').val(currentStatusId);
                $('#keterangan').val(currentStatusKeterangan);

                $('#new-status').trigger('change');

                $('#statusModal').modal('show');
            });

            // Tampilkan/sembunyikan field keterangan berdasarkan status yang dipilih
            $('#new-status').change(function() {
                var selectedStatusText = $(this).find('option:selected').text();
                if (selectedStatusText === 'Revisi' || selectedStatusText === 'Ditolak') {
                    $('#keterangan-field').show();
                    // $('#keterangan').val(null);
                    $('#keterangan').attr('required', true);
                } else {
                    $('#keterangan-field').hide();
                    $('#keterangan').val(null);
                    $('#keterangan').attr('required', false);
                }
            });

            // Handle form submission untuk ubah status
            $('#update-status-form').submit(function(e) {
                e.preventDefault();
                var pengajuanId = $('#pengajuan-id').val();
                var formData = $(this).serialize();
                $.ajax({
                    url: "{{ url('pengajuan') }}/" + pengajuanId + "/update-status",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        $('#statusModal').modal('hide');
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.success,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                        table.draw();
                    },
                    error: function(response) {
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.responseJSON.error || 'Terjadi kesalahan.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });

            // Handle klik tombol "Unggah Surat"
            $('body').on('click', '.upload-surat-btn', function() {
                var pengajuanId = $(this).data('id');
                $('#pengajuan-id-upload').val(pengajuanId);
                $('#uploadSuratModal').modal('show');
            });

            // Handle form submission untuk unggah surat
            $('#upload-surat-form').submit(function(e) {
                e.preventDefault();
                var pengajuanId = $('#pengajuan-id-upload').val();
                var formData = new FormData(this);

                $('#loading-indicator').show();
                $('#submit-upload-btn').prop('disabled', true);

                $.ajax({
                    url: "{{ url('pengajuan') }}/" + pengajuanId + "/upload-surat",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        $('#uploadSuratModal').modal('hide');
                        $('#loading-indicator').hide();
                        $('#submit-upload-btn').prop('disabled', false);
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.success,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                        table.draw();
                        $('#upload-surat-form').trigger("reset");
                    },
                    error: function(response) {
                        $('#loading-indicator').hide();
                        $('#submit-upload-btn').prop('disabled', false);
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.responseJSON.error ||
                                'Terjadi kesalahan saat mengunggah file.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });

        });
    </script>
@endpush